2017年5月5日金曜日

BloggerにSyntaxHighlighterを使ってソースコードを美しく表示する

SyntaxHighlighterダウンロード

こちらの公式サイトよりダウンロードして下さい
Click here to download」を押してダウントードして下さい

「syntaxhighlighter_3.0.83.zip」で圧縮ファイルがダウンロードできますので解凍して下さい

「syntaxhighlighter_3.0.83」フォルダが出来るのでフォルダごとローカルにコピーしておいて下さい

SyntaxHighlighterをBloggerに設置

テンプテートのhtmlを編集します
</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/shThemeRDark.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/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.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'/>
<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 type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>
  </head>
上記のコードはC#、シェルスクリプト、css、xml、sql,vbに対応しています
4行目~9行目
対応言語の一覧はこちらで紹介しています

読み込むcssによってテーマを変更できます
2行目
cssテーマの種類はこちらで紹介しています

Bloggerは少し特殊なためホスティングを使用してロードしています

サイトにコードを表示するコードを入れる

 
<pre class="brush:xml;auto-links:false;toolbar:false;highlight:[null];first-line:1"> 
    ここに表示させたいコードを記入
</pre>

brush:xml               xml言語
auto-links:false      オートリンク無効
toolbar:false           ツールバー非表示
highlight:[null]        ハイライトしない する場合はhighlight:[1,2]
first-line:1               行番号を1から始める

特殊な記号は変換して記入します
< → &lt;
> → &gt;