BloggerのDynamicViewでSyntaxHighlighterを使う
参考にしたのはこちらのブログ。
http://kevin-junghans.blogspot.jp/2013/01/adding-syntaxhighlighter-to-blogger.html
毎度記事末尾にコード書くのが面倒ですがまあよしとします。
http://kevin-junghans.blogspot.jp/2013/01/adding-syntaxhighlighter-to-blogger.html
- SyntaxHighlighterのスクリプトを作る こちらのブログSyntax Highlighter Scripts Generatorで簡単に作成できます。 私はこんな感じになりました。
- ブログのヘッダにスクリプト埋め込む ブログ設定の「テンプレート」→「HTMLの編集」でコード内に上のスクリプトを貼り付けます。</head>の直前に書くようにとのこと。
- 投稿記事のHTMLソースにコードを埋め込む
- あとは普通に使うだけ ↓はSyntaxHighlighterのホームページから拝借してきたサンプルコード。こんな感じにHTMLで本文を書くときちんと表示されます。
<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/shBrushBash.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/shBrushJScript.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/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/shBrushXml.js' type='text/javascript'/> <script language='javascript' type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
<script type="text/javascript"> SyntaxHighlighter.highlight(); </script>
<pre class="brush: js"> /** * SyntaxHighlighter */ function foo() { if (counter <= 10) return; // it works! } </pre>
毎度記事末尾にコード書くのが面倒ですがまあよしとします。