#Blogger の記事ページに、コピーボタンが付いたコード表記欄（highlight.js）を実装しました。

2021年6月6日日曜日

highlight.jsを実装するまでの経緯。

Bloggerで記事を書いていて、コピペ用のソースを表示したくなる事ってありますよね。

でも、普通にコピペすると大変なことになってしまうので、なんとか対応できないかと調べてみることにしました。

Bloggerの記事に直接HTMLやCSS、ジャバスクリプトを書き込むとき、どうすればいいのかわからなくて途方に暮れながらググってました。そもそも直接ソースを書き込む事をなんていうのかわからなくて苦労しましたが、highlight.jsって言うんですね。

無料の写真素材の配布やADHDの管理人による日常の記録など。今はコロナウイルスについての話題が多いです。

結論としては、単純にBloggerの記事ページにソースコードを貼りたいだけなら、テキスト処理ツールで実際参照にエンコードして貼り付ければ良いみたいですね。

でも、それだとちょっとばかり見た目がかっこ悪いので、それもどうにかならないかなぁと思って更にグーグル先生に質問してみたら、グーグル先生が素敵な記事を教えて下さいましたよ。

この記事では、Webサイトやブログでソースコード（HTMLやJavaScriptなど）を見やすくしてくれる "highlight.js" をコピペ一発で簡単に導入する方法を紹介します。

詳しい説明はリンク先の記事で詳しく教えてくださっているので、今回は詳細は割愛します。実際にコードを利用してみた私の記事は「#Blogger で、記事本文に吹き出しの会話形式の記事を入れつつ、更にふわっと下からアニメーションで表示させる。」になります。