Urvanov-Syntax-Highlighter デザイン別 テーマの紹介！｜ワードプレス プラグイン

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

ワードプレスのプラグインでかんたんに利用することができます。
中でも Crayon-Syntax-Highlighterは コードが色分けされ 画面上で分かりやすく表示することができるのと
コピー機能などもありますので ユーザーにとっても便利なツールになります。

私も以前はこれを使用していたのですが " Crayon-Syntax-Highlighter “から
少しリニューアルされ誕生したのが" Urvanov-Syntax-Highlighter " です。

今回はこの Urvanov-Syntax-Highlighterのテーマを中心にまとめていきます。

Syntax-Highlighter

( Crayon / Urvanov )-Syntax-Highlighterにはテーマ（デザイン）がいくつもあります。
こちらは一番（？）シンプルなデザインのテーマです。

WordPressのプラグインから ( Crayon / Urvanov )-Syntax-Highlighterをインストールし使用することができます。

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 と表示されています。

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

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

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

テーマは実際の 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カスタマイズに次のコードを追加することで 正常に表示することができます。

---

Syntax-Highlighterの関連記事はこちらです↓
設定と使いかた
Crayon-Syntax-Highlighterの設定のしかた｜ルクセリタス
Crayon / Urvanov-Syntax-Highlighter 投稿画面での使いかた｜ルクセリタス

エディタのカスタマイズ
エディタの複製と編集機能でテーマをカスタマイズしてみる【 Crayon-Syntax-Highlighter 】