軽い!キレイ! Gist で WordPress のコードに色をつける!
2012年04月12日

「僕は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 とかがバッティングする可能性もあるので気をつけてくださいね。
他にこんな事も書いてます
- WordPressの条件分岐をもちょっと便利にする関数作ったよ
- ゆるふわ勉強会第6回 「WordPress で企業サイトを作る Vol2 【構築編】作ったサイトを オリジナルテーマ化する」を開催しました
- ゆるふわ勉強会第5回 「WordPress で企業サイトを作る Vol1 【初期編】WordPressを知ろう!」を開催しました
- マルチサイト運用中のWordPressサイトをサーバ、ドメインを移行する際の手順
- WordPressのショートコードはプラグインにした方が良いケースがあるから作った。ので作り方書くよ
- 1分でできる!WordPress でショートコードを作るよっ(/’□’)/
- WordPress で個別記事ページにのみ記事本文に何か追加したいときの対応方法
- WordCrab 2012 やってきたよ
- html5でWordPressブログを作る勉強会やってきた
- WordPressでプラグイン不要なカンタンOGP表示ファイルを作ったから公開しますね
FBでコメント
2個のコメント
タイトル間違えてる、Gistな(/’□’)/ RT @anticyborg: 書いた:軽い!キレイ! Git で WordPress のコードに色をつける! – http://t.co/FuGaKdSZ
軽い!キレイ! Gist で WordPress のコードに色をつける!:STACKSTOCK http://t.co/ktC3HGIQ
トラックバック/ピンバックはありません。