Highlighting Code Block

説明

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

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

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

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

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

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

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

動作しない場合

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

設定について

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

スクリーンショット

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

ブロック

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

loos-hcb/code-block
Highlighting 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

評価

2020年6月29日
As a plugin to replace "Cray on Syntax Highlighter", I think this plugin running on Gutenberg is the most powerful and excellent. It is also simple and easy to use.
2020年5月13日
Plugin works nicely but is lacking in highlighting for Java, Kotlin, Groovy, XML. You might get away with using the Javascript highlighting for Java, Kotlin and Groovy code and the HTML highlighting for XML code. But in general it seems the languages provided are aimed at front-end and mobile developers. Hope the author adds languages, or makes it easy to add your own.
2020年3月14日
I tested all the plugins This is the best thank you bro please support this Until the very last day of WordPress
2019年12月22日
Thank you so much with English version. But I have a problem here. Your plugin only work at frontend, it do not work in backend. So, I must duplicate the wp_enqueue_scripts to admin_enqueue_scripts. I hope you understand me...
2019年5月22日
コードのハイライトを綺麗にできるプラグインは意外と探してみるとなかった。 シンタックスハイライトが簡単に自分のエディタの色と同じようにできるのが良い。 ファイル名が出力できるようにできれば尚良しなので期待を込めて☆5
7件のレビューをすべて表示

貢献者と開発者

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

貢献者

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

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

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

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

変更履歴

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

初回リリース。