![ゾムビット](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/05/daba9f5d64042cd59cb5cfe267231ea2-1.png?w=1256&ssl=1)
ドーモ、僕(@zomubbit)です。ぞむぅ。
前回の記事はここからどうぞ☆
技術系ブロガーさん方がよくやられているこれ。
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/4a3cad9b88c597be3259432f0405251c.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/4a3cad9b88c597be3259432f0405251c.png?resize=1024%2C538&ssl=1)
黒い背景にソースコードが書かれているやーつ。
これ『シンタックスハイライト』と呼ぶそうです。
テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。シンタックスカラーリング・構文着色とも。
![ゾムビット](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/05/48d2d80e5281e42eb6a1b3f2e4bee9c8.png?w=1256&ssl=1)
![ゾムビット](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/05/48d2d80e5281e42eb6a1b3f2e4bee9c8.png?w=1256&ssl=1)
ゾムビットもこれやりたいー
と、思ったはいいですが、まずこの黒背景のこれをシンタックスハイライトと呼ぶことを突き止めるのに苦労しました。
「ブログ コード 貼り付け Cocoon」とかで検索してました笑
Cocoonユーザーならめちゃくちゃ簡単に反映できるので、ちゃちゃっと設定して技術系ブロガーになっちゃいましょう!
Cocoonハイライトの設定方法
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/3be7faa157023fc4a978c4037922c38a.jpg?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/3be7faa157023fc4a978c4037922c38a.jpg?resize=1024%2C538&ssl=1)
①ハイライト表示にチェックを入れる
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/bcb70c0bf7c007bd61122d8fd6c71599.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/bcb70c0bf7c007bd61122d8fd6c71599.png?resize=1024%2C538&ssl=1)
WordPressの編集画面で『Cocoon設定→コード』に行きます。
「ソースコードをハイライト表示」にチェックを入れて、「変更をまとめて保存」を押して終了です。
・行番号にチェックを入れると左に番号が出てくるので、お好みでチェックしてください。
・ハイライトスタイルからハイライトのカラーを変えられます(因みに筆者が選択しているのは『monokai』です)。
ハイライトカラーは下記のサイトから確認できます。
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/e7a4227d479d9668beffde14cbc32946.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/e7a4227d479d9668beffde14cbc32946.png?resize=1024%2C538&ssl=1)
ブログへの挿入方法
①フォーマット→コード
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/94c71160d3a80e75ecfbd23cd8fe068c-1.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/94c71160d3a80e75ecfbd23cd8fe068c-1.png?resize=1024%2C538&ssl=1)
②ソースコードを入力(コピペ)する
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/2a7684b4c2f374e6bd59f43641251077.png?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/2a7684b4c2f374e6bd59f43641251077.png?resize=1024%2C538&ssl=1)
これで「公開する」か「更新」をします。
③ハイライト反映
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/5eb3c2e92b864881af1b9860a714f691.jpg?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/5eb3c2e92b864881af1b9860a714f691.jpg?resize=1024%2C538&ssl=1)
以上です!
公式サイトで反映に「preタグ」が必要と記載がありますが、別に書かなくても反映されます。
因みに
上記のゾムビットのシンタックスハイライトは、以下のAA(アスキーアート)変換サイトで画像を変換したものをコピペして反映させました。
※画像編集で修正しているのでAAが綺麗に見えますが、実際は細長くていびつな表示になります。
ハイライトが反映されない時の対処法
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/5b9e46439b53e12743ae7c54440dfe73.jpg?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/5b9e46439b53e12743ae7c54440dfe73.jpg?resize=1024%2C538&ssl=1)
Cocoon設定で『ソースコードをハイライト表示』にチェックを入れているのに、ずっと背景がグレーのままでハイライトが反映されない、できない!って場合はぜひこれを試してみてください。
①バックアップを取る
②functions.phpにコードの追加
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/f79b97e0a2426fe968b0851bf10322dd.jpg?resize=1024%2C538&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/08/f79b97e0a2426fe968b0851bf10322dd.jpg?resize=1024%2C538&ssl=1)
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のコードをぶち込んでみることにしました。
結果反映されたので良かったです。
![](https://www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/b08bd100c90eb015a09226d621bd985c.jpg)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/b08bd100c90eb015a09226d621bd985c.jpg?resize=160%2C90&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/b08bd100c90eb015a09226d621bd985c.jpg?resize=160%2C90&ssl=1)
![](https://www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/7e6b4abbff38e128b16e5b8a9e4041be.jpg)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/7e6b4abbff38e128b16e5b8a9e4041be.jpg?resize=160%2C90&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/7e6b4abbff38e128b16e5b8a9e4041be.jpg?resize=160%2C90&ssl=1)
![](https://www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/75b272d5c162b0e3d6c69c9d1f35cb0f.jpg)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/75b272d5c162b0e3d6c69c9d1f35cb0f.jpg?resize=160%2C90&ssl=1)
![](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/cocoon-resources/blog-card-cache/75b272d5c162b0e3d6c69c9d1f35cb0f.jpg?resize=160%2C90&ssl=1)
まとめ
はい!Cocoonでソースコードをハイライト表示させる方法とハイライトしない時の対処法についてを解説させていただきました。
同じような悩みを抱える迷える仔羊たちの救いとなりますと幸いです。
![ゾムビット](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/05/daba9f5d64042cd59cb5cfe267231ea2-1.png?w=1256&ssl=1)
![ゾムビット](https://i0.wp.com/www.funnyhome.net/wp-content/uploads/2020/05/daba9f5d64042cd59cb5cfe267231ea2-1.png?w=1256&ssl=1)
チェック入れるだけかと思いきや、反映までに6時間もかかったぞ~
それでは今回はこの辺で。次もぜってぇ見てくれよな☆
コメント