<>

CSSコードをサイト画面で分かりやすく表示できるプラグイン|Crayon-Syntax-Highlighter

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

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

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

Crayon-Syntax-Highlighterの使いかた

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

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

Crayon投稿画面での使いかた-投稿エディタ画面

投稿編集エディタではこのコードのマーク<> をクリックすることで
コードの編集画面が開きますので必要合わせて記述、変更などを行います。

Crayon投稿画面での使いかた-コード入力画面

 テーマの一例

Crayon-Syntax-Highlighter はテーマがたくさんありますので
その一部だけですが 抜粋してデザインを見ていきます。

テーマは 実際のCSSコードを使って表示しています。
使うコードの種類によってカラーが設定されているため Crayon 設定画面でのサンプル画像と色合いが違っています。

シンプル系 ストライプ ありのテーマ  1c kod / Epicgeeks

ナンバー部分の強調されたテーマ Ado / Amity

パステル調の背景のテーマ Coy / Raygun

ダーク系  809finest / capacitacionti / Cg cookie / Dark-terminal

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

Crayon のインストール方法

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

プラグイン-crayon-Syntax-Highlighter の画像

プラグインからはインストールできない!?

プラグインの更新が止まってしまっているため正常に作動するか検証されていないようですが
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というのがリリースされています。

こちらでしたらほぼ同じようなイメージでテキストエディタを使用することができます!
WordPressでコード表示|Crayonの生まれ変わり!【Urvanov-Syntax-Highlighter】