ここでは、Crayon Syntax Highlighterの設定方法と使い方(ソースコードを表示するプラグイン)について紹介する。
目次です。
Crayon Syntax Highlighterとは
Crayon Syntax Highlighterとは、ソースコードをブログ(サイト)などで表示する際に使用するプラグインである。
ソースコードをブログ(サイト)などに貼ろうとすると、通常だと様々な弊害が起きるために、このプラグインを使用する必要があるわけである。
Crayon Syntax Highlighterの設定方法と使い方
Crayon Syntax Highlighterの設定方法としては、管理画面(ダッシュボード)から、「プラグイン」、「新規追加」へと進む。
そうしたら、画面が「プラグインを追加」に切り替わる。
右側にあるキーワードの検索欄に「Crayon Syntax Highlighter」と入力する。
入力後は、Crayon Syntax Highlighterの項目が画面に表示されるので、そこにある「今すぐインストール」ボタンをクリックする。
インストール後は、「有効化」ボタンをクリックする。
基本設定
で、基本設定を行う場合には、管理画面(ダッシュボード)から、「設定」へと進み、「Crayon」をクリックする。
すると設定画面に移動できる。
めがね
設定については、そこまでこだわりがない、という方は、デフォルト設定でも良いかもしれない。
ただ、このままの設定だとコードを挿入した後で、文字化けすることがたまにあるので、文字化け対策をしておくと良いと思う。
文字化け対策
文字化け対策をするには、コードの項目にある「コード内のHTMLエンティティをデコードする」にチェックを入れる。
そして、「変更内容を保存」ボタンをクリックすればOKである。
コードの挿入方法
で、設定が終わったら、さっそくコードの挿入を行おう。
コードの挿入は記事ページにて、ビジュアルエディタにある「<>」をクリックする。
(テキスト画面でも、もちろん同様に挿入できる)
赤枠の中に、記事ページに挿入したいコードを追加する。
コードを追加後は、「Add」をクリックする。
これで、ビジュアル画面にコードが挿入される。
1 2 3 |
<div class="doga"> <iframe src="https://www.youtube.com/embed/kDCehzHjAVY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> |
プレビュー画面にて、確認するとこのように表示される。
以上で、Crayon Syntax Highlighterの設定方法と使い方(ソースコードを表示するプラグイン)についての解説は終了する。