テックブログ

シンタックスハイライトをWordPressプラグインで入れる

投稿日:

スクリーンショット 2016-02-14 10.42.45

最近個人的なブログにもコードを入れることも無くなったのでシンタックスハイライト(スクリプトやHTMLなどのコードを見やすく&扱いやすくする機能)を入れる方法って何があったんだっけ?と思ったら、今はいろいろあるようです。

個人的には昔(2,3年前でしょうか)使っていたのにSyntaxHighlighter Evolved — WordPress Pluginsというのがあり、これが一番手軽かなと思います。

あと、これからコードを入れやすいようにコード挿入が捗るプラグインも入れてみました。

SyntaxHighlighter TinyMCE Button — WordPress Plugins

スクリーンショット_2016-02-14_10_45_43

こういうボタンが画面に表示されます。

そしてボタンを押すと、コードを表示させるための設定も簡単に出来そうです。

スクリーンショット 2016-02-14 10.46.44

こういうのを使うと、普段からコードスニペットをブログに書かない方でもさっと手軽に利用出来そうです。

個人的には昔書いていたように

[php]ここにPHPスクリプトを書く[/php]
(カッコは全角であえて書いています)

でもいいかなと思ったのですが、こちらのほうがいろいろ応用が出来て良さそうなのでこちらにしてみました。

下記の様な感じでコードが表示されます。

<!-- hightlight.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
<script>// <![CDATA[
hljs.initHighlightingOnLoad();
// ]]></script>

こんな感じで今後、いろいろなコードスニペットを気軽にポスト出来れば、と思います。

-テックブログ

Copyright© プラス・ムーブメント合同会社 , 2019 All Rights Reserved Powered by AFFINGER5.