2013年3月19日火曜日

Bloggerにソースコードを表示

ソースコードを綺麗に表示するには、
『SyntaxHighlighter』を使用すると良いようです。

こちらを参考にさせて頂きました。

すぐやりたい!という人は、以下でできます。

1. Bloggerのメニューから、テンプレート > HTMLの編集
2. </head>の直前に、以下を追記し、保存。
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript"></script>
<script language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
3. Bloggerのメニューから投稿、『作成』ボタンの横にある『HTML』を選択
4. 『<』を『&lt;』に置換したソースコードを以下のように貼り付ける

<pre class="brush: ◯; first-line: 1; highlight: [,];" title="">
ソースコード
</pre>

※◯に言語を指定、例えばJavaなら『brush:java;』、C++なら『brush:cpp
 この指定が、2.で4-15行目に読み込んでいるscriptに対応付けられます。
 詳細は参考サイトをご覧ください

※highlight: [,];で行番号を指定すると、行を強調できます。
 2.では、highlight: [4,5,6,7,8,9,10,11,12,13,14,15];としています。

0 件のコメント:

コメントを投稿