WebflowCMSのブログ内にコードブロック(シンタックスハイライト）を追加する。Prism.jsの導入方法。

March 28, 2021
Webflow

21年3月現在、WebflowCMSのリッチテキストには、ブログ内でのコードブロック（シンタッククスハイライト）要素が標準で用意されていないようだったので、追加する方法を調べてみました。

ちなみに、コードブロック（シンタッククスハイライト）はこういう↓のです。プログラムの記述を言語にあわせていい感じに装飾表示してくれるもの。技術系ブログとかでよくみるやつです。

今回は、Webflowブログにコードブロックを追加するために、Prism.jsというライブラリがよさそうなのでこれを活用します。

Prism.jsをWebflowに追加する

1.Pism.jsのCDN用リンクを取得

まず前提として、Prism.jsの導入方法としては何種類かあります。（必要なパッケージをダウンロードしてアップロードする方法、CDN、Bundler、Nodeなど）しかしながら、WebflowではCSSやJSファイルをアップロードする機能がないので、CDNでの導入が一番良いかと思います。

prism.jsのCDN用のリンク一覧は下記です。必要なものを選びましょう。

https://cdnjs.com/libraries/prism

いっぱいありすぎてどれを使えばわからない。手軽にはじめたいという人はとりあえず、下記のファイルを使うといいと思います。

[CSS]
https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-okaidia.min.css

[JavaScript]
https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-core.min.js
https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js

2.WebflowのPrism.jsをセットアップ

追加するCDNのリンクが決定したら、それをWebflowで構成するサイトの<head>タグ内と、</body>の直前に、Prism.jsを読み込む用のカスタムコードを記述します。

Webflowにカスタムコードを追加する方法はいくつありますが、今回は、ベースHTMLにカスタムコードを埋め込む手法で追加します。

＜操作方法＞

①Webflowプロジェクトの”Setting”>"Custom Code"に移動します。

②<head>タグ内に下記を書き込み、変更を保存します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-okaidia.min.css"/>

‍

③</body>タグ直前に下記を書き込み、変更を保存します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-core.min.js"><script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js"><script>

‍

これでセットアップは完了です。

3.シンタックスハイライトをWebflowブログのエディター内で使う

セットアップが終わったら、Webflowのブログ編集画面のリッチテキスト要素に移動します。

コードブロックの基本的な書き方は以下の通りです。

  <pre><code class="language-言語名">表示したいコード</code></pre>

‍

この構文をリッチテキストエリアのカスタムコード要素で記述します。

例えば、CSSコードについてシンタックスハイライトしたい場合はこんな感じ。

上記を保存するとこのようにCSSコードがハイライトされて表示されます。

.glow_banner {
  background: #1e3971;
  background: -moz-linear-gradient(top, #091938, #1e3971);
}
.glow_banner .catch {
  display: block;
  font-size: 16px;
  margin-top: 10px;
  padding: 0 0 10px 0;
}

CSS意外にも、javascriptやPython、GoやDartなど多くの言語に対応しています。

対応言語は、ここを参照ください

https://prismjs.com/#supported-languages

ちなみに、HTMLのシンタックスハイライトは以下のように書いてあげれば良いと思いきや。

<pre><code class="language-markup">
<!DOCTYPE html>
<html>
<body>
　<h1>見出し1</h1>
　<h2>見出し2</h2>
</body>
</html>
</code></pre>

このまま書くと、下記のようにタグが消えて文字だけが表示されます。






見出し1


見出し2

そのため、HTMLタグを表示したい場合あh、＜＞などの記号を特殊文字に変換した上で、反映させてあげる必要があります。

特殊文字の変換は、”HTML特殊文字変換ツール"などがあるので、こういうものを活用するといいと思います。

タグの非表示を避ける別の方法として、Prism.jsでは”Unescaped Markup"というプラグインが用意されているので、こちらを活用する手もあります。

‍

以上

Webflowブログ内にコードブロック（シンタックスハイライト）を追加する方法でした。

今回は、説明しませんでしたが、Prism.jsには、行番号の追加やツールバーなどよりカスタマイズするためのプラグインが用意されているので興味があれば確認してみてください。

https://prismjs.com/#plugins

‍

参考）

Prism.jsでシンタックスハイライトを付ける方法！使い方を解説

https://qumeru.com/magazine/42

Tags

Unreal Engine
Blender
Hubspot
Flutter
Webflow