説明
「Highlighting Code Block」は、シンタックスハイライトされるコードブロックをクリックだけで追加できるようにします。
ブロックエディター・旧エディターの両方に対応しています。
(ただし、推奨しているのはブロックエディターでの使用です。)
当プラグインの詳細な説明については以下のページをご覧ください。
URL: https://loos.co.jp/documents/highlighting-code-block/
ソースコード
当プラグインのソースコードは、Githubで公開しています。
URL: https://github.com/ddryo/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
評価
2024年4月14日
在寻求关于此问题的帮助时，您可能需要提供以下信息：WordPress 版本 6.5.2目前启用的主题：Vikinger - BuddyPress Social Community（1.9.9.4.2 版本）当前插件：Highlighting Code Block（版本 2.0.1）PHP 版本 8.1.27
错误详情============错误类型 E_ERROR 发生在文件 /www/wwwroot/1.14.58.204/wp-content/plugins/highlighting-code-block/class/loos_hcb_menu.php 的 140 行。错误信息：Uncaught ValueError: Unknown format specifier "�" in /www/wwwroot/1.14.58.204/wp-content/plugins/highlighting-code-block/class/loos_hcb_menu.php:140Stack trace:#0 /www/wwwroot/1.14.58.204/wp-content/plugins/highlighting-code-block/class/loos_hcb_menu.php(140): sprintf()#1 /www/wwwroot/1.14.58.204/wp-includes/class-wp-hook.php(324): {closure}()#2 /www/wwwroot/1.14.58.204/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters()#3 /www/wwwroot/1.14.58.204/wp-includes/plugin.php(517): WP_Hook->do_action()#4 /www/wwwroot/1.14.58.204/wp-admin/admin.php(175): do_action()#5 /www/wwwroot/1.14.58.204/wp-admin/plugins.php(10): require_once('...')#6 {main}thrown
2024年3月19日
read code easily
2023年12月17日
Very thanks!
2023年11月4日
1 reply
Unfortunately, the plugin doesn't support Java, Kotlin, Flutter nor XML syntax, making it completely useless for anyone in the Android development field.
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.
2023年3月3日
Exactly what I was looking for. thanks alot!
貢献者と開発者
変更履歴
2.0.1
- 設定項目のいくつかのテキストが変更されました。
2.0.0
- WordPress 6.4 に対応。
- PHP8.2に対応。
- CSSとブロックUIが大幅に調整されました。
- CSS カスタムプロパティの名前を変更し、全体的に調整しました。
data-start属性の設定をブロックに追加しました。
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
初回リリース。