• かちびと.net

    シンタックスハイライトされたソースコードを手軽に実装できるWebサービス・syntaxhighlight.inのご紹介です。Githubページなど、ちょっとしたデモページでのサンプルコードなんかに良さそうですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

シンタックスハイライトされたソースコードを手軽に実装できるWebサービス・syntaxhighlight.in

スポンサーリンク

地味に便利だったのでご紹介です。
ソースコードをブログやWebサイト
などで表示するのに、シンタックス
ハイライトはもはや必須とも言える
と思いますが、多くの場合は高機能
すぎて導入が面倒です。

ソースコードの可読性を高めるSyntax Highlightを実装するためのライブラリとマークアップ一式をサクッと生成してくれるWebサービスです。

ブログなどのように、何度も使う環境ならちゃんとしたものを入れたほうがいいでしょうけど、何かしらのライブラリを作って、そのデモページにサンプルコード貼りたい、みたいなちょっとした時なんかに結構便利かなぁと。例えばGithubページとか。(参照:GitHub Pagesホスティングサービス(ほぼ)完全活用ガイド)

syntaxhighlight.in

選んだ言語のみの対応にしてくれるので軽量で手軽に実装出来るのが大きな魅力です。生成されるコードはjQueryで動かします。

同様のSyntax Highlight用ライブラリのは圧縮版でも67KBですが、syntaxhighlight.inなら、選択する言語は1つですので数KBほどで実装できるのが魅力でしょうか。

試しに適当に作ってみました。コードはjQuery Snippetから拝借しています。

Sample

ちょっと見にくい設定にしちゃいましたがwデザインは設定で色々と変更できます。プレーンテキストとスイッチできるんですけど、このブログの既存のcssが邪魔して表示が崩れちゃいます。あんまり気にしないで下さい。

  1. $('.two_ul').each(function(i){
  2.   var colsize = Math.round($(this).find("li").size() / 2);
  3. $(this).find("li").each(function(i){
  4.   if (i>=colsize){
  5.   $(this).addClass('right');}
  6.   });
  7. $(this).find('.right').insertAfter(this).wrapAll("<ul class='left'></ul>");
  8. });

使い方


だいたいは分かるかと思いますけど、一応使い方です。コードをペーストし、開閉式にするかどうか、シンタックスハイライトのデザイン、行数をつけるか、ハイライトさせたい行の指定などを設定し、Done!を押すと


こんな感じでjQueryのコードとCSSとマークアップが生成されますので、あとは貼り付ければOKです。

ライブラリのデモページ等に貼るような数行のコードのために従来の重たいSyntax Highlight系スクリプトを使うのはなんだか微妙な気がしますのでこういった手軽な物を覚えておくといいかもですね。ドロップシャドウが若干邪魔ですが、これは自分で消す感じでGOです。

以下より、ぜひお試し下さい。

syntaxhighlight.in

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services