webflowでは現状（2022年12月時点）、ソースコードを記事にする際のコードブロックを記述する機能が無い為、webflow内にセットアップする必要が有ります。本記事ではwebflowでシンタックスハイライトのコードブロック設定方法をご紹介します。
webflowは有料プランでカスタムコード（コードを挿入することが出来る機能）を利用することが出来ます。カスタムコードとは、サイト全体、ページ単体、リッチテキストの一部に直接コーディングを加えることで、より拡張性のあるWEBサイトを構築することが可能です。カスタムコードはHTML、CSS、JavaScriptが使え、サーバーサイド言語は使用できません。
Project Settings > Custom Codeから設定することが出来ます。こちらはサイト全体に反映されます。Head Codeから下にスクロールするとBody Codeがそれぞれ有ります。
Pages > 各ページ歯車（設定）から下にスクロールすると、Custom Code欄が有ります。<head>タグ、</body>タグがそれぞれ有ります。
ページの一部分（上部画像の左側）、もしくはCMSリッチテキスト（上部画像の右側）で設定することが出来ます。
webflowでテック系のサイト構築をする際に、有った方が良いのがシンタックスハイライトのコードブロック記述です。webflowでコードブロックをセットアップする際に、どうやらPrism.jsが良いとの情報が多かったので試しに実装してみると良い感じに導入出来ました。Prism.jsの導入でダウンロードしてアップロードする方法が有りますが、webflowにはCSS,JSファイルアップロード機能が無い為、CDN導入で進めます。CDN導入のリンクは下記となります。
・https://cdnjs.com/libraries/prism
なお、下記サイトを参考にしております。
・MarkeTECHさん
・r3it.comさん
実際にwebflowにカスタムコードを導入する手順をご紹介します。
※上記のCopyを押すとコードがコピーできます
コードの書き方は下記の通りとなります。
例えば下記の通りCSSコードを記述してみます。
上記のコードから下記の通りシンタックスハイライトで表示されます。
CSS以外の対応言語は下記となります。
・https://prismjs.com/#supported-languages
HTMLのコードを下記の通り記載してみると・・・。
下記の通りHTMLタグが消えて文字だけが表示されてしまいます。
HTMLタグを正確に表示するためには、<>記号を特殊文字に変換する必要が有ります。特殊文字変換ツールを活用する必要が有ります。
上記のような形で変換したものをコードの中に入れて改めて出力してみます。
そうすると、HTMLのシンタックスハイライトのコードブロックが実現できます。以上がシンタックスハイライトのコードブロックでした。
シンタックスハイライトのコードブロックのコピーボタンのスタイル設定の仕方をご紹介します。スタイル設定はシンプルにクラスを「copy-to-clipboard-button」に設定して、スタイルを変更するだけ。好きなスタイルに変更してみましょう！
今回、Prism.jsのコードブロックを導入する際に壁にぶち当たったのが、コードブロックが枠からはみ出してしまいどう対応すればよいか困ってしまったことが有りました。同じように悩んでいる方がいらっしゃいましたら下記を試してみてください。
1.png)
2.png)
10.png)
007.png)
06.png)
05.png)
.png)
