「Crayon Syntax Highlighter」の使い方

WordPress Twenty Seventeen
記事作成のために導入すべきプラグイン
「Crayon Syntax Highlighter」の使い方
 
WordPressで記事を投稿する際に、HTML や CSS あるいは PHP のソースをサンプルとして表示させたい場合が多々ある。以下に、これらのソースコードを記事に張り付ける方法を記す。

スポンサー リンク

 
「Crayon Syntax Highlighter」のインストールと設定
 
ダッシュボードの「プラグイン」で、「Crayon Syntax Highlighter」のインストールと有効化を行う。
crayonsh112
 
ダッシュボードの「設定」→「Crayon」で、「Crayon Syntax Highlighter」の設定を行う。
crayonsh122
 
デフォルトのままで十分。
crayonsh132
 
【設定を保存】をクリックすると、ページの編集画面のテキストタブに、【CRAYON】ボタンが現れる。
crayonsh202
 
当ブログでの設定と表示のされ方
 
当ブログでは【 Neon 】を設定している。
「Crayon Syntax Highlighter」の使い方
 
【 Neon 】での表示のされ方。
「Crayon Syntax Highlighter」の使い方
 
 
ソースコードの貼り付け方
 
方法-1
ソースコード部分を選択した状態で、【CRAYON】ボタンをクリック。
crayonsh232
 
「挿入画面」ウィンドウが表示されます。
crayonsh242
 
右上にある【挿入】をクリックで完了。
 
方法-2
先に、【CRAYON】ボタンをクリック。
crayonsh202
 
その後、ソースコードを貼り付ける。
crayonsh212
 
右上にある【挿入】をクリックで完了。
 
※ : ソースコードが所定の箇所に張り付かず、ページの最後に挿入される場合がるので、カット&ペーストで挿入したいとことに持っていく必要がある。
 
当ブログでの、ソースコードの貼り付け方
 
AddQuicktagに、次のタグを登録してあり、下書きレベルで、ソースコードを貼り付けたい箇所に登録したタグで、一旦「##############」を表示させている。
 
この個所をクリックし、『<>』をクリックする。
「Crayon Syntax Highlighter」の使い方
 
ソースコードの貼り付け画面が表示されるので、タイトルを入力しソースコードを貼り付け『Save』する。
「Crayon Syntax Highlighter」の使い方
 
下記のように、ソースコードが貼り付けられる。
「Crayon Syntax Highlighter」の使い方
 

 

以上。
(2017.10.26)

 

 

スポンサー リンク

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください