ブログ記事にソースコードを表示させるには“Crayon Syntax Highlighter”が簡単便利

ブログ記事にソースコードを表示させるには“Crayon Syntax Highlighter”が簡単便利

htmlを記事内に表示させたい

一応このブログは初心者がSimplicityというWordpressの無料テーマを通じて、

Webサイト作成に関する知識を養って行こう!しかもスマホのみ!

と言う壮大なテーマがありまして、その流れでhtmlのソースをブログで紹介するケースが今後出て来ると思うんです。

調べて見ると色々と大変そうな感じもしたんですけど、百聞は一見にしかずと言いますし、とりあえず試しにちょっとやってみました。

htmlのテキスト化は素人が気軽に出来るような作業じゃなかった

下に記載したhtmlは、なんて事ない入れ子メニューのソースなんですけど

<p>メニュー</p>
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>

これをテキストとして表示させる為に、エディタには下のような記入をしてるんです。

Screenshot_2016-08-27-13-49-29-01

これは < とか > の文字は特殊文字として認識されるからなんですけど、はっきり言ってめちゃくちゃ面倒くさいです。スマホでちょちょいとやれるような作業ではないですね…

記事内にソースを表示させるプラグイン“Crayon Syntax Highlighter”

でもですね、ソースコードを記事内に表示させてるブログやらWebサイトってたくさんあるんですよ。

全員が全員、特殊文字を変換させて入力してる訳無いと思うんです。そうです!ネットでは役に立ったり立たなかったり様々なツールが出回ってるじゃないですか!

もしかしたらソースコードを楽に、しかもスタイリッシュに表示させる事も出来るツールも探せばネット上のどこかにあるんじゃないかと考え、番組スタッフが必死に探しました所…

ありました!
Crayon Syntax Highlighterと言うWordpressのプラグインを見つけました!

“Crayon Syntax Highlighter”ってどんな感じ?

設定画面の“タグ”メニューでCrayonsとして<pre>タグをキャプチャって項目にチェックが入ってるかどうか確認する必要はありますが、

Screenshot_2016-08-27-13-28-20-01

特に面倒な事はなく、基本的にインストールするだけでスムーズに使いはじめる事が出来る実に素晴らしいプラグインです。

“Crayon Syntax Highlighter”を実際に使ってみる。

使い方は<pre title="ソース" lang="HTML">と</pre>の間にタグを記入するだけです。試しに上に書いたhtmlを表示させてみますよ。

どうですか?見栄え良くないですか?

テキストエディタにCrayonと書かれたボタンが追加されているので、それを使うのが楽ですが、スマホだと見切れていて不便なのでタグ入力で対応しています。pre titleでタイトルを、langで言語の設定です。下のサイトさんの記事を参考にしました。
【WordPress】記事内にソースコードを <pre>タグで表示

最後に

いやいや…Webサイト作成に関する知識を養って行こう!しかもスマホのみ!と言う壮大なテーマを掲げてブログ立ち上げたは良かったんですけど、このジャンルは初心者にはなかなかハードル高いですね。

しかしまあこの記事を書き上げた事で一つ知識が増えました。一つハードルを飛び越えましたんで、これから次のハードル目指して突き進んで行きたいと思いまーす!