記事上にソースコードを表示させるプラグインです。ブロックエディタにも対応していて、簡単にソースコードを記事上に表示できます。
Syntax Highlighter系のプラグインとして、Crayon Syntax Highlighterとともに有名です。7種類のテンプレートがあり、多くの言語に対応しています。
プラグインの新規追加で検索し、インストール、有効化まで済ませます。
新しいプラグインをインストールする前には、もしものためにバックアップしておきます。
右側の項目設定より、「SyntaxHighlighter Evolved」を開きます。日本語ですのでわかりやすいと思います。
7つのテーマから選べます。次の画像の一番上がデフォルトです。
他3種類のテーマがあります。
ショートコードではなく、<pre>タグを使う場合、ビジュアルエディターで使う場合はチェックを入れます。
以下の設定はブロックエディタでソースコードを入力する際に設定できますが、設定画面でデフォルト値として設定も可能です。
classを指定できます。
ソースコードの開始する番号や行番号の余白を指定します。
長さを指定します。
コードボックスに表示されるタイトルを指定します。
上記の設定はプレビューで確認できます。
以上のようにブロックエディタを利用して簡単にソースコードを表示できます。
投稿編集画面でテキストエディッタで表示してショートコードを記入します。
CSSのソースの場合 | [css][/css] |
HTMLのソースの場合 | [html][/html] |
PHPのソースの場合 | [php][/php] |
SyntaxHighlighter Evolved以外にもソースコードを表示するプラグインがあります。Crayon Syntax Highlighterです。Crayon Syntax Highlighterも、記事上にソースコードを綺麗に表示するプラグインで、Syntax Highlighter系のプラグインとして、SyntaxHighlighter Evolvedとともに有名です。
Crayon Syntax Highlighterの設定の仕方は以下に記載しています。
ソースコードを見やすく表示するために、オンラインでHTMLとして出力する ツールがあります。