<h2 id="zenn-markdown-html%E3%81%A8%E3%81%AF" data-line="1" class="code-line"><a class="header-anchor-link" href="#zenn-markdown-html%E3%81%A8%E3%81%AF" aria-hidden="true"></a> zenn-markdown-htmlとは</h2>
zenn-markdown-htmlはmarkdownをzenn風のデザインのhtmlに変換するライブラリです。このブログでもzenn-markdown-htmlを利用して、markdownをhtmlに変換しています。
詳しくは下記の記事を参照してください。

 <iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://zenn.dev/zenn/articles/markdown-guide" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no">
 </iframe> 
 
markdownをおしゃれなデザインに変換してくれてめっちゃ助かってます！
<h2 id="zenn-markdown-html%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AB%E3%82%B3%E3%83%94%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%8C%E3%81%AA%E3%81%84%EF%BC%81" data-line="10" class="code-line"><a class="header-anchor-link" href="#zenn-markdown-html%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AB%E3%82%B3%E3%83%94%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%8C%E3%81%AA%E3%81%84%EF%BC%81" aria-hidden="true"></a> zenn-markdown-htmlのコードブロックにコピーボタンがない！</h2>
zenn-markdown-htmlを使ってコードブロックを表示すると、コピーボタンがないことに気づきました。Zennにはコピーボタンが着いているので、zenn-markdown-htmlを使った自分のブログでもコピーボタンを追加したいですよね。
<h2 id="%E3%82%B3%E3%83%94%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" data-line="13" class="code-line"><a class="header-anchor-link" href="#%E3%82%B3%E3%83%94%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" aria-hidden="true"></a> コピーボタンを追加する方法</h2>
コピーボタンを追加する方法はいくつかあると思いますが、今回は変換されたhtmlにコピーボタンを追加する方法を紹介します。
<h3 id="html%E3%81%ABjavascript%E3%81%A7%E7%9B%B4%E6%8E%A5%E3%82%B3%E3%83%94%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B" data-line="16" class="code-line"><a class="header-anchor-link" href="#html%E3%81%ABjavascript%E3%81%A7%E7%9B%B4%E6%8E%A5%E3%82%B3%E3%83%94%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B" aria-hidden="true"></a> htmlにJavaScriptで直接コピーボタンを追加する</h3>
htmlにcopyボタンを追加する方法は色々あるかと思いますが、今回はmarkdownから変換されたhtmlに対して、直接コピーボタンを追加することにします。
コードブロックを特定するには、コードブロックの前に&lt;pre language-言語別&gt;があるのでそれと&lt;code&gt;を探します。
また、コードブロックは複数ある場合も考えられるので、idを付与して、idが重複しないようにします。
私の場合は、tailwindcssを使っているので、tailwindcssのクラスを使っています。
<div class="code-block-container"><div class="code-block-filename-container">addCopyButton.js</div><pre class="language-js"><code class="language-js code-line" data-line="25">const addCopyButton = (html) =&gt; {
 // コードブロックが複数ある場合にidが重複しないように、idの初期値を設定
 let id = 0
 // コードブロックの前には&lt;pre language-言語別&gt;があるのでそれと&lt;code&gt;を探して、idが付与されていなければidを追加する。その前にコピーボタンを追加する
 return html.replace(/&lt;pre.*?&gt;&lt;code.*?&gt;/g, (match) =&gt; {
 id++;
 return `&lt;div class="relative"&gt;&lt;button id="code-button-${id}" class="absolute right-0 top-0 z-10 
 bg-gray-700 text-gray-100 px-2 py-1 text-sm rounded-md" onclick="var target = document.getElementById
 ('code-${id}').innerText; navigator.clipboard.writeText(target).then(()=&gt; {document.getElementById
 ('code-button-${id}').innerText = 'COPIED!'; setTimeout(() =&gt; {document.getElementById('code-button-${id}
 ').innerText = 'Copy' }, 2000)}, ()=&gt;{});"&gt;Copy&lt;/button&gt;${match.slice(0, -1)} id='code-${id}'&gt;`;
 }
 )
}
</code></pre></div>tailwindを使わない場合は、こんな感じになるかと思います。ちなみに自分では試してないので、実際にうまくいくかは不明です。(多分うまくいくはず...) 
cssで.copy-buttonに色々とスタイルを当ててください。
<div class="code-block-container"><div class="code-block-filename-container">addCopyButton.js(tailwindを使わない場合)</div><pre class="language-js"><code class="language-js code-line" data-line="45">const addCopyButton = (html) =&gt; {
 // コードブロックが複数ある場合にidが重複しないように、idの初期値を設定
 let id = 0
 // コードブロックの前に&lt;pre language-言語別&gt;があるのでそれと&lt;code&gt;を探して、idを追加する。その前にコピーボタンを追加する
 return html.replace(/&lt;pre.*?&gt;&lt;code.*?&gt;/g, (match) =&gt; {
 id++;
 return `&lt;button id="code-button-${id}" class="copy-button"&gt;Copy&lt;/button&gt;${match.slice(0, -1)} id='code-${id}'&gt;`;
 }
 )
}
</code></pre></div><h3 id="prism.js%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95%E3%82%82%E3%81%82%E3%82%8B" data-line="58" class="code-line"><a class="header-anchor-link" href="#prism.js%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95%E3%82%82%E3%81%82%E3%82%8B" aria-hidden="true"></a> prism.jsを使う方法もある</h3>
Next.jsを使っている場合は、remark-prismかrehype-prismというライブラリを利用して、prism.jsを使うこともできます。 
prism.jsにはプラグインにcopy-to-clipboardというコピーボタンを追加するプラグインがあるので、それを使うこともできます。
自分で変換コードを書く前に使えるかなと思いトライしてみましたが、私の場合はうまくいきませんでした。
実際にやったのはrehype-prismを導入し、プラグインを入れてみたのですがcopy-to-clipboardだけうまくいきませんでした（line-numbersとかは使えた）。

 <iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://www.npmjs.com/package/rehype-prism" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no">
 </iframe> 
 
基本的にはrehype-prismのreadmeに書いてある通りなら、copy-to-clipboardは使えるプラグインとして記載されているので可能ではあるはずです。
弱々エンジニアの私は諦めてしまいましたが、できるかたはトライしてみてください。

zenn-markdown-htmlのコードブロックにコピーボタンを追加する