2016年3月9日水曜日

Bloggerにソースコード等を載せるためにSyntaxHighlighterを導入してみた


今後、ブログでソースコードやコマンドラインを載せるためにSyntaxHighlighterの導入方法について少し勉強しました。

こちらがSyntaxHighlighterの公式ページ
英語だしよくわからないので、ググってみた。
失敗例と成功例をば。


まず、Bloggerのテンプレート設定画面に行きHTMLの編集を選ぶ。

1.失敗例
<head>～</head>を探し、</head>の直前に
<!--SYNTAX HIGHLIGHTER-->
    <link href="https://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css">
    <link href="https://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css" rel="stylesheet" type="text/css">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript">
    <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript">
    <script language='javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.config.clipboardSwf = [http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf];
      SyntaxHighlighter.all();
    </script>
を入れるだけで導入できるらしい。
しかし、上手くいかなかった。

2.成功例
こちらでも<head>...</head>を探す。そして、</head>の直前に
<!--SYNTAX HIGHLIGHTER-->
<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/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
を挿入する。次に、<body>...</body>を探し、</body>の直前に
<!--SYNTAX HIGHLIGHTER-->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.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/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';SyntaxHighlighter.all();
</script>
を挿入して完了。

投稿方法
投稿する際には
<script type='syntaxhighlighter' class='brush: ***'><![CDATA[
...
コードの内容
...
]]></script>
とします。ここで***はコードの言語を書きます。たとえば、上記には「html」と指定しています。
対応言語はこちらのBrush aliasesのところに書いてあります。
注意点としては、]]>を記述する場合は]]&gt;、</script>を記述する場合は&lt;/script>に変換する必要があるらしいです。

また、もう一つの投稿方法として
<pre class='brush: ***'>
...
コードの内容
...
があります。しかし、このコードはエスケープと呼ばれる処理をする必要があります。
ま、ここのようなサイトで簡単に変換してくれるんですけどね。

SyntaxHighlighterはプレビューでは表示されないので公開するまで確認できないのが難点です。

以上、導入に苦労した件でした。

表示のスタイル変更についてはこちら

参考
・http://moririn-web.blogspot.jp/2010/03/bloggersyntax-hilighter.html
・http://www.howtonote.jp/syntaxhighlighter/index3.html
・http://www.youngflavor.net/2012/04/82/
投稿者 時刻:
ラベル:

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )