【WordPress】Highlight 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>

PHP/Javascript/WORDPRESS案件全般承ります

この記事についてのご質問またはお困りのことがございましたら、お気軽にお問い合わせください。

タイトルとURLをコピーしました