2013年2月11日月曜日

ソースコードを華麗に載せましょうか。(Syntax Highlighter)

さて、無事Syntax Highlighterを使ってソースコードを綺麗に載せられました!

ということで、そのSyntax Highlighterの導入方法をご紹介。

How to Add Syntax Highlighter(v3) to Blogger Blogs

こちらのSyntax Highlighterの導入タグを生成してくれる
Syntax Highlighter Scripts Generator
を使います!



  1. Syntax Highlighter Scripts Generatorにアクセス。
  2. Select a Themeでテーマを選択(ご自由に)
  3. Select Brushesで使用するプログラミング言語もしくはスクリプト言語を選択
  4. Generateボタンを押す
  5. 生成されたソースをコピー
  6. 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/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.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/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.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/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.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.all();
</script>


ここまでで準備OK!

そしたら、あとは

<pre class='brush:[brushname];'>

  <!--ここに載せたいソースコード-->

</pre>


具体的には

<pre class='brush: java;'>

public class HelloWorld {
  public static void main (String[] args) {
    System.out.println("Hello World !!");
  }
}   

</pre>


結果、こうなる!

public class HelloWorld {
  public static void main (String[] args) {
    System.out.println("Hello World !!");
  }
}   

JavaScriptのファイルの参照先が外部リンクだから、
 もしかしたら勝手にサイトが変えられてしまう!?
...なんてことも可能性があるが、そんなこといったてしょうがないですねw
使わせてもらってるので感謝です。


0 件のコメント:

コメントを投稿