【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をコピーしました