気付かれないように: Bloggerでコードをかっこよく表示させる（SyntaxHighlighter導入）

・・・ということで、いずれコーディングとかできるようになったら、その時学んだコードをblogに書いたりとかしたなと思うわけで。
よく技術系ブログとか読んでいると、ただコードをコピペしましたって感じじゃなくて、ちゃんとエディタ風に強調がかかってたりするのがあるじゃないですか。
それをBloggerでやるための準備を書きます。
SyntaxHighlighteとかってのを導入します。

まず、Bloggerのダッシュボードから「デザイン」タグ→「HTMLの編集」を選択します。
<head>中に以下のコードを追加。</head>の直前がいいでしょうとのこと。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.config.clipboardSwf='http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

これで準備は完了。
あとは記事投稿の時にHTML形式で以下の様に入力してあげればOK。

<pre class="brush: xxxx">
   ソース
</pre>

xxxxの所は、言語によって変更してあげる。
対応している言語は本家のサイトにあるので参照のこと。
なお、"<"や">"を書きたいときは、それぞれ"<"や">"に書き換えてあげる必要があるので注意。

そんな感じ－。

気付かれないように

2011年9月20日火曜日

Bloggerでコードをかっこよく表示させる（SyntaxHighlighter導入）

0 件のコメント:

コメントを投稿