プラグイン|Crayon-Syntax-Highlighter のインストールとテーマの紹介
Webサイトの投稿記事内に HTML や CSSなどのソースコードを
分かりやすく表示させることができるのが Syntax-Highlighter エディタ画面です。
Highlighter とは 蛍光ペン という意味で コードの種類ごとに
色分けされ 強調されることで とても見やすい画面になることが特徴です。
その中でも Crayon-Syntax-Highlighter はカラフルでポップなものから
モノトーンのシックでカッコいいものまで たくさんのテーマ があり
サイトのイメージにあった画面を設定することができます。
Crayon-Syntax-Highlighter
Crayon-Syntax-Highlighterのテキスト画面のイメージはこんな感じです。
使い方はかんたんで プラグインをインストールするだけでかんたんに設定できます。
Crayon のインストールのしかたについて
プラグインをインストールしていきますが このインストール画面、
現在使用しているバージョンでは未検証と表示されます。
これは最終更新が4年前となっていることが原因のようです。
プラグインからはインストールできない!?
プラグインの更新が止まってしまっているため正常に作動するか検証されていないようですが
未検証となっていても まだ問題なく使用することができました。
ですが2022年 現在、phpのバージョンアップによって 重大なエラーが発生してしまい
通常のプラグイン画面からも正常にインストールすることができなくなりました。
GitHub-Crunchify からダウンロード
重大なエラーが起こってしまった箇所を修正し サポートしてくれているのが
GitHub-Crunchify です。
GitHub-Crunchify – crayon-syntax-highlighterとPHP7.3の修正
このサイトから 修正されたCrayon のプラグインをダウンロードし
プラグインの新規追加からアップロードさせることでインストールします。
設定方法についてはこちらを参考にお願いします。
phpの更新と Crayon Syntax Highlighter エラー表示の対処法
Urvanov-Syntax-Highlighter
Crayon-Syntax-Highlighter が更新されていない代わりと言いますか
新しいバージョンでUrvanov-Syntax-Highlighterというのがリリースされています。
こちらでしたらほぼ同じようなイメージでテキストエディタを使用することができます!
プログラミングコードをサイト上に表示する【Urvanov-Syntax-Highlighter】|ワードプレス
テーマの一例
Crayon-Syntax-Highlighter はテーマがたくさんありますので
その一部だけですが 抜粋してデザインを見ていきます。
テーマは 実際のCSSコードを使って表示しています。
使うコードの種類によってカラーが設定されているため Crayon 設定画面でのサンプル画像と色合いが違っています。
シンプル系 ストライプ ありのテーマ 1c kod / Epicgeeks
ナンバー部分の強調されたテーマ Ado / Amity
パステル調の背景のテーマ Coy / Raygun
ダーク系 809finest / capacitacionti / Cg cookie / Dark-terminal
ここに挙げたテーマのデザインから さらに「行」のストライプ表示や
行番号の非表示など カスタマイズすることもできます。
設定に関してはこちらです↓
Crayon-Syntax-Highlighterの設定のしかた|ルクセリタス