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

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

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

 

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

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

  • Highlighting Code Block

Highlighting Code Block

  • Crayon Syntax Highlighter

Crayon Syntax Highlighter

 

今回のメモでは、Crayon Syntax Highlighterについてまとめていきたいと思います。

https://github.com/aramk/crayon-syntax-highlighter

Highlighting Code Blockについては、以下のメモを参考に頂ければと思います。

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

 

見え方

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

  • デフォルト表示
function showConsole(){
  console.log("Crayon Syntax Highlighter!");
}

 

  • カーソルを当てた場合の挙動(メニュー表示)

Crayon Syntax Highlighter カーソルを当てた挙動

  • 行数表示の非表示化

Crayon Syntax Highlighter 行数非表示

 

  • コピー補助

Crayon Syntax Highlighter コピー補助

 

  • コードブロック

Crayon Syntax Highlighter コードブロック

 


設定画面

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

Crayon Syntax Highlighter 設定画面

細かな表示設定を行うことが出来ます。

Crayon Syntax Highlighter 設定 Crayon Syntax Highlighter 設定


コードの書き方

Crayon Syntax Highlighter 書き方

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

コード挿入ボタンが表示されます。

そのボタンを表示すると、コード挿入画面が表示されます。

Crayon Syntax Highlighter 書き方 Crayon Syntax Highlighter 書き方

コード入力画面で入力をして、Addをクリックすると、

Crayon Syntax Highlighter ソース add

投稿画面の部分に、以下の様に入力されます。

一度、投稿画面の部分に表示されると、その部分は直接編集することが出来ます。

Crayon Syntax Highlighter 直接編集

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

Crayon Syntax Highlighter 表示

 


対応言語

ABAP,ActionScript,AmigaDOS,Apache,AppleScript,Arduino,Assembly,AutoIt,

C,C#,C++,CoffeeScript,CSS,Delphi/Pascal,Diff,Erlang,Go,Haskell,HTML,Lisp,Lua,

Microsoft,MIVA,Monkey,MS-DOS,MySQL,Java,JavaScript,Objective-C

C,Perl,PHP,PL/SQL,PostgreSQL,PowerShell,Python,R,Ruby,Rust,Scheme,Shell,

Transact-SQL,TeX,Vim,VisualBasic,VisualBasic.NET,YAML

 


 

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

当ブログもこちらのプラグインを利用しています。

対応言語も多いですし、書き方も簡単ですので重宝しています。

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連投稿

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

トップに戻る