WordPress プラグイン Highlighting Code Block 見え方 記載方法

今回は、プログラムなどのソースをハイライト表示してくれる

wordpressのプラグインについてのメモとなります。

 

ソースをきれいに表示してくれるプラグインは幾つか存在しますが、

特に、以下の2つは多くのサイトで利用されているようです。

  • Highlighting Code Block

Highlight プラグイン

  • Crayon Syntax Highlighter

Highlight プラグイン

 

今回のメモでは、Highlighting Code Blockについてまとめていきたいと思います。

https://ja.wordpress.org/plugins/highlighting-code-block/

Crayon Syntax Highlighterについては、以下のメモを参考に頂ければと思います。

WordPress プラグイン Crayon Syntax Highlighter 見え方 記載方法

見え方

表示方法は調整できますが、ページを訪れた人のアクションによって、見え方が変化します。

・デフォルト表示

function showConsole(){
  console.log("Highlighting Code Block!"); 
}
  • カーソルを当てた場合の挙動(メニュー表示)

Highlighting Code Block カーソルを当てた 挙動

  • 行数表示の非表示化

Highlighting Code Block 行数非表示

  • コピー補助

Highlighting Code Block コピー補助

  • コードブロック

Highlighting Code Block コードブロック

 


設定画面

他のプラグインと同じ要領で、WordPressのプラグイン画面から設定を行えます。

Highlighting Code Block 設定

言語名表示、行数表示などの標準的な設定を行うことが出来ます。

ただ、カラーリングがシンプルに2種類しか選択することが出来ません。

プログラム言語やHTMLなど17種類に対応されています。

Highlighting Code Block 対応言語

 


コードの書き方

Highlighting Code Block 書き方

プラグインをインストールして有効化を行うと、

コードブロックという欄が表示されます。そして、その欄から、対応させたい言語等を選びます。

Highlighting Code Block 言語選択

言語等を選択すると、以下のような入力枠が表示されます。

Highlighting Code Block 入力枠

以下の様に入力を行うと、

Highlighting Code Block 入力例

以下の様に表示されます。

Highlighting Code Block 表示 結果


対応言語

強調表示に対応しているプログラム言語は以下となります。

html,css,scss,JavaScript,TypeScript,Php,Ruby,Python,Swift,C,C#,C++,Objective-C,Sql,Json,Bash,Git

一般的な言語はカバーされていますが、デフォルトのみだと少し限られている印象を受けます。

設定画面にて独自設定を追加する事ができます。

 


 

今回のメモは以上となります。

設定方法もコードの書き方も簡単に行えますので、

気になる方はお試し頂ければと思います。


------------------------------------------ スポンサーリンク ------------------------------------------
都内でエンジニアをやっています。 2017年に脱サラ(法人設立)しました。 仕事で調べたことや、気になったことをメモしています。
投稿を作成しました 138

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る