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

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

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

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

Contents - 目次 -

Crayon-Syntax-Highlighterの使いかた

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

設定方法についてはこちらを参考にお願いします。
phpの更新と Crayon Syntax Highlighter エラー表示の対処法

Crayon-Syntax-Highlighter が更新されていない代わりと言いますか
新しいバージョンでUrvanov-Syntax-Highlighterというのがリリースされています。

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

Posted by 45