説明
「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
評価
2023年3月3日
Exactly what I was looking for. thanks alot!
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!
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.
2022年10月9日
1 reply
I found it difficult to configure and support is non-existent.
2021年11月1日
Does what it should do without bells and whistles
2021年10月27日
love this, useful and beautiful.
貢献者と開発者
変更履歴
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
翻訳を修正しました。
1.0.8
英語に対応
1.0.7
- WordPress5.3に対応。
- HCBのコードブロックの左右marginを削除し、テーマに任せるように変更。
- コアの「ソースコードブロック」との変換を可能に。
1.0.6
- 読み込むCSSファイルを圧縮。
- 一部のCSSをhead内のstyleタグで読み込むように変更。
- フォントファミリーの設定が反映されない不具合を修正
- CSSやJSのコード整理
1.0.5
- scriptの読み込みをwp_footerへ移動。
- HCBブロックのロゴを変更。
- コードブロックのfont-familyを設定できるようになりました。
1.0.4
- WordPress5.2.1への対応
- コードブロックのfont-family変更。
- コードブロックにファイル名を設定できるようにしました。
1.0.3
WordPress 5.1.1に対応
1.0.2
readme.txt を変更しました。
1.0.1
コメントを削除しました
1.0
初回リリース。