ソースコード表示の体裁を整えるJavaScript、syntaxhighlighter。１年も前に話題になったものですが、なかなか良かったのでFC2ブログでの導入メモを公開。

syntaxhighlighterを適用すると、ソースコードがこのように表示されます。

<!--plugin-->
<!--plugin_first-->
	<h3 style="text-align:left">カテゴリー</h3>
	<div style="text-align:left">     

	</div>
	<ul>
	<!--category-->
		<li><a href="http://fc2blogshop.blog13.fc2.com/blog-category-1.html" title="日記">日記(12)</a></li>
		<li><a href="http://fc2blogshop.blog13.fc2.com/blog-category-2.html" title="ニュース">ニュース(23)</a></li>
	<!--/category-->
	</ul>
	<div style="text-align:left">    
	</div>
<!--/plugin_first-->
	・
	・
	・
<!--/plugin-->

CSSはこんな感じ。

.sample1 li
{
	list-style: none;
	background:url(http://blogxx.fc2.com/file/xxxx.gif);
	background-repeat: no-repeat;
	padding: 0 0 0 17px;
}

ソースコードをダウンロード

• syntaxhighlighter

上記のページからファイルをダウンロード、解凍すると、

+Scripts
- shBrushCSharp.js
- shBrushCpp.js
- shBrushCss.js
- shBrushDelphi.js
- shBrushJScript.js
- shBrushJava.js
- shBrushPhp.js
- shBrushPython.js
- shBrushRuby.js
- shBrushSql.js
- shBrushVb.js
- shBrushXml.js
- shBrushCore.js
- shBrushCSharp.js
+ Styles
- SyntaxHighliter.css
+ Uncompressed
- shBrushCSharp.js
- shBrushCpp.js
- shBrushCss.js
.....

と展開されます。まずはScriptsフォルダの中から、ブログで書きそうなソースコード用ファイルをファイルアップロードからアップロードします。

ファイルアップロード

たとえば私の場合、JavaScriptとXml(html含)、CSS用のファイルをアップロードしました。

アップロード to fc2ブログ：
- shBrushCss.js
- shBrushJScript.js
- shBrushXml.js

続けて、共通して必要なshBrushCore.js、表示用のCSSファイルもアップロード。

アップロード to fc2ブログ：
- shBrushCore.js
- SyntaxHighliter.css

テンプレートの設定

次にテンプレートを修正。適用中のテンプレートhead部分に

<link href="file/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />

を入力。次に

<%topentry_more>
<script type="text/javascript" src="file/shCore.js"></script> 
<script type="text/javascript" src="file/shBrushCss.js"></script>  
<script type="text/javascript" src="file/shBrushXml.js"></script> 
<script class="javascript">  
	dp.SyntaxHighlighter.HighlightAll('code');  
</script>  

さきほどアップロードしたファイルを<%topentry_more>の下に記述します。たとえば[shBrushPhp.js]もアップロードした場合は、

<script type="text/javascript" src="file/shBrushPhp.js"></script>

も記述しておきます。

記事での書きかた

<pre><textarea name="code" class="xml" cols="60" rows="5" id="code">
・・・ソースコード
</textarea></pre>

改行の扱いを「HTMLタグのみ」にして、記事を保存するとソースコードの表示の変化が分かります。

CSSコードを記述したい場合は

<pre><textarea name="code" class="css" cols="60" rows="5" id="code">
・・・CSS
</textarea></pre>

class="css"とします。

なお、テンプレートCSSエリアでpre要素が定義されている場合は、定義を削除したり、編集する必要があります。

-------追記
あれ？IEだとソースコードの横スクロールができない!?どうしてだろう...
FC2変数ハイライト用スクリプト、あったら便利そうですね。

参考

▼便利なソースコード表示用JavaScript （dp.SyntaxHighlighter）
▼dp.SyntaxHighlighter-コード表示に役立つJavaScript

前後の記事

最近の記事

トラックバック

この記事へのトラックバックURL：
http://fc2blogshop.blog13.fc2.com/tb.php/896-fd006816

コメント