Title: Highlighting Code Block Author: Ryo Published: 2018年12月12日 Last modified: 2026年4月1日 --- プラグインを検索 ![](https://ps.w.org/highlighting-code-block/assets/banner-772x250.png?rev=2432522) ![](https://ps.w.org/highlighting-code-block/assets/icon-256x256.png?rev=2432522) # Highlighting Code Block 作者: [Ryo](https://profiles.wordpress.org/looswebstudio/) [ダウンロード](https://downloads.wordpress.org/plugin/highlighting-code-block.2.1.3.zip) * [詳細](https://ja.wordpress.org/plugins/highlighting-code-block/#description) * [レビュー](https://ja.wordpress.org/plugins/highlighting-code-block/#reviews) * [インストール](https://ja.wordpress.org/plugins/highlighting-code-block/#installation) * [開発](https://ja.wordpress.org/plugins/highlighting-code-block/#developers) [サポート](https://wordpress.org/support/plugin/highlighting-code-block/) ## 説明 「Highlighting Code Block」は、シンタックスハイライトされるコードブロックをクリック だけで追加できるようにします。 ブロックエディター・旧エディターの両方に対応しています。 (ただし、推奨しているの はブロックエディターでの使用です。) 当プラグインの詳細な説明については以下のページをご覧ください。 URL: [https://loos.co.jp/documents/highlighting-code-block/](https://loos.co.jp/documents/highlighting-code-block/) ### ソースコード 当プラグインのソースコードは、Githubで公開しています。 URL: [https://github.com/ddryo/Highlighting-Code-Block](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 ## インストール このプラグインは、あなたのサイトから直接インストールできます。 1. ログインして「プラグイン」 「新規追加」に移動します。 2. 「Highlighting Code Block」を検索欄に入力し、Enter キーを押します。 3. 検索結果のリストでプラグインを見つけ、「今すぐインストール」をクリックします。 4. インストールしたら、「有効化」ボタンをクリックします。 ## FAQ ### 使用可能な言語について デフォルトでは以下の言語が使用可能です。 * HTML * CSS * SCSS * JavaScript * TypeScript * PHP * Ruby * Python * Swift * C * C# * C++ * Objective-C * SQL * JSON * Bash * Git ## 評価 ![](https://secure.gravatar.com/avatar/bbdf310142e4523583701a048b98b0ca190e9faa6d39f4cf21c0dff73c31e87e? s=60&d=retro&r=g) ### 󠀁[站点爆炸](https://wordpress.org/support/topic/%e7%ab%99%e7%82%b9%e7%88%86%e7%82%b8/)󠁿 [liuliu66](https://profiles.wordpress.org/liuliu66/) 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 ![](https://secure.gravatar.com/avatar/f85989dc34b218af0380bd6e7f25fe2ddae526cdcbe99653801a8c2fbedf724e? s=60&d=retro&r=g) ### 󠀁[very nice](https://wordpress.org/support/topic/veey-nice/)󠁿 [sazone](https://profiles.wordpress.org/sazone/) 2024年3月19日 read code easily ![](https://secure.gravatar.com/avatar/c6f2d8a321247d15872a2516f44f276f425f9a21498cb132807d674b17c71308? s=60&d=retro&r=g) ### 󠀁[Good Job!](https://wordpress.org/support/topic/good-job-1763/)󠁿 [ishere](https://profiles.wordpress.org/ishere/) 2023年12月17日 Very thanks! ![](https://secure.gravatar.com/avatar/134d72580c6ecd9f2f4b36bc69a5a9c17dbb3530c022a3523bacf6a55a521cf4? s=60&d=retro&r=g) ### 󠀁[No support for Android syntax](https://wordpress.org/support/topic/no-support-for-android-syntax/)󠁿 [Rouzbeh Zarei](https://profiles.wordpress.org/iamrouzbehzarei/) 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. ![](https://secure.gravatar.com/avatar/77530765f24709bda5ef811b35543551e5ba4ae435bf00a38da74d3aeacd29b2? s=60&d=retro&r=g) ### 󠀁[A+ Once I figured out the BLOCKS part!](https://wordpress.org/support/topic/a-once-i-figured-out-the-blocks-part/)󠁿 [Anonymous User 20287723](https://profiles.wordpress.org/anonymized-20287723/) 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. ![](https://secure.gravatar.com/avatar/82d9afeba3f9fbb7039b6ae795c8871d8d23618399edff6b42cf5ba880039c2d? s=60&d=retro&r=g) ### 󠀁[Thank you!](https://wordpress.org/support/topic/thank-you-3312/)󠁿 [Muhammad Zohaib](https://profiles.wordpress.org/fangsword/) 2023年3月3日 Exactly what I was looking for. thanks alot! [ 22件のレビューをすべて表示 ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/) ## 貢献者と開発者 Highlighting Code Block はオープンソースソフトウェアです。以下の人々がこのプラグ インに貢献しています。 貢献者 * [ Ryo ](https://profiles.wordpress.org/looswebstudio/) “Highlighting Code Block” は5ロケールに翻訳されています。 [翻訳者](https://translate.wordpress.org/projects/wp-plugins/highlighting-code-block/contributors) のみなさん、翻訳へのご協力ありがとうございます。 [“Highlighting Code Block” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/highlighting-code-block) ### 開発に興味がありますか ? [コードを閲覧](https://plugins.trac.wordpress.org/browser/highlighting-code-block/) するか、[SVN リポジトリ](https://plugins.svn.wordpress.org/highlighting-code-block/) をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/highlighting-code-block/) を [RSS](https://plugins.trac.wordpress.org/log/highlighting-code-block/?limit=100&mode=stop_on_copy&format=rss) で購読してみてください。 ## 変更履歴 #### 2.1.3 * Fixed an issue where there was a discrepancy in the structure of the build files. #### 2.1.2 * Support for WordPress 6.9. #### 2.1.1 * Support for WordPress 6.8. #### 2.1.0 * Support for WordPress 6.7. #### 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 初回リリース。 ## メタ * バージョン **2.1.3** * 最終更新日 **2週間前** * 有効インストール数 **10,000+** * WordPress バージョン ** 5.6またはそれ以降 ** * 検証済み最新バージョン: **6.9.4** * PHP バージョン ** 5.6またはそれ以降 ** * 言語 * [Dutch](https://nl.wordpress.org/plugins/highlighting-code-block/)、[English (US)](https://wordpress.org/plugins/highlighting-code-block/)、 [French (France)](https://fr.wordpress.org/plugins/highlighting-code-block/)、 [Greek](https://el.wordpress.org/plugins/highlighting-code-block/)、[Japanese](https://ja.wordpress.org/plugins/highlighting-code-block/)、 [Persian](https://fa.wordpress.org/plugins/highlighting-code-block/). * [プラグインを翻訳](https://translate.wordpress.org/projects/wp-plugins/highlighting-code-block) * タグ * [block](https://ja.wordpress.org/plugins/tags/block/)[code](https://ja.wordpress.org/plugins/tags/code/) [editor](https://ja.wordpress.org/plugins/tags/editor/)[Guternberg](https://ja.wordpress.org/plugins/tags/guternberg/) [syntax](https://ja.wordpress.org/plugins/tags/syntax/) * [詳細を表示](https://ja.wordpress.org/plugins/highlighting-code-block/advanced/) ## 評価 5つ星中4.5つ星 * [ 16 5-星レビュー ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/?filter=5) * [ 0 4-星レビュー ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/?filter=4) * [ 0 3-星レビュー ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/?filter=3) * [ 2 2-星レビュー ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/?filter=2) * [ 1 1-星レビュー ](https://wordpress.org/support/plugin/highlighting-code-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/highlighting-code-block/reviews/#new-post) [すべてのレビューを見る](https://wordpress.org/support/plugin/highlighting-code-block/reviews/) ## 貢献者 * [ Ryo ](https://profiles.wordpress.org/looswebstudio/) ## サポート 意見や質問がありますか ? [サポートフォーラムを表示](https://wordpress.org/support/plugin/highlighting-code-block/) ## 寄付 このプラグインが今後も改善できるよう応援しませんか ? [ このプラグインに寄付 ](https://wemo.tech/2122/)