ブログテンプレート必須編集項目5 SyntaxHighlighter

ブログでソースコードを記載する可能性があるので、SyntaxHighliterを導入しておきます。

SynataxHighliterの導入方法については元祖エボリアヌーメで紹介してあるので、そちらを読んでください。

元祖エボリアヌーメ「SyntaxHighlighter を導入してみた

SyntaxHighliterを導入しなくてもソースコードは記載できます。その場合は <pre> タグを使って記載するのですが、その場合は下記のようになります。

例:画像のソースコードの表示方法
no-image.jpg

<pre>
<img src="http://blog-imgs-58.fc2.com/e/v/o/evolianume/no-image.jpg" alt="no-image.jpg" border="0" width="100" height="100" />
</pre>


SyntaxHighliterを使用するとソースコードが下記のように表示されます。

<pre class="brush: html;">
<img src="http://blog-imgs-58.fc2.com/e/v/o/evolianume/no-image.jpg" alt="no-image.jpg" border="0" width="100" height="100" />
</pre>


短いので違いが分かりにくいかもしれませんが、複数行にわたる時は読みやすくなると思われます。

以下、追記部分に今回ブログテンプレートに追加したソースコードを記載します。


<!-- ▼ SyntaxHighlighter head 開始 ▼-->
<link type="text/css" rel="stylesheet" href="http://blog-imgs-58.fc2.com/e/v/o/evolianume/shCore.css" />
<link type="text/css" rel="stylesheet" href="http://blog-imgs-58.fc2.com/e/v/o/evolianume/shThemeDefault.css" />
<script type="text/javascript" src="http://blog-imgs-58.fc2.com/e/v/o/evolianume/shCore.js"></script>
<script type="text/javascript" src="http://blog-imgs-58.fc2.com/e/v/o/evolianume/shAutoloader.js"></script>
<script type="text/javascript" src="http://blog-imgs-58.fc2.com/e/v/o/evolianume/shLegacy.js"></script>
<script type="text/javascript" src="http://blog-imgs-58.fc2.com/e/v/o/evolianume/shBrushXml.js"></script>
<!-- ▲ SyntaxHighlighter head 終了 ▲ -->




<!-- ▼ SyntaxHighlighter body 開始 ▼-->
<script type="text/javascript">
SyntaxHighlighter.autoloader
(
"xml xhtml xslt html http://blog-imgs-58.fc2.com/e/v/o/evolianume/shBrushXml.js",
"css http://blog-imgs-58.fc2.com/e/v/o/evolianume/shBrushCss.js",
"js jscript javascript http://blog-imgs-58.fc2.com/e/v/o/evolianume/shBrushJScript.js"
);
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
<!-- ▲ SyntaxHighlighter body 終了 ▲ -->

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

コメントの投稿

非公開コメント


ページ下部までご覧いただきありがとうございました。