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が表示されます。※デザインはDarkに設定してあります。
(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>こんな感じになります。ご参考ください。