SyntaxHighlighter

【ブロックエディタ】SyntaxHighlighter Evolvedで記事上にソースコードを表示する


SyntaxHighlighter Evolvedとは

記事上にソースコードを表示させるプラグインです。ブロックエディタにも対応していて、簡単にソースコードを記事上に表示できます。

Syntax Highlighter系のプラグインとして、Crayon Syntax Highlighterとともに有名です。7種類のテンプレートがあり、多くの言語に対応しています。

SyntaxHighlighter
SyntaxHighlighter

SyntaxHighlighter Evolvedのインストール

プラグインの新規追加で検索し、インストール、有効化まで済ませます。

  1. プラグイン新規追加よりSyntaxHighlighter Evolvedを検索
  2. インストールする
  3. 有効化する

新しいプラグインをインストールする前には、もしものためにバックアップしておきます。

SyntaxHighlighter Evolvedの設定

右側の項目設定より、「SyntaxHighlighter Evolved」を開きます。日本語ですのでわかりやすいと思います。

バージョンの選択

  • バージョン3
    ツールバーは表示されず、訪問者がマウスを利用してコピーする
    長い行の場合は横スクロールバーが表示される
  • バージョン2
    マウスオーバーでツールバーが表示される
    行の折り返しが可能である

テーマ

7つのテーマから選べます。次の画像の一番上がデフォルトです。

SyntaxHighlighter
SyntaxHighlighter
SyntaxHighlighter
SyntaxHighlighter

他3種類のテーマがあります。

すべてのブラシを読み込む

ショートコードではなく、<pre>タグを使う場合、ビジュアルエディターで使う場合はチェックを入れます。

規定の設定

以下の設定はブロックエディタでソースコードを入力する際に設定できますが、設定画面でデフォルト値として設定も可能です。

一般

  • 行番号を表示する
  • ツールバーを表示する
  • 自動リンクを有効にする
  • コードボックスの表示を閉
  • 軽い表示モードを使う
  • インデントタブを許容するスマートタブを使う
  • 長い行を折り返す(バージョン2のみ)横スクロールバーを無効にする

追加のCSSのclass名

classを指定できます。

行番号の開始と余白の指定

ソースコードの開始する番号や行番号の余白を指定します。

タブのサイズ

長さを指定します。

タイトル

コードボックスに表示されるタイトルを指定します。

プレビュー

上記の設定はプレビューで確認できます。

 SyntaxHighlighter でソースコードを表示する

SyntaxHighlighter ブロックエディタを使う

  1. ブロックの追加 ̟⊕ をクリック
  2. フォーマットよりSyntaxHighlighter を選択
  3. ソースコードを記述する
  4. エディタでの設定

SyntaxHighlighter エディタでの設定

  • 行番号の表示の有無
  • 最初の行の番号設定
  • ハイライト協調する行番号の入力
  • URLのクリック可能にするか否か
  • 高度な設定(追加CSS)
SyntaxHighlighter
ブロックからSyntaxHighlighterを選ぶ
SyntaxHighlighter
SyntaxHighlighter エディタでの設定

以上のようにブロックエディタを利用して簡単にソースコードを表示できます。

ショートコードを使う

投稿編集画面でテキストエディッタで表示してショートコードを記入します。

CSSのソースの場合[css][/css]
HTMLのソースの場合[html][/html]
PHPのソースの場合[php][/php]

SyntaxHighlighter
SyntaxHighlighter

ソースコードを表示するプラグイン

SyntaxHighlighter Evolved以外にもソースコードを表示するプラグインがあります。Crayon Syntax Highlighterです。Crayon Syntax Highlighterも、記事上にソースコードを綺麗に表示するプラグインで、Syntax Highlighter系のプラグインとして、SyntaxHighlighter Evolvedとともに有名です。

Crayon Syntax Highlighterの設定の仕方は以下に記載しています。

webNote
webNote
https://web.vogue.tokyo/crayon-syntax-highlighter
WordPress・Sports・ゲーム録

プラグインを利用せず、見やすい表示をする方法

ソースコードを見やすく表示するために、オンラインでHTMLとして出力する ツールがあります。


About ゆきを

ジャンルに拘らずに、好きなことを書いてます。 趣味であったり、覚書きであったりします。 むずかしい言葉を使わず、流行りの言葉を使わないように書いてます。