Highlighting Code Block

Description

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

新旧エディタ両方に対応しており、どちらのエディタでもコードの記述をサポートいたします。

当プラグインの詳細な説明については こちらのページ をご覧ください。

インストール・有効化したら

  • ブロックエディタでは、「フォーマット」のカテゴリーの中に「Highlighting Code Block」という名前のコードブロックが用意されているはずです。
    「Highlighting Code Block」を選択したら、セレクトボックス付きのコードブロックが出現します。
    お好きな言語を選び、コードを記述してください。
  • クラシックエディタでは、ツールバー(デフォルトでは2段目)に「コードブロック」と書かれたセレクトボックスが出現しているはずです。
    こちらのセレクトボックスからお好きな言語を選択すると、コードブロック(preタグ)が挿入されます。
    すでに入力済みのテキストを選択した状態でコードブロックを選択することも可能です。自動でラッピングされます。(改行が含まれる場合はうまくラッピングできません。)

動作しない?

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

各種設定

管理画面の左メニュー「設定」項目の中、「CODE BLOCK」という項目から設定を変更できます。

Screenshots

  • Code Coloring
  • Select 「Highlighing Code Block
  • Select lang (Guternberg)
  • Writing your code (Guternberg)
  • Added select box (Tinymce)
  • Select lang (Tinymce)
  • Writing your code (Tinymce)
  • ex) Light color
  • ex) Dark color
  • Base Setting
  • Higher Setting

Installation

自動インストール

  1. プラグインの検索フィールドより「Highlighting Code Block」と入力します。
  2. 当プラグインを見つけたら、” 今すぐインストール” をクリックしてインストールし、有効化してください。

手動インストール

1.「highlighting-code-block」フォルダ全体を /wp-content/plugins/ ディレクトリにアップロードします。
2.「プラグイン」メニューからプラグインを有効化します。

FAQ

使用可能な言語について

デフォルトでは以下の言語が使用可能です。
– HTML
– CSS
– SCSS
– JavaScript
– TypeScript
– PHP
– Ruby
– Python
– Swift
– C
– C#
– C++
– Objective-C
– SQL
– JSON
– Bash
– Git

Reviews

မေ 22, 2019
コードのハイライトを綺麗にできるプラグインは意外と探してみるとなかった。 シンタックスハイライトが簡単に自分のエディタの色と同じようにできるのが良い。 ファイル名が出力できるようにできれば尚良しなので期待を込めて☆5
ဒီဇင်ဘာ 14, 2018
Useful, simple, cool!
Read all 2 reviews

Contributors & Developers

“Highlighting Code Block” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.0.5

scriptの読み込みをwp_footerへ移動
HCBブロックのロゴを変更
コードブロックのfont-familyが変更を指定できるようになりました。

1.0.4

WordPress5.2.1への対応
コードブロックのfont-family変更(windowsのフォントが読みにくかったので)
コードブロックにファイル名を設定できるようにしました

1.0.3

WordPress5.1.1への対応

1.0.2

Change Readme.txt

1.0.1

Comment delete.

1.0

Initial working version.