ロゴ

(更新日:

【コード】Highlighting Code Blockの使い方

PLUGIN WORDPRESS

プログラマー

シンタックスハイライト表示で、オシャレなコードを記事に貼り付けたいんだけど、Highlighting Code Blockの使い方がわからない。
ブログ初心者の僕でも分かるように教えてほしいなぁ。

こういった疑問にお答えします。

こんにちは YASUです。
 
使用しているテンプレートは「Minimal」です。

やっとシンタックスハイライト表示ができるオシャレなプラグイン見つけました。

Highlighting Code BlockはWordPressのプラグインを使って誰でも簡単に使うことができます。

プログラミングできなくても問題なし!

シンタックスハイライトはLightBlackの2種類から選択可能です。

完成図はこんな感じ↓

ライトと黒

画像を使って解説します。

【コード】Highlighting Code Blockの使い方

コンピューター

Highlighting Code Blockの使い方について解説します。

流れとしてはこんな感じです。

  1. WordPressからHighlighting Code Blockプラグインの【インストール】
  2. シンタックスハイライトを表示【実装】
  3. Highlighting Code Block【設定】
  4. クラシックエディターのコードの使い方

順番に解説します。

WordPressからHighlighting Code Blockプラグインの【インストール】

まずはHighlighting Code Blockプラグインのインストールをしましょう!

1, 管理画面の プラグイン新規追加 を選択。

プラグイン検索

2, キーワードに「Highlighting Code Block」を入力

Highlighting Code Blockを 今すぐインストール有効化

コードブロックインストール

これでインストール完了です。

さっそく実装に移りましょう!

シンタックスハイライトを表示【実装】

1, 記事作成画面の Highlighting Code Block をクリック

コードブロックをセット

2, クリックすると、「入力エリア」「言語選択ボックス」「ファイル名」「ラインハイライト指定エリア」が追加されます。

コードブロック

3, 言語選択ボックスを選択。

言語選択

4, 言語選択ボックスから好きな言語を選択。

言語ボックス

実際にコードを入力して実装してみるとこんな感じ。

HTMLコード

<h1>Sample code</h1>
<p>id="id"class="class"</p>
   test code
</p>

CSSコード

.example3 { color: #f00; }
.example4 { color: rgb(255,0,0); }
.example5 { color: rgb(100%,0%,0%); }

JavaScriptコード

<form><input type="button" value="クリック" onClick="message2()"></form>

<script type="text/javascript">
<!--
function message2() {
	alert("Hello World");
}
//-->
</script>

PHPコード

<?php
function cmyk2cmy ( $cmyk ) {
	$cmy = array_slice( $cmyk, 0, 3 ) ;
	$k = $cmyk[3] ;

	return array_map( function ( $value, $k ) {
		return $value * (1 - $k) + $k  ;
	}, $cmy, [ $k, $k, $k ] ) ;
}

cmyk2cmy( [ 0, 0.498, 0.749, 0 ] ) ;	// [0,0.498,0.749]

ラインハイライトの使い方

data-line属性値 のボックス内に、ハイライトさせたい行の値(数字)を入力

たとえば2行目にハイライトを入れたい場合はdata-line属性値に2を入力

ハイライト

2行目にハイライトされます。

<h1>Sample code</h1>
<p>id="id"class="class"</p>
   test code
</p>

コードブロックに言語名を表示する方法

コードブロックは下記の位置です。

コードブロックの位置

ファイル名 に好きな言語名を入力できます。

ファイル名 を入力すると下記のような感じ。

コードブロック入力

HCB設定(行数の表示あり・なし)

HCB設定は記事作成画面の右側にあります。

HCB設定


HCB設定では行数の表示あり・なし設定ができます。

行数あり

<h1>Sample code</h1>
<p>id="id"class="class"</p>
   test code
</p>

行数なし

<h1>Sample code</h1>
<p>id="id"class="class"</p>
   test code
</p>

Highlighting Code Block【設定】

Highlighting Code Blockの設定画面はWordPressの 設定CODE BLOCK

設定できる項目は下記です。

設定項目の種類

  1. 言語の表示
  2. 行数の表示設定
  3. フォントスムージング
  4. コードカラーリング(フロント側)
  5. コードカラーリング(エディター側)
  6. フォントサイズ(PC)
  7. フォントサイズ(SP)
  8. コードの “font-family”
  9. ブロックエディターの最大幅
  10. 独自カラーリングファイル
  11. 独自prism.js

コードカラーリング:Darkカラーに変更

フロント側をDarkカラーに変更。

<h1>Sample code</h1>
<p>id="id"class="class"</p>
   test code
</p>

エディター側をDarkカラーに変更。

※ 初期設定ではLightカラーになっています。

ビフォーアフター

その他、フォントサイズやフォントファミリーの変更もできるので、お好みのサイズに設定してみてください。

クラシックエディターのコードの使い方

古いパソコン

1, クラシックエディターの場合は ツールバーコードブロック のセレクトボックスが追加されます。

コードブロックの位置(クラシック)

2, コードブロックを選択すると、好きな言語を選択できます。

言語選択-クラシック

3, 後は枠内にコードを入力すれば完了。

【補足】
/* Your code… /を全選択→Deleteを押すと、コードブロックごと消えてしまいます。 コードを貼り付けたい場合は、/ Your code… */を消す前に、先にコードを貼り付けた後にDeleteキーで削除すると、綺麗に反映されます。

ということでhighlighting code blockの使い方については終わりです。

ぜひ実装してみてみましょう!

人気記事 【全公開】ブログの立ち上げ方法/サイト作成完全マニュアル【無料】

人気記事 【就職サポートあり】動画編集のおすすめオンラインスクール【5社】

                                                                   

Resources