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 → にテーマの名前を入れ
個別で強調させたいコードを5~7行目に指定しています。
ストライプ系のテーマ
ストライプ系は 全体的にシンプルなテーマになっています。
この Arduino Ide はグレーのグラデーションがきれいなテーマですね。
コードの色合いも落ち着いたオータム系の色でいい感じです。
Tumwall は似た感じですが、強調部分に少しオレンジが入り柔らかなイメージになります。
ストライプの設定
ストライプは設定項目で外すことができます。 Idle で見比べてみるとこんな感じです。
指定しない場合、かなりシンプルになりますね。
強調させるコード
このように 強調コードにオレンジが使われているテーマがいくつかあります。
この 1c Kod と 1c Zaprosは 記号部分が少し違いますが 同じじゃない?って感じですが、お好みで。
コードが太文字
コードの一部が 太文字 になっているテーマです。 Kaderuは 日本語の部分が イタリック書体になっています。
行番号のカラー
行番号のカラーは薄い色のテーマが多いですが こちらは行番号を強調させたテーマです。
この Son Of Obsidian もカッコいいのですが ストライプ・行の強調(マーク)を付けなければ番号部分だけが黒いテーマになります。
背景に少し色がついていますが 記号が白文字なので黒い背景の部分でしかコードを確認することができませんのでご注意を。
シンプル系のテーマ
シンプル系は 全体に薄い目の色で優しい感じのテーマになります。
Qtcreator と Vs2012 – マーカー部分がアクセントの シンプルなデザインのテーマ
Raygun パステル調の 優しいイメージのテーマです。
こちらは 囲み枠なしのテーマ Iris Vfx と Familiar です。
白色のページでは ぼやけてしまいそうですが 背景色を付けているページでは こんな囲み枠の無いテーマもいいですね。
ダーク & カッコイイ系
黒などの 背景色の濃い色目のテーマは多数!! どれもカッコよくって 甲乙付け難いです!
Dark Terminalは 文字が白一色でモノトーンでカッコいいです!
Vs2012 Black のブルーのラインがカッコいいですが
強調部分の指定無しの場合でも シンプルな感じでオシャレな感じです!
コードの色がカッコいい!
個人的に この2つのテーマ Obsidian と Solarized Dark の色合い!めちゃくちゃ好きです!
ストライプ系
ダーク系でも ストライプのテーマがあります。どれもオータム系の落ち着いた文字色でどれもいいですね。
Tomorrow night でストライプあり・なし を比べてみました! どちらがお好みですか?
この Coda Special Board と Twilight も行番号の感じなど、全体的なイメージはよく似ています。
ヴィヴィット系!!
809finest – ダークブルーと赤のコントラストのテーマ
Cisco Router - 蛍光色の緑 一色のマトリックス系!
Capacitacionti – セルリアンブルーの背景色がキレイですね。
目がチカチカしそうですが… カッコいいです!
イタリック書体のテーマ
コードを説明する部分、/* */ で表示される日本語の書体が イタリック書体のテーマです。
番号とずれてしまうテーマ
イタリック書体のテーマは基本的に番号とずれてしまうものが多いようです。
ズレが気にならない、又は 番号の非表示などで対応して使用できます。
おまけ
この Mm Dark Blueは色合いも凄くカッコいいのですが タイトルバーが半分隠れてしまっています。
ツールバーを非表示にすることで対応できます。
おわりに
テーマにもよりますが プログラミング言語の指定によってコードの色が変わります。
また、カスタマイズによってオリジナルのカラーでテーマを作ることもできますので
いろいろ試してみてください!
変な位置で改行されてしまう!?
バージョンアップした ルクセリタスで Syntax-Highlighterで
1行で表示されるはずのコードが勝手に改行されてしまっていました!!
確認できているのは luxeritas-3.20.0.1 以降で
原因は スペースを空けた表示のコードが 改行と認識されてしまうコードが指定されているようです。
改善方法は CSSカスタマイズに次のコードを追加することで 正常に表示することができます。
1 2 3 4 5 6 7 8 9 10 11 |
/*Crayonの改行調整*/ .crayon-syntax .crayon-pre, .crayon-syntax pre{ white-space:normal; } /*urvanovの改行調整*/ .urvanov-syntax-highlighter-syntax .crayon-pre, .urvanov-syntax-highlighter-syntax pre{ white-space:normal; } |
Syntax-Highlighterの関連記事はこちらです↓
設定と使いかた
Crayon-Syntax-Highlighterの設定のしかた|ルクセリタス
Crayon / Urvanov-Syntax-Highlighter 投稿画面での使いかた|ルクセリタス
エディタのカスタマイズ
エディタの複製と編集機能でテーマをカスタマイズしてみる【 Crayon-Syntax-Highlighter 】