ブログで詳しくWordPressのテーマ編集などの解説をするときに、綺麗にソースコードを見せることができるプラグイン『Crayon Syntax Highlighter』のご紹介です。
当ブログでもWordPressを編集する時にどうしたらいいか?
など解説をしたりしているわけですが、その都度コピペするだけでは味がないですよね。
よくブロガーさんが使っているこういうやつですね。
![crayon2.png Crayon Syntax Highlighter](https://nomadaffili.com/wp-content/uploads/2014/03/crayon21.png)
なんかカラフルでわかりやすくないですか?
1文とかだったらいいですが、長いものを貼り付けたいときにはおすすめです。
Crayon Syntax Highlighterのインストール
WordPressのダッシュボード『プラグイン』→『新規追加』でCrayon Syntax Highlighterを検索してインストールします。
![crayon.png Crayon Syntax Highlighter](https://nomadaffili.com/wp-content/uploads/2014/03/crayon.png)
有効化したら、新規投稿画面に行ってみましょう。
ビジュアルエディタではなくテキストエディタを選択すると
新しく『Crayon』が追加されています。
『Crayon』をクリックするとこんな画面になります。
タイトルをつけて、ソースコードをコピペするだけ。
ちなみにこちらはLUREA Refine Proのヘッダーです。
![crayon4.png Crayon Syntax Highlighter](https://nomadaffili.com/wp-content/uploads/2014/03/crayon42.png)
貼り付けた結果はこんな感じに表示されます。
<?php get_header(); ?> <?php $layout=get_option('re_layout_top');?> <body itemscope itemtype="http://schema.org/WebPage" <?php body_class(); ?>> <div class="wrapper <?php if(get_option('re_layout_top')) echo $layout; else echo 'column3'; ?>" id="wrapper"> <div class="wrapper-inner">
メニューの使い方
カーソルを合わせると右上にメニューが出てくるわけですが
こちらもちょっと説明しておきますね。
![crayon11.png Crayon Syntax Highlighter](https://nomadaffili.com/wp-content/uploads/2014/03/crayon11.png)
まずは一番左をクリックすると。
1.2.3.4.などの行の数字が消えちゃいます。
![crayon5.png Crayon Syntax Highlighter](https://nomadaffili.com/wp-content/uploads/2014/03/crayon5.png)
左から二番目をクリックすると。
普通のテキストに早変わり。
![crayon6.png Crayon Syntax Highlighter](https://nomadaffili.com/wp-content/uploads/2014/03/crayon6.png)
左から三番目をクリックすると。
横へのスクロールが無くなり改行に変わります。
![crayon10.png Crayon Syntax Highlighter](https://nomadaffili.com/wp-content/uploads/2014/03/crayon10.png)
左から四番目をクリックすると。
場所が入れ替わり、よくわかりませんね・・・。
![crayon7.png Crayon Syntax Highlighter](https://nomadaffili.com/wp-content/uploads/2014/03/crayon7.png)
左から五番目をクリックすると。
ソースをコピーすることができます。
これが一番使うのではないでしょうか?
![crayon8.png Crayon Syntax Highlighter](https://nomadaffili.com/wp-content/uploads/2014/03/crayon8.png)
最期に1番右をクリックすると。
別画面で大きく開き直します。
![crayon9.png Crayon Syntax Highlighter](https://nomadaffili.com/wp-content/uploads/2014/03/crayon9.png)
何か設定方法等の説明をするときには
プラグイン導入するだけでちょっとできる人に見えるかもしれませんよ?
コメントを残す