<>

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ページ全体が開けなくなる!といったエラーが起こったりしましたが
GitHubCrunhify によってサポートされ リリースされたファイルをアップロードすることで改善され
以前のように使用することができます。

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 → にテーマの名前を入れ
個別で強調させたいコードを5~7行目に指定しています。

ストライプ系のテーマ

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


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


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

ストライプの設定

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

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

強調させるコード

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

Sample code theme - 6- オレンジ色の強調マークのテーマ比較 - Tomorrow - 1c Kod - 1c Zapros
この 1c Kod と 1c Zaprosは 記号部分が少し違いますが 同じじゃない?って感じですが、お好みで。

コードが太文字

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

Sample code theme - Eclipse と Kaderu - 紫と紺色の太文字で表示されているコードのテーマ

行番号のカラー

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

Sample code theme - Ado- X3info - グリーンをアクセントにしたテーマ

Sample code theme - Son Of Obsidian- ストライプあり・なしの比較

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

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

シンプル系のテーマ

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

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


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

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

ダーク & カッコイイ系

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


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


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

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

個人的に この2つのテーマ ObsidianSolarized Dark の色合い!めちゃくちゃ好きです!
Sample code theme - ObsidianとSolarized Dark

ストライプ系

ダーク系でも ストライプのテーマがあります。どれもオータム系の落ち着いた文字色でどれもいいですね。
Sample code theme - Tomorrow night - ストライプあり・なしの比較
Tomorrow night ストライプあり・なし を比べてみました! どちらがお好みですか?

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

ヴィヴィット系!!

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

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

イタリック書体のテーマ

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

Sample code theme - ダーク系 イタリック書体のテーマ - Cg Cookie - Feeldesign - Monokai- Visual Assist

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

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

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

Sample code theme - コードがズレているテーマ(日本語イタリック書体) - Light Abite - GithubCoy - Orange Code

おまけ


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

おわりに

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

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

変な位置で改行されてしまう!?

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

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

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

 


また、Crayon-Syntax-Highlighter の記事ですが 設定やカスタマイズに役立ちます!

設定と使いかた
Crayon-Syntax-Highlighter でサイトにCSSコードを分かりやすく表示 【プラグイン】

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