軽い！キレイ！ Gist で WordPress のコードに色をつける！

「僕はWordPressでソースコードの色分けに SyntaxHighlighter を使ってるよー」な子はいねがー！！「使ってるけど描画が遅いんだよね−。もっと軽くてキレイなのないの？」と思ってる贅沢な子はいねがー！！

多分Web系ブロガーさんなら使ってますよね、 SyntaxHighlighter 系のプラグイン。僕も使ってます、どうもなまはげあらためむゆう([tw_link name=”anticyborg”])です。

このブログは一応Web屋さんのブログで、たまには技術的なことも書いています。だからソースコードを表示させている事もちょくちょくあります。

ソースコードって不思議なもので、一度キレイに色分けされたコードを見てしまうともう白背景と黒文字のみのコードは読みづらくてしょうがなくなってしまいますよね、当然ブログに書かれたものも一緒です。

だから、ソースコードをキレイに表示して読んでくれる人が読みやすくなるように、このブログ（というか大抵のブログ）ではプラグインを使っています。

しかし何だか動作が重いわけです

でもそういう類いのプラグインはJSで色分けをしていて、かつそのJSをフッターで読み込んでいるから(なのか何なの)か、ちゃんと色分けされて表示される速度が遅くて何だかちょっとショボンな訳です。僕ちゃんのブログはスマートでエレガントじゃなきゃダメなのっ！！さて僕は誰なんでしょうね。

でもまぁそういう要望はある程度当たり前なのかも知れないですね。なのでちょっと調べてみました。

Gist のコードを表示させよう、そうだそうしよう

どうやら Gist を使った色分けが素敵そうだったので試してみました。

お手軽WordPress Tips : Gistに書いたコードをプラグイン不要でブログに表示させる為のショートコード – かちびと.net

何が良いの？

JSでCSSを読み込んで実際のソースがdiv要素とかに入って表示されるので動作が軽快ですよ。あと色分けが好み。何でもかんでもJSでやっちゃえば良いじゃんって風潮は実はあまり好きじゃないです。

Gist って？

Gist とは、ソースコードのバージョン管理・共有サービス GitHub が提供しているコードスニペット(他で再利用できるようなコードの断片、パーツ)の共有サービスです。

まず Git にアカウント登録して Gist でコードを作るという手順がありますがそこは割愛します。ガンバッテー(/’□’)/

ソースを表示させるショートコードを作る

Gist のソースを表示させるためのプラグインもあるみたいなのですが、せっかく以前に「SS | WordPressのショートコードはプラグインにした方が良いケースがあるから作った。ので作り方書くよ」でショートコードを独自プラグイン化作ったからそこに追加しようかと思います。

このコードをプラグイン化したファイルに記述します。そして記事本文内に表示してあげるショートコードはこんな感じです。

[]

ちなみに、ショートコードの無効化は

[[]]

だそうですよ、すごいねーこうやるんですね知りませんでした。

どうですか？ステキですね！キレイですね！

あと、かちびとさんでも仰って頂いていますが、CSSを別途読み込んでいる影響で class とかがバッティングする可能性もあるので気をつけてくださいね。