WordPressでコード表示｜Crayonの生まれ変わり！【Urvanov-Syntax-Highlighter】

サイトページに プログラミングのコードを分かりやすく表示させるツールとして
“Syntax-Highlighter (シンタックスハイライター )"を利用します。

Syntax-Highlighterは コードが色分けされ 画面上で分かりやすく表示することができるのと
コピー機能などもありますので ユーザーにとっても便利なツールになります。

以前使用していた " Crayon-Syntax-Highlighter “から少しリニューアルされ誕生したのが
" Urvanov-Syntax-Highlighter " このプラグインの使いかたとテーマについて。

Syntax-Highlighter

Syntax-Highlighterは WordPressのプラグインを使って簡単に表示させることができます。

Crayon-Syntax-Highlighter

以前、Crayon-Syntax-Highlighter の使い方などをいくつか記事にまとめましたが
現在、このプラグインは6年前から更新されていません。

そのため、WordPressや phpのバージョンアップになった場合に対応できなくなっていて
Webページ全体が開けなくなる！といったエラーが起こったりしましたが
GitHub の Crunhify によってサポートされ リリースされたファイルをアップロードすることで改善され
以前のように使用することができます。

GitHub-Crunchify – crayon-syntax-highlighterとPHP7.3の修正

この Crayon-Syntax-Highlighter を継続して使用してもいいのですが 新たに
Urvanov-Syntax-Highlighter といったプラグインが誕生しました！

Urvanov-Syntax-Highlighter

今回の Syntax-Highlighter でも Crayonの作者が制作にあたっているので 機能や使いかたは ほぼ同じ。
設定画面でも Crayon-Syntax-Highlighter と表示されています。

基本のテーマと使いかた

① プラグインをインストールしたら設定画面を開きテーマを選択します。

② 設定の詳細については Crayon-Syntax-Highlighter  の記事を参考にお願いします。
Crayon-Syntax-Highlighter でサイトにCSSコードを分かりやすく表示 【プラグイン】

③ あとは投稿ページで コードタブをクリックし、コードを記述します。

個別に変更したい箇所があればこの入力画面から指定することができます。

デザイン別 おすすめテーマ

テーマが多すぎるので自分のサイトのイメージに合うモノを探すのも大変ですよね！！

すべては紹介できませんが 参考になればと思いますので 個人的に気に入ったテーマを
いくつかピックアップしてご紹介していきます。

テーマは実際の CSSコードを表示させたイメージ画像をご紹介させていただきます。

タイトル部分 Sample code theme → にテーマの名前を入れ
個別で強調させたいコードを５～７行目に指定しています。

ストライプ系のテーマ

ストライプ系は 全体的にシンプルなテーマになっています。

この Arduino Ide はグレーのグラデーションがきれいなテーマですね。
コードの色合いも落ち着いたオータム系の色でいい感じです。

Tumwall は似た感じですが、強調部分に少しオレンジが入り柔らかなイメージになります。

ストライプの設定

ストライプは設定項目で外すことができます。Idle で見比べてみるとこんな感じです。

指定しない場合、かなりシンプルになりますね。

強調させるコード

このように 強調コードにオレンジが使われているテーマがいくつかあります。

この 1c Kod と 1c Zaprosは 記号部分が少し違いますが 同じじゃない？って感じですが、お好みで。

コードが太文字

コードの一部が 太文字 になっているテーマです。Kaderuは 日本語の部分が イタリック書体になっています。

行番号のカラー

行番号のカラーは薄い色のテーマが多いですが こちらは行番号を強調させたテーマです。

この Son Of Obsidian もカッコいいのですが ストライプ・行の強調（マーク）を付けなければ番号部分だけが黒いテーマになります。

背景に少し色がついていますが 記号が白文字なので黒い背景の部分でしかコードを確認することができませんのでご注意を。

シンプル系のテーマ

シンプル系は 全体に薄い目の色で優しい感じのテーマになります。

Qtcreator と Vs2012 – マーカー部分がアクセントの シンプルなデザインのテーマ

Raygun パステル調の 優しいイメージのテーマです。

こちらは 囲み枠なしのテーマ Iris Vfx と Familiar です。
白色のページでは ぼやけてしまいそうですが 背景色を付けているページでは こんな囲み枠の無いテーマもいいですね。

ダーク & カッコイイ系

黒などの 背景色の濃い色目のテーマは多数！！ どれもカッコよくって 甲乙付け難いです！

Dark Terminalは 文字が白一色でモノトーンでカッコいいです！

Vs2012 Black のブルーのラインがカッコいいですが
強調部分の指定無しの場合でも シンプルな感じでオシャレな感じです！

コードの色がカッコいい！

個人的に この２つのテーマ Obsidian と Solarized Dark の色合い！めちゃくちゃ好きです！

ストライプ系

ダーク系でも ストライプのテーマがあります。どれもオータム系の落ち着いた文字色でどれもいいですね。

Tomorrow night でストライプあり・なし を比べてみました！ どちらがお好みですか？

この Coda Special Board と Twilight も行番号の感じなど、全体的なイメージはよく似ています。

ヴィヴィット系！！

809finest – ダークブルーと赤のコントラストのテーマ
Cisco Router　- 蛍光色の緑 一色のマトリックス系！
Capacitacionti – セルリアンブルーの背景色がキレイですね。

目がチカチカしそうですが… カッコいいです！

イタリック書体のテーマ

コードを説明する部分、/*　*/ で表示される日本語の書体が イタリック書体のテーマです。

番号とずれてしまうテーマ

イタリック書体のテーマは基本的に番号とずれてしまうものが多いようです。

ズレが気にならない、又は 番号の非表示などで対応して使用できます。

おまけ

この Mm Dark Blueは色合いも凄くカッコいいのですが タイトルバーが半分隠れてしまっています。
ツールバーを非表示にすることで対応できます。

おわりに

テーマにもよりますが プログラミング言語の指定によってコードの色が変わります。

また、カスタマイズによってオリジナルのカラーでテーマを作ることもできますので
いろいろ試してみてください！

変な位置で改行されてしまう！？

バージョンアップした ルクセリタスで Syntax-Highlighterで
１行で表示されるはずのコードが勝手に改行されてしまっていました！！

確認できているのは luxeritas-3.20.0.1 以降で
原因は スペースを空けた表示のコードが 改行と認識されてしまうコードが指定されているようです。

改善方法は CSSカスタマイズに次のコードを追加することで 正常に表示することができます。

 

---

また、Crayon-Syntax-Highlighter の記事ですが 設定やカスタマイズに役立ちます！
↓
設定と使いかた
Crayon-Syntax-Highlighter でサイトにCSSコードを分かりやすく表示 【プラグイン】

エディタのカスタマイズ
Crayon-Syntax-Highlighter のエディタ画面をカスタマイズ【ワードプレス｜プラグイン】