SyntaxHighlighter ブログカスタマイズ

bloggerでSyntaxHighlighterを使う方法

導入

まずは、head内にSyntaxHighlighterを導入するために下記を記述する。今回は、CSSとHTMLの導入を行う。

 
<!-- SyntaxHighlighter導入 -->
<!-- SyntaxHighlighter本体の記述 -->
<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/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<!-- bloggerで使用するための記述 -->
 <script type='text/javascript'>
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.all()
</script>

記事内での記述方法

<pre class="brush:[Brush名]">
　CSSやHTML文
</pre>

※CSSやHTML文の特殊文字『<』、『>』はコード変換する必要がある。


参考サイト様その１参考サイト様その２

関連記事

スポンサーリンク

スポンサーリンク