ブログなどでコードを記載しているサイトは多いです。その表示方法も様々で、行番号があるもの、ハイライトが付いているものなどがあります。そのコードをコピーしても余計な行番号が付いてきたりして、ストレスと感じたりします。 そこで使ってみたいのがcopy-code-blockです。自由度の高くコードのコピーが可能です。

copy-code-blockの使い方

コードハイライタと組み合わせた例です。

コピーボタンを押すと、コードだけがコピーできます。

<div class='cool-container'>
    <p class='cool-description'>Get ready for...</p>
    <ul class='cool-list'>
        <li class='cool-item'>rainbows</li>
        <li class='cool-item'>and</li>
        <li class='cool-item'>unicorns</li>
    </ul>
</div>

それこそ、DOM全体に色が付いていても問題ありません。

CSS、スタイル設定どちらにも対応しています。

copy-code-block自体はJavaScriptの関数として呼び出すことも可能で、引数としてテキストを指定すればコピーしてくれます。クリップボード操作ライブラリとしても重宝しそうです。

copy-code-blockはJavaScript製のオープンソース・ソフトウェア（BSD）です。

Storybook Pickra/copy-code-block: A solution to display code in the browser and copy it to the clipboard