軽量なシンタックスハイライタープラグイン APH Prism Syntax Highlighter のご紹介です。
シンタックスハイライターとは何かというと、ソースコードをWebサイトに掲載する際、ソースコードを読みやすくしたりするJavaScriptライブラリになります。例として下の様なものになります。
色分けなどもしてくれて、ソースコードが見やすくなったと思います。
APH Prism Syntax Highlighter のインストール
まず、APH Prism Syntax Highlighter をインストールします。管理画面左メニューの [プラグイン] → [新規追加]で「プラグインを追加」画面を開き、APH Prism Syntax Highlighterでプラグインを検索してください。すぐに見つかると思います。
”今すぐインストール”でインストールをして、プラグインの有効化をしてください。
APH Prism Syntax Highlighter の設定
次にAPH Prism Syntax Highlighter の設定をします。WordPress管理画面左メニューの[設定] → [Prism Highlighter] を開いてください。設定画面が開きます。
Choose languages
使用する言語を選択します。[add languages] で使用できる言語一覧が出ますので、必要なものにチェックをいれてください。
Default Language
デフォルトの言語を設定します。よく使う言語を設定しておくと便利です。
Theme
シンタックスハイライターのテーマを設定します。自分は”Okaidia”が好みですが、自由に設定していただければ大丈夫です。
Options
オプション設定です。自分は”Show line numbers”にチェックをしています。
| Show line numbers | 行番号を表示 |
| Make all url links in the code clickable | コード内の全てのURLリンクをクリック可能にする |
| Show language title to each code block container | 各コードブロックコンテナに言語タイトルを表示する |
| Show hidden character. Show tabs and line breaks with symbol | 隠された文字を表示する |
Starting Line Number
シンタックスハイライターの行番号の最初の番号を設定します。通常1で良いでしょう。
Max Height
シンタックスハイライターの最大高さを指定します。
Additional CSS
追加のCSSを設定します。通常はNoで大丈夫です。
Add global class
各コードブロックコンテナにクラスを追加します。通常使うには特に指定していません。
APH Prism Syntax Highlighter の使用方法
APH Prism Syntax Highlighter の使用法は簡単です。プラグインを有効化していると、記事編集画面に下図のような▲マークがあります。
▲マークをクリックすると、下図の様なウインドウが開きます。
- Languageで使用する言語を選択
- Code… の部分にソースコードを入力
- Highlight Lineに行番号をいれるとその行が強調表示
必要事項を入力後、右下の ”Insert Code” でソースコードを入力できます。
以上のように、この APH Prism Syntax Highlighterを使うと簡単にソースコードをハイライト表示ができます。多くの機能は無いですが、シンプルにソースコードをハイライト表示させるには、軽量で良いプラグインかと思います。