簡単に導入できました。

以下はやり方です。

code prettifyを利用します

google純正のシンタックスハイライトのCSSです。

scriptを読み込むhtmlタグを１行だけ読み込めばいいのでとても便利です！

手順１　scriptタグを取得します

READMEの中間ぐらいにSetup方法があります。https://github.com/google/code-prettify#setup

そこのscriptタグをコピペ。

手順２　「HTML」に挿入します

amebaowndに、「HTML」というパーツがあります。

そのHTMLの一番下にでも先ほどのscriptタグを貼り付けます。

なぜこれが可能かと言うと、amebaowndのソースコードを見てみるとわかるのですが、「HTML」パーツを利用した場合その内容はiframeとして読み込まれることになっています。

なので、jsであってもちゃんと読み込めるのです！

code prettifyはpreタグをターゲットとしていますので、preタグを書いてそのinnerHTMLにコードを書けばOKです。

以下のように入力してみました。

すると！

こんな感じに！！！

おわりに

とってもお手軽にシンタックスハイライトを導入できました😊

もっと細かく調整したい場合は、code prettifyをダウンロードしてカスタマイズしたものを、google driveとかAWSのS3とかにUPしてそれを「HTML」に読む込めばできそうな気がします。

<pre>タグのinnerHTMLをCSSとJSでシンタックスハイライトをするものなので、htmlのソースコードはシンタックスハイライトできない？難しいようです。

自分の好みの見た目などにカスタマイズできると言う長所はあるものの、一番楽でだいたいの言語はカバーしていてそこそこの見た目のシンタックスハイライトは、やはりGithubGistのEmbEmbed機能を使うのがいい気がしますね。