Crayon Syntax Highlighterの設定と使い方:記事中にソースコードを表示

Crayon Syntax Highlighterの設定と使い方

Crayon Syntax Highlighterは、記事中にソースコードを表示させるためのプラグインです。

ソースコード「HTML」「CSS」「PHP」の解説をしたい時に使うと便利です。

プラグインのインストール

公式サイトは既に更新が止まっているため、Githubからファイルをダウンロードします。

「crayon-syntax-highlighter-2.8.6」をダウンロード

「crayon-syntax-highlighter-2.8.6」をダウンロード

ダウンロードしたzipファイルをアップロードしてプラグインに追加します。

zipファイルをアップロードしてプラグインを追加

zipファイルをアップロードしてプラグインを追加

管理画面から検索してプラグインを追加すると、PHP7.3.1以降でエラーが起きるので、プラグインは必ずGithubからダウンロードしたzipファイルで追加して下さい。

WordPressのプラグイン追加

WordPressにプラグインを追加する

2015.03.04

設定と使い方

設定の変更は、管理画面の設定「Crayon」から行って下さい。

設定項目が多すぎて複雑に見えるかもしれませんが、初期設定でも問題なく動作するので、分からない方は変更しないで下さい(僕は3か所変更しています)。

基本設定

「Crayon Syntax Highlighter」の基本設定

「Crayon Syntax Highlighter」の基本設定

Theme テーマ(デザイン)
Font フォントの種類・サイズ・行の高さ
Metrics 全体の横幅・高さと余白
Toolbar ツールバーの表示
Lines 行の詳細
Code コードの詳細
Tags タグの詳細
Languages プログラム言語
Files 読み込みファイルのパス指定
Posts Crayonを使用している記事を表示
Tag Editor 編集画面のタグエディターの設定
Misc その他の設定
Debug エラーの記録と表示

Toolbarの「Display the Toolbar」を「Always」にすると、常にツールバーが表示されます(マウスを載せた時にコードが表示されているブロックが上下するのを防ぐことができる)。

「Toolbar」の設定

「Toolbar」の設定

Linesの「Wrap lines by default」にチェックを入れると、行の折り返しが有効になります(横スクロールバーが表示されるのを防いでくれる)。

「Lines」の設定

「Lines」の設定

Miscの「Attempt to load Crayon’s CSS and JavaScript only when needed」にチェックを入れると、必要な時だけCrayonのCSSとJavaScriptが読み込まれます(ページの表示速度スコアが改善される)。

「Misc」の設定

「Misc」の設定

フォントや余白の設定は、テーマに依存する部分が大きいので、プレビューを確認しながら各自で調整して下さい(分からない方は初期設定推奨)。

使い方

コードを「preタグ」で囲むだけで機能します。

また、記事編集画面の「Crayon(<>)」タグから詳細情報を入力して挿入することも可能です(ブロックエディターの場合は「クラシック」から追加できる)。

追加された「Crayon」タグから追加

追加された「Crayon」タグから追加

Title ツールバーに表示させるタイトル
Inline 行数表示を消してコードを一列で表示
Don’t Highlight 全て黒文字で表示
Language ツールバーに言語を表示
Line Range 入力した数字の行のみ表示
Marked Lines 入力した数字の行をハイライト表示
URL リンク先のソースコードを全文表示

個人手には、「preタグ」で囲むだけで十分だと思います。

最後に

一部の特殊文字は、文字実体参照に置き換えなければ表示できません。

また、WordPressでは一部の特殊文字「“(引用符)」等をコピーした際に自動で全角変換されてしまうので(関数リファレンス/wptexturizeで要確認)、記事内でソースコードを表示させたい&ユーザーがコピペで使える様にしたい時には必須のプラグインだと思います。

スポンサーリンク
スポンサーリンク