idにその要素を設定したい（同idが多数ある場合） - highlight.jsをクリックで簡単にコピーしたい。。。後編

Question

####目標
前回、JavaScriptで追加したid（ #hljs ）では一つの記事内にコード（pre要素）があると、コピーされる範囲が全てになってしまうため、 data-clipboard-target にそのpre要素のみを指定する。
#hljs の後に1,2,3...と自動的につけるのでも良いのですが、できればそれをしないでもできないかなと思い質問させていただいています。

前回の目標
highlight.jsでhighlightしたコードをクリックすることでコードをコピーするようにしたい。
また、HTML上での加工などは行いたくない。
前回完成コード：https://jsfiddle.net/2001Y/reamhmtb/1/
前回質問 ：https://teratail.com/questions/56205

・・・
$('pre').attr("data-clipboard-target", "#hljs");
・・・

####記事に実際挿入するHTML
コードはJSFiddleと同じ。

<pre class="css">
body {
 font-family: 'Rounded-M+', 'Hiragino Kaku Gothic ProN', Helvetica, Arial, sans-serif;
 color: #333333;
 word-wrap: break-word;
}
</pre>

####使用してみたJavaScript
余分な部分は省いてあります。

$('pre').attr("id", "hljs");
$('pre').attr("data-clipboard-target", "#hljs");

####要望

• できればJavaScript等を使いたくない
• テンプレ（HTML）をいじりたくない

解決方法がわかる方は教えてください

Comments

[kei344]

https://teratail.com/questions/56457 これと同じ内容では？

[2001Y]

はい申し訳ないです、消去依頼はしているのですが。。。

[kei344]

回答が付くと消去できないので、どちらかが解決したら解決した方法を書き込んで解決済にすることをお勧めします。

[2001Y]

わかりましたありがとうございます。

Answer 1

やろうとしていることって、teratail のソースコード部分についている機能と同じですよね。

同じプラグイン使っているように見えるし、このページそのものを読み解けば同じようにできるのではないですか？

Comments

[2001Y]

ありがとうございます。
参考にさせていただきます。
この質問は消そうとしているのですがまだ消えてないんですよね汗