Life & Work

Webflowのカスタムコードでシンタックスハイライトのコードブロックとテーブルを追加してみた

2020-06-19

こんにちは、デザイナーのくーらです！

やっと弊社のコーポレートサイトの移行が落ち着いたので、Webflowでもうちょっとリッチなカスタマイズができるかと思って色々いじってみました〜！

自分はプログラマーではないので、もし専門用語の扱いやコードの書き方がずさんだったら目を瞑っていただければと思います…(*ﾉω・*)ﾃﾍ

‍

まず、Webflowのカスタムコードで何ができるかを見てみましょう〜！

‍

Webflowでカスタムコードが使えるところは以下の3箇所

１，プロジェクトの設定画面（<head>と<body>のみ）

こちらは全ページに反映されるカスタムコード

２，各ページの設定画面（<head>と<body>のみ）

こちらはページ別に設定できる該当ページに反映されるカスタムコード

1と2について、こちらのページで使える言語とタグの説明がありますのでご参考ください。

https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

基本、<link>、<meta>、<style> </style>、<script> </script>のタグが使えるのと、HTML、CSS、JSは使えて、サーバーサイドの言語は使えないです。

‍

３，ページや、CMSのリッチエディターに埋め込むカスタムコード

こちらのページに詳しい説明がありますのでご参考ください！

‍

ブログのシンタックスハイライトを早速作ってみよう

弊社のブログ「R3 Cloud Journey」は、一応テック系のブログなのでシンタックスハイライトのコードブロックの表示がないとどうしても気が済まないので、最初から着手したのはこちらのほうでした。

Webflowブログの本文はリッチテキスト＋HTML埋め込みなので、コード本体をHTMLを埋め込むことにして、外部スクリプトを追加というかたちにしました。

色々調べた結果、 Prism.jsが非常に優秀で使いやすいということがわかり、早速入れてみました。

https://prismjs.com/

サイトのデザインによって自由に選べる8テーマが提供されていうち、Defaultのテーマを使うことにしました。

また、使い方としてダウンロードして使うのと、CDN、Bundler、Nodeで使うことも可能ですが、WebflowではCSSやJSファイルをアップロードする機能がないので、CDN利用が一番良いかと。

‍

<head>タグに

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css" integrity="sha256-cuvic28gVvjQIo3Q4hnRpQSNB0aMw3C+kjkR0i+hrWg=" crossorigin="anonymous" />

</body>タグの前に

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js" integrity="sha256-9h14mWYYiQGkeAKg2JtijbqApb56kgw57WN6sI6dwH0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha256-3S2PESHNt0YNL65z57WuHPHIv12fibpBDXepyCGHftw=" crossorigin="anonymous"></script>

‍

ブログ本文の編集画面で、埋め込みコードのエディタから以下のように書けばきれいなコードブロックができちゃいます、言語名はprism.jsの対応言語から参考すれば良いかと〜

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

ちょっといい感じのコードブロックができたでしょう？↑

‍

ちなみに行を表示したい場合は埋め込みコードをこうすれば大丈夫です！

 <pre class="line-numbers"><code ...

テーブルを作ってみる

とある同僚から、ブログでテーブルを書きたいんだけど良い感じにスタイリング出来ないかとリクエストがあったので、やり方を調べてみました。

残念ながらWebflowが提供されているモジュールからテーブルを作ることは無理なので、HTMLで書くしかないのです(´・ω・`)…

幸いMarkdownからHTML変換ツールが使えるので、埋め込みコードにテーブルのHTMLをコピペしましょう。

（以下、同僚のブログより引用）

<table>
<tr>
<th>フィールドコード</th>
<th>フィールド名</th>
<th>タイプ</th>
</tr>
<tr>
<td>name</td>
<td>名前</td>
<td>文字列(1行)</td>
</tr>
<tr>
<td>latitude</td>
<td>緯度</td>
<td>文字列(1行)</td>
</tr>
<tr>
<td>longitude</td>
<td>経度</td>
<td>文字列(1行)</td>
</tr>
</table>

‍

そして、ブログのページ設定で</body>タグにテーブルのスタイル要素を定義すればいい。ここは好きに書いていいよ！

<style>
table{
border: 2px solid #292929;
border-collapse: collapse;
margin:20px;
text-align: center;
letter-spacing: 1px;
}
td, th {
border: 1px solid #292929;
border-collapse: collapse;
padding:10px;
}
th{
background-color: #FFDF74;
border-bottom: 2px solid #292929;
</style>

‍