2013年3月30日土曜日

BloggerでSyntax Highlighterを使う方法

Syntax Highlighter。
↓こんなやつです。


まず、Bloggerのテンプレートを修正する作業です。
 ・ Syntax Highlighter Scripts Generatorというサイトがあるので、テーマを選んだり、ソースコードの種類を選んだりしたあと、 「Generate」ボタンをクリックして、コードを生成します。
 ・生成されたコードをコピーして、Bloggerのテンプレートのの直前に、そのコードをペーストします。
 そうそう。
 ?を表示させたくないときは、 ペーストした、
     SyntaxHighlighter.config.bloggerMode = true;
 の下に、
     SyntaxHighlighter.defaults['toolbar'] = false;
を入れておきましょう。 
以上で、テンプレートの準備は完了です。

使うときは、preタグを指定します。

<pre class="brush: html"><script src="http://www.blogger.com/static/v1/jsbin/2321381434-lbx__fr.js" type="text/javascript"></script></pre>




<pre class="brush: html;first-line: 1; highlight: [10,];" title=""><link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();
</script></pre>











こんな感じです。

0 件のコメント:

コメントを投稿