ブログのつくり方

WordPressプラグインを使ってソースコードをきれいに表示する方法

投稿日:

ブログの記事で、ソースコードを紹介したい時があります。

そんな時にはプラグインを使うと、簡単にシンタックスハイライトされたきれいなソースコードをサイト上に表示することが可能です。

そこで、ここではプラグイン「Highlighting Code Block」を使って、WordPressのサイト上でソースコードを表示する方法を説明します。

 

WordPressでソースコードをきれいに表示する方法

それでは、以下に「Highlighting Code Block」プラグインを使って、WordPressのサイト上でソースコードをきれいに表示する方法を説明します。

 

「Highlighting Code Block」とは?

はじめに、「Highlighting Code Block」がどんなプラグインかを簡単に説明します。

「Highlighting Code Block」は、エディターで記述したソースコードをシンタックスハイライトできれいに表示できるプラグインです。

Highlighting Code Blockを使って表示したソースコード

エディターにコードブロックを追加してその中にソースコードを記述するだけと使い方も簡単なので、ソースコードを紹介したい時に便利です。

では、「Highlighting Code Block 」を使ってどうやってシンタックスハイライトされたソースコードを表示するかですが、そのために必要な作業の流れは以下のとおりです。

「Highlighting Code Block 」を使ってソースコードを表示するまでの流れ

  1. 「Highlighting Code Block 」をインストール・有効化する
  2. 必要に応じて設定をカスタマイズする
  3. 投稿の作成・編集画面でエディターにコードブロックを追加する

上記①~③で行う作業について、詳しくは以下の項目で解説します。

 

①「Highlighting Code Block 」のインストール・有効化

まず、①の「Highlighting Code Block 」をインストール・有効化する方法について説明します。

ここで行う作業は以下のとおりです。

「Highlighting Code Block 」のインストール・有効化手順

  1. WordPress管理画面「プラグインの追加」画面を表示
  2. 画面の右上にある検索ウィンドウに「Highlighting Code Block 」と入力
  3. 検索結果に表示された「Highlighting Code Block 」の「今すぐインストール」をクリック
  4. インストールが完了したら「有効化」をクリックする

以下に、上記①~④の流れを詳しく見ていきます。

まず、WordPress管理画面のメニューから「プラグイン」⇒「新規追加」をクリックして、「プラグインの追加」画面を表示します。

そうすると、以下のような画面になるので、右上にある検索ウィンドウに「Highlighting Code Block」と入力します。

そして、検索結果の左上に「Highlighting Code Block」が表示されたら、「今すぐインストール」をクリックしてください。

Highlighting Code Blockのインストール画面

インストールが終わったら、以下のように「有効化」というボタンが表示されるので、「有効化」をクリックし、ここまでの作業が終了です。

Highlighting Code Blockを有効化する時の画面

 

②設定をカスタマイズする

次に、②の設定をカスタマイズする方法について説明します。

「Highlighting Code Block」はインストールして有効化するだけで使うことができますが、必要に応じて設定をカスタマイズして使うことも可能です。

「Highlighting Code Block」の設定画面は、WordPress管理画面で「設定」⇒「Highlighting Code Block」をクリックして表示できます。

そして、設定画面から以下の項目を設定することが可能です。

 

基本設定

まず、「基本設定」では以下の設定をすることができます。

Highlighting Code Blockの基本設定画面

言語名の表示 コードブロックに言語名を表示する場合「コードブロックに言語名を表示する」にチェックを入れる
行数の表示 ボックスの左側に行数を表示する場合には「コードブロックに行数を表示する」にチェックを入れる
フォントスムージング フォントの輪郭をなめらかにする場合は「フォントスムージングをオンにする」にチェックを入れる
コードカラーリング(サイト表示) サイト上に表示するコードブロックの色を選択する
コードカラーリング(エディタ内) エディター内で表示するコードブロックの色を選択する
フォントサイズ(PC) コードのフォントサイズを指定する
font-family:コードのフォント コードのフォントを指定する
ブロックエディタのコンテンツ幅 ブロックエディターに追加するコードブロックのコンテンツ幅を指定する

 

高度な設定

次に、「高度な設定」では、以下の項目の設定が可能です。
Highlighting Code Blockの高度な設定画面

使用する言語設定 エディターで使用する言語を選択する
独自カラーリングファル 独自のCSSファイルを使用する場合には、アップロードしたファイル名を入力する
独自prism.js 独自のprism.jsファイルを読み込んで使用する場合には、アップロードしたファイル名を入力する

必要に応じて上記の設定を行い、最後に「変更を保存」をクリックしたら、ここまでの作業が完了です。

 

③エディターにコードブロックを追加する

次に、③のエディターにコードブロックを追加する方法について見ていきます。

「Highlighting Code Block」は、WordPress4系のクラシックエディターと5系のブロックエディターのどちらも対応しているので、それぞれのエディターに分けて手順を説明します。

 

クラシックエディターにコードブロックを追加する手順

はじめに、クラシックエディターを使う場合について説明します。

ここで行う作業は、以下のとおりです。

クラシックエディターにコードブロックを追加する方法

  1. 「新規投稿の追加」「投稿の編集」画面を表示する
  2. ソースコードを記述する部分にカーソルを当てる
  3. 「コードブロック」と書かれたプルダウンメニューから言語を選択する

次に、上記①~③について詳しく説明します。

まず、投稿の作成・編集画面で、エディターにソースコードを記述したい位置にカーソルを当てます。

そして、エディターのツールバーに表示されている「コードブロック」と書かれたプルダウンメニューをクリックしてください。

コードブロックの言語を選択するプルダウンメニュー

そうすると、以下のようにメニューが表示されるので、その中から言語を選択します。

プルダウンメニューに表示される言語

すると、コードブロックがエディターに追加されます。

Highlighting Code Blockでエディターに追加したコードブロック

「Your code… 」と書かれたところを削除して、ソースコードを記述することが可能です。

ここに記述したソースコードは、サイト上でシンタックスハイライトされて表示されます。

サイト上で表示されるコードブロック

 

ブロックエディターにコードブロックを追加する手順

次に、ブロックエディターを使う場合について説明します。

ここで行う作業は、以下のとおりです。

ブロックエディターにコードブロックを追加する方法

  1. 「新規投稿の追加」「投稿の編集」画面を表示する
  2. ソースコードを記述する場所で「ブロックを追加」をクリック
  3. 「フォーマット」の中にある「Highlighting Code Block」をクリック
  4. ④の作業でコードブロックが追加されたら、その中にコードを記述する
  5. 必要に応じて「Lang Select」を選択し、「ファイル名」「data-line属性の値」を入力する

次に、上記①~⑤の作業について詳しく説明します。

まず、投稿の作成・編集画面で、エディターのソースコードを記述する部分に「ブロックの追加」をクリックします。

そして、ウィンドウが表示されたら、少し下にスクロールして「フォーマット」を選択し、その中の「Highlighting Code Block」をクリックしてください。

ブロックエディターでHighlighting Code Blockを追加する時の画面

そうすると、以下のようにブロックが追加されます。

ブロックエディターに追加したコードブロック

「Your Code...」と書かれた部分にソースコードを記述することができます。

また、必要に応じて以下の部分を設定することも可能です。

Lang Select サイト上で言語名を表示する場合は、プルダウンメニューからその言語名を選択する
ファイル名 サイト上でファイル名を表示する場合は、ファイル名を入力する
data-line属性の値 行を強調して表示する場合は、その行の値を入力する

たとえば、「Lang Select」で「HTML」を選択して、「data-line属性の値」に「2」を入力した場合は、以下のように表示されます。
2行目が強調され右上に言語名が表示されたコードブロック

この場合は、右上に言語名が表示され、2行目が強調されて表示されます。

また、ファイル名に「style.css」を入力し、「data-line属性の値」に「2」を入力した場合は、サイト上で以下のように表示されます。

2行目が強調され、右上にファイル名が表示されたコードブロック

この場合は、同じように2行目が強調され、右上にファイル名が表示されます。

上のほうの画像は、設定画面でコードカラーリングを「Light」にした場合、下のほうの画像は「Dark」にした時の表示になります。

 

まとめ

以上、WordPressでソースコードをきれいに表示する方法について説明しました。

記事の中でソースコードを紹介する時には、「Highlighting Code Block」を使うと簡単にシンタックスハイライトされたコースコードをサイト上で表示することができて便利です。

「Highlighting Code Block」は、特に設定の必要なく、インストールして有効化したらすぐに使うことができますが、設定画面からコードブロックの色を変更することができたり、「言語名の表示」など不要な場合は非表示にしたりすることもできます。

設定も簡単ですし、投稿画面のエディターでコードブロックを追加するだけできれいなソースコードが表示できるので、記事でソースコードを紹介する時には使ってみることをおすすめします。

スポンサーリンク

  • この記事を書いた人

ミヤノ カナコ

ブログ運営歴5年目のブロガー・フリーランスライター。OL時代には、多くのカスタマーセンターやヘルプデスクでメール・電話での問い合わせ対応に従事。現在は、ブログでの情報提供のほか、エッセイの発信を中心に活動中。このブログでは、ブログのつくり方や文章の書き方など、ネットビジネスに役立つ情報をお届けします。

Copyright© ミヤノカナコ.com , 2019 All Rights Reserved.