プラグイン｜Crayon-Syntax-Highlighter のインストールとテーマの紹介

Webサイトの投稿記事内に HTML や CSSなどのソースコードを
分かりやすく表示させることができるのが Syntax-Highlighter エディタ画面です。

Highlighter とは蛍光ペンという意味でコードの種類ごとに
色分けされ強調されることでとても見やすい画面になることが特徴です。

その中でも Crayon-Syntax-Highlighter はカラフルでポップなものから
モノトーンのシックでカッコいいものまでたくさんのテーマがあり
サイトのイメージにあった画面を設定することができます。

Contents - 目次 -

Crayon-Syntax-Highlighter

Crayon-Syntax-Highlighterのテキスト画面のイメージはこんな感じです。

使い方はかんたんでプラグインをインストールするだけでかんたんに設定できます。

プラグインをインストールしていきますがこのインストール画面、
現在使用しているバージョンでは未検証と表示されます。

これは最終更新が４年前となっていることが原因のようです。

プラグインの更新が止まってしまっているため正常に作動するか検証されていないようですが
未検証となっていてもまだ問題なく使用することができました。

ですが2022年現在、phpのバージョンアップによって 重大なエラーが発生してしまい
通常のプラグイン画面からも正常にインストールすることができなくなりました。

重大なエラーが起こってしまった箇所を修正しサポートしてくれているのが
GitHub-Crunchify です。
GitHub-Crunchify – crayon-syntax-highlighterとPHP7.3の修正

このサイトから修正されたCrayon のプラグインをダウンロードし
プラグインの新規追加からアップロードさせることでインストールします。

設定方法についてはこちらを参考にお願いします。
phpの更新と Crayon 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

ここに挙げたテーマのデザインからさらに「行」のストライプ表示や
行番号の非表示などカスタマイズすることもできます。

Posted by 45