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

ブログ

 

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

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

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

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

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

 

ゾムビット
ゾムビット

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

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

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

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

Sponsored Links

Cocoonハイライトの設定方法

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

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

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

 

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

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

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

 

ブログへの挿入方法

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

①フォーマット→コード

 

②ソースコードを入力(コピペ)する

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

 

③ハイライト反映

以上です!

 

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

 

因みに

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

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

 

Sponsored Links

 

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

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

 

①バックアップを取る

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

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

 

②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>';
  }
}

以上です。

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

 

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

上記のサイト様で「ハイライトさせたいソースコードを<pre><code>タグで囲むと反映される。」と記載がありますが、タグは書かなくても反映されます。

多分ですが、Cocoonの場合はもともとテーマ内に「highlight.js」が実装されているので、タグが不要なんだと思います。Cocoon以外のテーマを使用している場合はタグが必要なのかもしれないです。

 

おまけ

実は筆者、当初ハイライトの背景がグレーのまま色が変わらず、ハイライトを反映させるまでにすごく苦労をしました。

おまけは「なんでハイライトが反映されなかったか」の考察なので、読まなくても大丈夫です笑

highlight.js はソースコードを表示するとき、キーワードなどを強調表示するためのJavaScriptライブラリです。

・JavaScript→プログラミング言語のひとつ。

・ライブラリ→汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの。

ハイライトしてくれるアプリ的なものと勝手に認識しています。

①プラグインと相性が悪い?

②functions.phpやstyle.cssのいじりすぎでおかしくなった?

③Cocoonでデフォルト実装されているはずのhighlight.jsがなぜか反応してない?

いろいろ調べた結果、③ではないかと思いまして、よそ様のサイトを参考にさせていただきまして、直接Wordpressのfunctions.php内にhighlight.jsのコードをぶち込んでみることにしました。

結果反映されたので良かったです。

参考にさせていただきました
軽量ソースコード ハイライター highlight.js を WordPressへ導入する方法。
highlight.jsは、シンプルで軽量なシンタックスハイライターです。ソースコードを見やすく装飾してくれるスクリプトです。 WordPressでは、一時期 Crayon Syntax Highlighterが人気でし
Cocoonでソースコードのハイライトが効かないときの対処法
WordPressテーマのCocoonでコードのハイライトが効かなかったので、その対処法をご紹介しています。
【ワードプレス】highlight.jsを用い自動でシンタックスハイライトを行う方法【プラグイン不要・AMP考慮】
目次1シンタックスハイライトとはなにか?1.1ウェブサイト上にシンタックスハイライトを実装した例1.1.1シンタックスハイライトなし1.1.2シンタックスハイライトあり1.2ウェブサイト上にシンタックスハイライトを実装する利点1.3ウェブサ
【Cocoon】記事内にソースコードを埋め込む方法【テンプレあり】
この記事では「Cocoon」の記事内にソースコードを埋め込む方法をまとめました。コピペして使えるテンプレも作ったので、ぜひ使ってくださいね。「HTML/CSS/Javascript」については、ブログ内でデモを見せるのに「CodePen」が便利なので、その使い方も解説します。
コードハイライトの適用範囲について
コードハイライトの設定が、コードブロック以外にも適用されてしまいます(今のところ、ハイライト表示と行番号表示)。 さすがに、整形済みと詩のブロックがハイライトするのは、個人的におかしいと思います(ソースコードではないので)。 そのため、Highlight.jsのCSS設定を「pre.wp-b...

 

Sponsored Links

 

まとめ

 

 

はい!Cocoonでソースコードをハイライト表示させる方法とハイライトしない時の対処法についてを解説させていただきました。

同じような悩みを抱える迷える仔羊たちの救いとなりますと幸いです。

 

本記事のまとめ
  • 黒背景にコードを表示させることをシンタックスハイライトと呼ぶ
  • Cocoon設定→コード→「ソースコードをハイライト表示」にチェックでOK
  • ブログへの挿入は、フォーマット→コード(ブロックエディター)
  • ハイライトが反映されない時は、functions.phpにコードを追加

 

ゾムビット
ゾムビット

コメント

トップへ戻る