2012年2月10日金曜日

Syntax Highlighter

ブログにコードを貼り付けるの面倒だな

個人情報云々の件もあるしBlogger止めるか

お、なんかいいのある!

というわけで忘れそうなのでメモメモ。

How to Add Syntax Highlighter(v3) to Blogger Blogs

(1)How to Install Syntax Highlighter in Blogger?GENERATE SCRIPTSボタンをクリック
(2)Select a Themeでテーマを選択
(3)Select Brushesで適用したい言語を選択(複数可)
(4)Generateボタンをクリック
(5)Copy To ClipBoardボタンをクリック
(6)Bloggerの[デザイン]→[HTMLの編集]


(7)テンプレートを編集のところから</head>を見つけて直前に(5)の内容をコピペ
</b:template-skin>
    <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/shBrushCpp.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/shBrushPlain.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script language='javascript' type='text/javascript'>
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.all();
    </script>
</head>

(8)テンプレートを保存ボタンをクリック

※デザインを変更すると(1)からやり直し

あとはブログを投稿する際にコード部分を下記のように記述。

<pre class='brush:[brushname];'>
    <!--Put Your Code Here (must be HTML escaped)-->
</pre>

オプション部分に関しては下記が参考になった。
SyntaxHighlighter - ソースコードを見やすく表示させるJavaScript

※"<"や">"は"&lt;"や"&gt;"にしておく(&は半角)

0 件のコメント :

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。