WordPressにソースコードを表示させるプラグインHighlighting Code Block

Highlighting Code Block

WordPressのプラグインHighlighting Code Blockを使うとソースコードをそのまま貼りつけ、表示することができます。
※ブロックエディターと旧エディターの両方に対応していますが、推奨しているのはブロックエディター。PHPバージョン5.6以降、WordPress 5.0以降でのみ動作。

Highlighting Code Blockのインストール

WordPressの管理画面サイドメニューより「プラグイン」の「新規追加」を選択。プラグインの検索で「Highlighting Code Block」を検索し「今すぐインストール」>「有効化」にします。

Highlighting Code Blockの使い方

1. 設定

WordPressの管理画面サイドメニューより「設定」>「[HCB]設定」を選択。

基本設定

言語、行数、コピーボタンなどの表示・非表示設定。フォントやフォントサイズの変更。デザイン「Light」「Dark」の変更などができます。

使用できる言語
HTML
CSS
SCSS
JavaScript
TypeScript
PHP
Ruby
Python
Swift
C
C#
C++
Objective-C
SQL
JSON
Bash
Git

高度な設定

使用する言語のセット、独自のCSSファイル、prism.jsファイルを指定することができます。

2. 使い方

※ブロックエディターの利用方法になります。

(1) 投稿画面のブロック追加より「Highlighting Code Block」を選択します。

Highlighting Code Block

Highlighting Code Blockが表示されます。※デザインはDarkに設定してあります。

Highlighting Code Block

(2) コードを貼り付けます

設定することでカスタマイズもできます。

-Lang Select –使用言語の設定
ファイル名ファイル名の指定
data-line属性値ハイライト行数の指定。
例1,3,6 または4-8
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>テストHTML</title>
</head>
<body>
</body>
</html>

こんな感じになります。ご参考ください。

関連記事