2024年9月13日 2024年9月13日 By wataru In ,

react-markdownのcodeblockにコピーボタンを配置する話

前回、react-markdownをカスタマイズしてコードをSyntaxHighlighterを適用する方法を書きました。

コードを表示するとクリップボードにコピーして利用することが多いと思いますのでコピーボタンを配置しておきます

クリップボードにコピーを行う方法

はじめにクリップボードに文字列をコピーする方法を書いておきます。


        navigator.clipboard.writeText(code);

コピーボタンを設置する

次にコピーボタンを配置します。

今回は一番単純な方法でCodeBlockに直接書き込む方法を取ります


    const copyToClipboard = (code: string) => {
        navigator.clipboard.writeText(code);
    };

    return (
        <div style={{ position: 'relative' }}>
            <span style={{ position: 'absolute', top: '10px', right: '16px' }}>
                <button onClick={() => copyToClipboard(children)}>Copy</button>
            </span>
            <SyntaxHighlighter
                style={atomDark}
                language={lang}
            >
                {String(children).replace(/\n$/, '')}
            </SyntaxHighlighter>
        </div>
    );

これによりコードの右上にコピーボタンが配置されました

終いに

　ReactMarkdownで表示したコードスタイルにコピーボタンを配置しました

デザイン的にボタン！設置とダサいですが
マウスオーバーするとボタンを表示させたり、
ボタンを押下すると数秒間「Copied … 」とか表示させるとか

色々できます

カスタマイズしてもっと楽しみましょう

参考

https://developer.mozilla.org/ja/docs/Web/API/Clipboard/writeText