ということで、そのSyntax Highlighterの導入方法をご紹介。
How to Add Syntax Highlighter(v3) to Blogger Blogs
こちらのSyntax Highlighterの導入タグを生成してくれる
Syntax Highlighter Scripts Generator
を使います!
- Syntax Highlighter Scripts Generatorにアクセス。
- Select a Themeでテーマを選択(ご自由に)
- Select Brushesで使用するプログラミング言語もしくはスクリプト言語を選択
- Generateボタンを押す
- 生成されたソースをコピー
- 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 件のコメント:
コメントを投稿