Bloggerでも行番号と共に色分け!!SyntaxHighlighterの導入


プログラミング系の技術系ブログを書く人は、ソースコードをブログ記事に載せる機会も多いと思います。
そこで、よく使われているのが『SyntaxHighlighter』(シンタックスハイライター)です。

この『SyntaxHighlighter』(シンタックスハイライター)は、ソースコードを行番号と共に色分けしてくれて
とてもソースコードを見やすく表示してくれます。

今回は、このブログでもお世話になっている『Blogger』への導入方法です。

導入方法はとても簡単で、まずは下記のサイトで必要なソースコードをジェネレートしましょう







syntax-highlighter-scripts-generator
http://www.way2blogging.org/widget-generators/syntax-highlighter-scripts-generator



『Select a Theme』では、色分けのテーマを選択する事が出来ます。

現在用意されているテーマは、
『Default』『Django』『Eclipse』『Emacs』『Fade To Grey』『Midnight』『RDark』
となっており、それぞれのスタイルは下記にて確認する事が出来ます。

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/



『Select Brushes』では、実際に色分けさせたいコードの種類を選択します。
あまり欲張りすぎて沢山選択しすぎても、無駄なJavaScriptを読み込む事になるので
あまりオススメ出来ません。

必要になったら後から追加する事も可能ですので、始めのうちは必要最低限に留めましょう。

コードの選択を終えたら下部の『Generat』ボタンを押す事で、適用に必要なコードを取得する事が出来ます。


取得したコードは、Bloggerのテンプレート>HTMLの編集で、</head>の直前に埋め込み、保存すれば事前準備は終了です。

後は記事を書く時に下記のコードをHTMLの編集で埋め込んで下さい。




実際に色分けしたいコードを記述

brush:の後には言語名を入れて下さい。



タイトルが必要な時は title="タイトル"に記述して下さい。



『brush:』の後に言語名を入れる事で、言語に適した色分けで表示されるようになります。
ちなみに、現在選択中のテーマは『Emacs』です。

ギークな感じがたまらなく好きで気に入って使っています。

皆さんもコードを見やすく、そしてかっこよく表現して下さい。
Bloggerでの『SyntaxHighlighter』(シンタックスハイライター)導入手順でした。

コメントをお待ちしています

人気の投稿

Category

Algorithm (2) Android (8) ASP/aspx (1) Blogger (2) C/C++ (1) Chrome (5) CSS (9) Firefox (4) Fortran (1) Google (9) GoogleMap (2) HTML (12) IE (3) Information (4) iOS (2) iPhone/iPad/iPod (2) Java (6) JavaScript (16) jQuery (9) JSP (1) LifeRecipe (5) Linux (2) Macintosh (2) MapKit (4) Marketing (7) MySQL (3) NAMAZU (2) Objective-C (7) Other (7) Perl (1) PHP (9) Python (1) RSS/Atom (2) Ruby (1) Safari (2) SEO (11) Smarty (2) SQL (2) Tex (1) Three.js (1) Twitter (1) TwitterLog (313) UIKit (5) Unix (1) VBA/VBS (1) Windows (5) WordPress (3) Writing (5) XAMPP (1) XML (1) Yahoo (2) ZendFramework2 (14)