説明
「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] 設定」というメニューが追加されているはずです。
このプラグインに関する設定は、このメニュー内で行います。
スクリーンショット
ブロック
このプラグインは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
評価
貢献者と開発者
変更履歴
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
初回リリース。