説明

「Highlighting Code Block」は、シンタックスハイライトされるコードブロックをクリックだけで追加できるようにします。

ブロックエディター・旧エディターの両方に対応しています。
(ただし、推奨しているのはブロックエディターでの使用です。)

当プラグインの詳細な説明についてはこちらのページをご覧ください。(日本語の記事です)

使い方 (ブロックエディターの場合)

ブロックインサーターの「フォーマット」カテゴリーを開きます。
その中に「Highlighting Code Block」という名前のカスタムブロックがあります。
それを選択すると、ブロックが挿入されます。
コードの言語を選択し、任意のコードを入力してください。

使い方 (旧エディターの場合)

クラシックエディタでは、ツールバー (デフォルトでは2段目) に「コードブロック」と書かれたセレクトボックスが出現しているはずです。
そのセレクトボックスから言語を選択すると、コードブロック (pre タグ) が挿入されます。

動作しない場合

このプラグインは、PHPバージョン5.6以降、WordPressバージョン5.6以降でのみ動作します。
お使いのPHPのバージョンやWordPressのバージョンをご確認ください。

設定について

管理画面の左メニューにある「設定」の中に、「[HCB] 設定」というメニューが追加されているはずです。
このプラグインに関する設定は、このメニュー内で行います。

スクリーンショット

コードカラーリング
Select 「Highlighing Code Block」
Select lang (Guternberg
Writing your code (Guternberg)
Added select box (Tinymce)
Select lang (Tinymce)
Writing your code (Tinymce)
例: ライトカラー
例: ダークカラー
基本設定
高度な設定

ブロック

このプラグインは1個のブロックを提供します。

Highlighing Code Block

インストール

このプラグインは、あなたのサイトから直接インストールできます。

ログインして「プラグイン」「新規追加」に移動します。
「Highlighting Code Block」を検索欄に入力し、Enter キーを押します。
検索結果のリストでプラグインを見つけ、「今すぐインストール」をクリックします。
インストールしたら、「有効化」ボタンをクリックします。

FAQ

使用可能な言語について

デフォルトでは以下の言語が使用可能です。

HTML
CSS
SCSS
JavaScript
TypeScript
PHP
Ruby
Python
Swift
C
C#
C++
Objective-C
SQL
JSON
Bash
Git

評価

Sagehen Studio 2023年7月25日

I don't normally use WP Blocks and so I could not figure out why this plugin broke for certain code syntax (PHP -> HTML -> PHP for example) and why saving sometimes broke the previously-saved syntax. Maddening. Then I switched back to the block editor. AHA! It works beautifully. That's probably why it says "Block" in the plugin name, duh. Thank you very much for this wonderful plugin. I love that we can also upload our own prism.js files. Cool.

Muhammad Zohaib 2023年3月3日

Exactly what I was looking for. thanks alot!

Shihab Ul Haque 2022年11月26日 7 replies

The plugin developer and the plugin itself are very good. Wish them all the best. Being a developer takes a huge time, effort, money & sacrifice. If you're a user of this plugin like me, do not just leave your negative feedback unless you talked to the support. Also, if you were a backbencher like me and if you're still a backdated who uses an older version of PHP (just like me), please feel free to use this plugin with peace of mind. Enjoy!

Ibrahim Sharif 2022年11月8日

Thanks for the amazing work. Please work on the Performance like Asset Size and try to merge them into a single JS and CSS.

namelyjt 2022年10月9日 1 reply

I found it difficult to configure and support is non-existent.

flinnn 2021年11月1日

Does what it should do without bells and whistles

16件のレビューをすべて表示

貢献者と開発者

Highlighting Code Block はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

“Highlighting Code Block” は4ロケールに翻訳されています。翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Highlighting Code Block” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログを RSS で購読してみてください。

変更履歴

1.7.0

WordPress 6.2 に対応しました。
スタイルの読み込み処理を微調整しました。
コードコピーボタンに aria-label を追加しました。

1.6.1

WordPress 6.1 に対応しました。

1.6.0

WordPress 6.0 に対応しました。

1.5.5

バージョン番号を修正しました。

1.5.4

1.5.3

バグを修正しました。

1.5.2

一部のテーマで行の位置がずれてしまう問題を修正しました。

1.5.1

バグを修正しました。

1.5.0

WordPress 5.9 に対応しました。
CSSをリファクタリングしました。

1.4.1

言語リストの設定を変更しても、ブロック内の選択肢が変わらないというバグを修正しました。

1.4.0

ブロックのクラスが増幅してしまうバグを修正しました。
clipboard.jsが不要な場合でも読み込まれてしまう不具合を修正しました。

1.3.0

WordPress 5.8に対応しました。
必要なWordPressのバージョンが5.6になりました。

1.2.9

行数が表示されないという不具合を修正しました。

1.2.8

WordPress 5.7 に対応しました。
スペルミスを修正しました。(“plane” → “plain”)
コード修正。

1.2.7

コピーボタン機能を追加しました。
コードをリファクタリングしました。
WordPress 5.6 に対応しました。

1.2.6

ファイルアイコンの404エラーを修正しました。

1.2.5

コードの軽量化
CSSとJSのハンドル名を変更しました。

1.2.4

ブロックの登録処理を修正しました。

1.2.3

block.jsonファイルを修正しました。

1.2.2

「ブロックライブラリ」に登録するために調整しました。
ブロックの横幅を調整する機能を廃止しました。
codeタグからbrタグを除去する機能を廃止

1.2.1

スクリプト読み込みコードの調整

1.2.0

サーバーによってはCSSが読み込めないバグを修正。
言語名を表示するかどうかをブロックごとに設定できるようになりました。
言語名が非表示に設定されていても、ファイル名が入力されていれば表示されるようにしました。
ブロックエディターで、言語名やファイル名の表示がプレビューできるようになりました。

1.1.0

翻訳を修正しました。

1.0.9