WordPressの新ブロックエディタ・旧クラシックエディタの両方に対応しているシンタックスハイライトプラグイン、「Highlighting Code Block」の使い方を紹介します。

クリックだけでコードブロックを簡単に挿入でき、選択した言語に合わせてシンタックスハイライトしてくれます。

カラーリングは現在「Light」と「Dark」の2種類。

画像

カラーリングの例

このような格好いい表示のコードブロックがめちゃくちゃ簡単に使用できます!

シンタックスハイライトの機能自体は「prism.js」を使っています。(より良いカラーリングができるように少しだけ追加処理を加えています。)

また、使用できる言語も幅広く、以下の言語が標準でサポートされています。

  • HTML
  • CSS
  • SCSS
  • JavaScript
  • TypeScript
  • PHP
  • Ruby
  • Python
  • Swift
  • C
  • C#
  • C++
  • Objective-C
  • SQL
  • JSON
  • Bash
  • Git

この他の言語も、設定によって使用可能です。

目次

インストール方法

現在、公式プラグインリポジトリへの登録申請中ですので、インストールは以下のzipファイルをダウンロードしてお使いください。

無事、申請が通りました。

wordpress.orgに掲載されています!

WordPress.org:Highlighting Code Block(リンクで飛べます)

プラグインの新規追加画面から、「Highlighting Code Block」で検索しても出てきます!

 

プラグイン検索画面

こんな見た目のやつです

シンタックスハイライト機能付きコードブロックの挿入方法

プラグインが有効化できたら、ブロックエディタ・クラシックエディタの両方で シンタックスハイライト機能付きのコードブロックが簡単に挿入できるようになっています。

ブロックエディタでコードブロックを使用する

WordPress5からの新エディタ、ブロックエディタでの使用方法です。

エディタ内で「ブロックの追加ボタン」をクリックし、「一般ブロック」・「フォーマット」・「レイアウト要素」などのカテゴリの中から「フォーマット」を選択してください。

すると、以下のように「Highlighting Code Block」というブロックが選択できるようになっています。

Highlighting Code Blockの選択

この「Highlighting Code Block」をクリックすると、次のような「コード入力エリア」・「言語選択ボックス」・「ラインハイライト指定エリア」がセットとなったブロックが追加されます。

Highlighting Code Block 初期状態

Highlighting Code Block初期状態

左下の「言語選択ボックス」からお好きな言語を選択してください。

言語選択の様子

言語選択の様子

例として「HTML」を選択し、簡単なコードを書いてみます。

h1タグにHello, World!を記述

h1タグにHello, World!を記述

投稿を一度保存し、記事の表示をみてみましょう。

以下のように、コードが綺麗に表示されています。

記事の表示の確認

カラーリング設定が「Light」の場合の表示

ラインハイライトの使用方法

ブロックエディタでは、ラインハイライト機能も簡単に使用できます。

例えば、先ほどのHTMLコードの2行目をハイライト表示させたい場合、以下のようにコードブロックの右下の入力エリアに「2」を入力します。

ハイライトする行番号の指定

ハイライトする行番号を指定

すると、以下のように、2行目のコードがハイライト表示されます!

画像

カラーリングが「Light」の場合の見た目

画像

カラーリングが「Dark」の場合の見た目

複数行のハイライト表示ももちろん可能です。

ラインハイライトの指定方法は Line highlight : How to use のページを参考にしてください。

クラシックエディタでコードブロックを使用する

エディタ上部のツールバーに「コードブロック」と表示されたセレクトボックスが追加されているかと思います。
(2段目が隠れている場合は「ツールバーの切り替えボタン」にて表示させてください。)

ツールバーにセレクトボックスが追加されているツールバーにセレクトボックスが追加されている

このセレクトボックスで、お好きな言語を選択できます。

画像

言語選択画面

試しに「HTML」を選択してみると、以下のようにコードブロックが挿入されます。

画像

コードブロック挿入後の画面

/* Your code... */の部分を削除してコードを記述してください。

 

すでにコードをエディタに書いておき、それらを選択した状態でコードブロックを選択することも可能です。

画像

コードブロック化させたいエリアを選択

選択した状態でセレクトボックスから言語を選択すると、以下のようにコードブロックで選択範囲がラッピングされます。

画像

選択した範囲がコードブロックに!

ラインハイライトの使用方法

クラシックエディタでラインハイライトを指定する場合は、テキストエディタにて、preタグに直接 data-line属性を追記してください。

data-line属性の指定方法は Line highlight : How to use のページを参考にしてください。

コードブロックから抜け出す方法

コードブロック内で通常のエンターキーで改行を重ねてもコードブロックからは抜け出せません。

カーソルキーの「→」または「↓」で抜け出してください。(もしくは「Shiftキーを押しながらの改行」でも可)

コピペに関する注意

クラシックエディタでコードブロック内にコードをコピペする場合、

普通のCtrl + Vのペーストではなく、Shift + Ctrl + Vのペーストを使ってください。

もしくは、右クリックで「ペーストしてスタイルを合わせる」を選択してペーストしてください。

また、複数行に渡るコードをコピペする時、空白行がテキストに含まれているとうまくコードブロック内にペーストされません。

OK(h1タグとpタグの間の行が空いていない)

<h1>
    Hello, World
</h1>

<p>hoge</p>

NG(h1タグとpタグの間の行が空いている)

<h1>
    Hello, World
</h1>

<p>hoge</p>

長いコードを挿入したい場合は、「テキストエディタ」に切り替え、pre > codeタグの中へペーストしてください。

ラインハイライトも使用可能

特定の行数をハイライト表示する機能もサポートしています。

コードブロック

画像

 

画像 画像

各種設定について

このプラグインでの各種設定について簡単に説明しておきます。

「Highlighting Code Block」に関する設定は、「設定」項目内の「CODE BLOCK」項目から可能です。

「CODE BLOCK」項目

「設定」 ->  「CODE BLOCK」

基本設定

基本的な機能として、以下のような設定ができます。

  • コードブロックに言語名を表示するかどうか(デフォルト:表示する)
  • コードの行数を表示するかどうか(デフォルト:表示する)
  • フォントスムージングのオン・オフ(デフォルト:オフ)
  • サイト表示側のコードカラーリング(デフォルト:Light)
  • エディタでのコードカラーリング(デフォルト:Light)
  • コードのフォントサイズ(PC)(デフォルト:14px)
  • コードのフォントサイズ(SP)(デフォルト:13px)
  • ブロックエディタの最大幅の指定(デフォルト:指定なし)

「基本設定」画面のスクリーンショット

設定画面のスクリーンショット

高度な設定

次に、「基本設定」の下にある「高度な設定」に関する説明をしていきます。

「高度な設定」画面のスクリーンショット

設定画面のスクリーンショット

使用する言語を減らしたい場合

「使用する言語設定」項目の内容を編集し、不要な言語の行を削除してください。

例えば、以下のような設定にした場合、

言語を少なく

「使用する言語設定」

コードブロックでの言語選択セレクトボックスで表示される言語が上記の設定に合わせて減少します。

言語セレクト

コードブロックでの言語選択画面

使用する言語を増やしたい場合

標準でサポートされている言語以外も使用することもできます。

「使用する言語設定」項目にて、prismでのクラス名:"言語の表示名"という形式で言語を追加できます。

複数言語を追加する場合は、必ず,区切りで言語設定は増やしてください。

「prismでのクラス名」は Prism:Supported languages のページで確認してください。

例:PerlとGoも選択できるようにする

html:"HTML",
css:"CSS",
.
.
.
perl:"Perl",
go:"Go",

こうすることで、セレクトボックスの言語リストに項目が追加されます。

ただ、これだけではまだシンタックスハイライトは有効になっていません。

読み込むprism.jsファイル(シンタックスハイライトを実行するスクリプト)も変更する必要があります。

デフォルトで読み込んでいるprism.jsファイルはこちらのページでダウンロードできるJSファイルです。

  1. 上記ページから 追加したい言語にチェックを入れ、ページ下部でJSファイルをダウンロードしてください。
  2. ダウンロードしたファイル(prism.js)をテーマファイル内にアップロードします。
  3. 「高度な設定」->「独自prism.js」項目でアップロードしたファイルまでのパスを入力し、設定を保存します。

ここまで設定することで、自分専用の言語セットのprism.jsファイルが使用できるようになります!

 

アップデートによる追加機能

機能が追加されていけばここに更新して行こうと思います。

個別のコードブロックごとに「行数表示」の設定が可能になりました

初回ベータ版では、全ブロック共通の設定しかできませんでしたが、コードブロックごとに行数の表示をするかどうかを設定できるようになりました。

コードブロック個別設定

これにより、「1行のコードを記述するときは行数を表示したくない」など、の細かな設定が可能になります。

コードブロックに「ファイル名の表示」が可能になりました

コードブロックに「ファイル名」を設定するテキストエリアを追加しています。 コードブロック内のファイル名入力位置

コードブロック内のファイル名入力位置

実際の表示は以下のようになります。

コードブロックにファイル名が表示されます

実際の表示(カラーリング:ダークの場合)

クラシックエディターでファイル名を表示させたい時は、data-file="ファイル名" をpreタグに追記してください。

コードのフォントファミリーが自由に設定できるようになりました

コードのフォントファミリーを自由に設定できるようにしてほしいとの要望を受け、設定画面にてフォントファミリーを設定できるようにしました。

フォントの設定位置

フォントの設定位置

WEMO
- Thank you for reading. -
エックサーバー 当サイトはエックスサーバーで運営しています。
mixhost 速度重視ならMixHostがオススメ!

コメント

  • Leaffab.com より:

    Amazing thanks

  • ガナリヤ より:

    こちらのプラグインを使用させていただいているものです。

    ソースコードを挿入するとハイライトされないようです。
    CSS指定はHTMLを見るとされているのですが、ハイライトだけがされていません。
    原因はありますでしょうか。

    • より:

      ご利用ありがとうございます!
      問題の現象を確認できるページのURLを教えていただくことはできますでしょうか?
      よろしくお願いいたします。

  • mocha より:

    使用させていただいています。
    簡単でかっこいいです、ありがとうございます!

コメントする