blogger格闘記② コードブロックを使いたい

 bloggerでコードブロックを使えないのか、と試行錯誤した記録です。

困ったこと

bloggerでコードの説明を書くようになって、コードブロックを使いたい欲求が出てきました。

Qiitaみたいなコードブロックを簡単に書ければよいのですが、bloggerには標準でコードブロックを用意しておらず、一工夫が必要でした。

解決方法

<pre><code>タグを使ってhtmlで編集していく方法があるので、その導入方法をまとめておきます。

以下のように書くとコードブロックで表示されるイメージです。

これが

こういう表示になる

①タグに対するCSSを追加する

bloggerの「テーマ → カスタマイズ → 高度な設定 → CSSを追加」より、以下のCSSを追加します。

ここです

pre {
  background: #282c34;
  color: #f8f8f2;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}

code {
  font-family: Consolas, Monaco, monospace;
}

コードブロックの見た目やフォントを設定しています。

CSS追加後は「テーマ → HTML を編集」より、【　]]></b:skin>　】で検索すると追加したCSSの直後のコードがhitするので、そこで修正などできます。

②Prism.jsでコードシンタックスを追加する

①だけでもコードブロックとして表示できるのですが、文字色が１色でわかりづらいので、コードシンタックスを追加します。

いろいろあるみたいですが、今回はPrism.jsを使ってみました。

「テーマ → HTML を編集」より、【　</body>　】で検索し、その直前に以下のスクリプトを貼り付けます。

  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-typescript.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-jsx.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-tsx.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-csharp.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-markup.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-markup-templating.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-css.min.js'/>
  <script src='https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-markup.min.js'/>

各言語のシンタックスハイライトが使えるよう、とりあえずいろいろいれています。

使用する際は、<code class="language-php">のように、対応する言語を書くだけです。

これでシンタックスハイライトできますが、見づらいhtmlモードをなるべく使いたくない身としては、あまり使いたくない手ですね〜。

標準機能でコードブロックが使えるようになるといいんですけどね〜。