ソースコード
ソースコード

軽量なシンタックスハイライタープラグイン「APH Prism Syntax Highlighter」

軽量なシンタックスハイライタープラグイン APH Prism Syntax Highlighter のご紹介です。

シンタックスハイライターとは何かというと、ソースコードをWebサイトに掲載する際、ソースコードを読みやすくしたりするJavaScriptライブラリになります。例として下の様なものになります。

<?php bloginfo('name'); ?>

色分けなどもしてくれて、ソースコードが見やすくなったと思います。

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] で使用できる言語一覧が出ますので、必要なものにチェックをいれてください。

Choose languages

Default Language

デフォルトの言語を設定します。よく使う言語を設定しておくと便利です。

Default Language

Theme

シンタックスハイライターのテーマを設定します。自分は”Okaidia”が好みですが、自由に設定していただければ大丈夫です。

theme

Options

オプション設定です。自分は”Show line numbers”にチェックをしています。

Options

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で良いでしょう。

Starting Line Number

Max Height

シンタックスハイライターの最大高さを指定します。

Max Height

Additional CSS

追加のCSSを設定します。通常はNoで大丈夫です。

Additional CSS

Add global class

各コードブロックコンテナにクラスを追加します。通常使うには特に指定していません。

Add global class

APH Prism Syntax Highlighter の使用方法

APH Prism Syntax Highlighter の使用法は簡単です。プラグインを有効化していると、記事編集画面に下図のような▲マークがあります。

PRISMアイコン

▲マークをクリックすると、下図の様なウインドウが開きます。

入力画面

  • Languageで使用する言語を選択
  • Code… の部分にソースコードを入力
  • Highlight Lineに行番号をいれるとその行が強調表示

必要事項を入力後、右下の ”Insert Code” でソースコードを入力できます。

以上のように、この APH Prism Syntax Highlighter を使うと簡単にソースコードをハイライト表示ができます。多くの機能は無いですが、シンプルにソースコードをハイライト表示させるには、軽量で良いプラグインかと思います。


JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利!