【Cocoon】ソースコードをハイライト表示させる方法とハイライトしない時の解決方法

ゾムビット

ドーモ、僕(@zomubbit)です。ぞむぅ。

前回の記事はここからどうぞ☆

【Cocoon】SNSフォローボタンにpixivを追加する方法【カスタマイズ】

ブログ上に表示したいのに選択項目がないSNSアカウントの追加方法を解説しています。

技術系ブロガーさん方がよくやられているこれ。

黒い背景にソースコードが書かれているやーつ。

これ『シンタックスハイライト』と呼ぶそうです。

シンタックスハイライトとは？

テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。シンタックスカラーリング・構文着色とも。

ゾムビット

ゾムビットもこれやりたいー

と、思ったはいいですが、まずこの黒背景のこれをシンタックスハイライトと呼ぶことを突き止めるのに苦労しました。

「ブログ　コード　貼り付け　Cocoon」とかで検索してました笑

Cocoonユーザーならめちゃくちゃ簡単に反映できるので、ちゃちゃっと設定して技術系ブロガーになっちゃいましょう！

Contents

Cocoonハイライトの設定方法
ブログへの挿入方法
ハイライトが反映されない時の対処法
おまけ
まとめ

Cocoonハイライトの設定方法

①ハイライト表示にチェックを入れる

WordPressの編集画面で『Cocoon設定→コード』に行きます。

「ソースコードをハイライト表示」にチェックを入れて、「変更をまとめて保存」を押して終了です。

・行番号にチェックを入れると左に番号が出てくるので、お好みでチェックしてください。

・ハイライトスタイルからハイライトのカラーを変えられます（因みに筆者が選択しているのは『monokai』です）。

ハイライトカラーは下記のサイトから確認できます。

We're not a CDN - highlight.js

ソースコードをハイライト表示させる方法

テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。

ブログへの挿入方法

ブロックエディターで説明します。

①フォーマット→コード

②ソースコードを入力（コピペ）する

これで「公開する」か「更新」をします。

③ハイライト反映

以上です！

公式サイトで反映に「preタグ」が必要と記載がありますが、別に書かなくても反映されます。

ブロックエディターでソースコードを挿入する方法

Cocoonでブロックエディター（Gutenberg）のコードブロックを利用してソースコードをハイライト表示する方法の説明です。

因みに

上記のゾムビットのシンタックスハイライトは、以下のAA（アスキーアート）変換サイトで画像を変換したものをコピペして反映させました。

AA変換(アスキーアート生成)｜Web便利ツール@ツールタロウ

画像からアスキーアートを自動作成するWebツール。横幅200文字のサイズまで生成可能で、画像・テキスト両方で保存可能。PC・スマートフォン・タブレットのブラウザで使えます。常時SSL対応。

※画像編集で修正しているのでAAが綺麗に見えますが、実際は細長くていびつな表示になります。

ハイライトが反映されない時の対処法

Cocoon設定で『ソースコードをハイライト表示』にチェックを入れているのに、ずっと背景がグレーのままでハイライトが反映されない、できない！って場合はぜひこれを試してみてください。

①バックアップを取る

PHPファイルを編集するので、作業前に必ずバックアップを取ってください。

バックアップの取り方はこちらからどうぞ

【Cocoon】SNSフォローボタンにpixivを追加する方法【カスタマイズ】

ブログ上に表示したいのに選択項目がないSNSアカウントの追加方法を解説しています。

②functions.phpにコードの追加

WordPressの編集画面で『外観→テーマエディター→functions.php』に行きます。

『編集するテーマを選択』はCocoon childを選択してください。

列の一番下に以下のコードを貼り付けて「ファイルを更新」してください。

/* Syntax highlight */
if(!is_admin()){
  add_action( 'wp_enqueue_scripts', 'enqueue_highlightjs' );
    function enqueue_highlightjs() {
      wp_enqueue_style( 'highlightjs', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css', array(), '9.9.0');
      wp_enqueue_script('highlightjs', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js', array(), '9.9.0', true);
    }

  add_action( 'wp_footer', 'initHighlightjs', 30 );
  function initHighlightjs() {
    echo '<script>hljs.initHighlightingOnLoad();</script>';
  }
}

以上です。

これで灰色だった背景も設定した色に無事に反映されるはずです。

参考にさせていただきました