シンタックスハイライトプラグインをやめる。

Crayon Syntax Highlighterを停止

たまーに覚え書き程度で出てくるコード表示たまにでも、綺麗に表示できた方がいい。そのまま書くとめっちゃ見えにくい，と思ってCrayonいれてみたんですけども・・・・でもプラグイン使って綺麗に表示するほど有用なコードはここでは出てこない!っていう・・・毎回のようにこのプラグインを使うならいいけど本当にたまになんだよね・・・

じゃあcodeタグだけ使えばいいじゃん

デフォルトはこういう灰色背景になるだけで・・・・味気ない
やっぱちょっと色がある方がいいなあ

Plugin Performance Profilerプラグイン

別にこれのためじゃないんだけど、プラグインがどんだけ負荷かかってるのかチェックするプラグインを入れてみたのだけど、Crayonもそこそこだな〜 Plugin Performance Profiler
一番はLightboxですね。これは検討中です。

highlight.jsを使う

プラグインを使わずJavaScriptライブラリを読み込むらしい。ああその手があったか〜！

このサイトとても参考にしました。
Crayonを捨てた。Syntax Highlightするならhighlight.jsが良さそう

こまめに更新されてるそうなので公式にコードをとりにいく
Getting highlight.js

CSSはheader.phpに jsファイルはfooter.phpに。
テーマはkimbie.darkにしてみました。かなり種類あるし気が変わったらファイル名書き換えるだけでいいから楽だね。

スクリプトの呼び出し

crayonを使ってる記事があるのでpreタグも適用されるようにコードを書き換え・・・なんだけど動かない
How to use highlight.jsを読むとjQueryとあるのでいつもの書き換え

<script>
jQuery(document).ready(function() {
    jQuery('pre').each(function(i, block) {
        hljs.highlightBlock(block);
    });
});
</script>

↑この表示さっそくこのスクリプト適用中。これをfooter.phpに設置これで過去の記事も書き換えずに済んだ。気が向いたら外部jsにまとめてるとこにこれも放り込みたい。

どうせならMarkdownも覚えよう

コードはcrayonボタンでやってたけど
マークダウンなら`を三つ上下につければ簡単に適用されるので今度から覚えよう。すっきりすっきり。
投稿画面のcrayonボタンが減って別のものを置けるしページの表示も多少早くなるのを期待。