ソースコードをHTMLできれいに表示する方法としてSyntaxHighlighterという選択肢があります。
鉄板ですね。
SyntaxHighlighterをBloggerに導入する方法をまとめてみました。
ステップは下記3ステップ
1.テーマ（テンプレート）のカスタマイズ
テーマ→HTMLの編集 にて編集画面に移動します。
移動したら<head>タグのところに以下の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/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/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.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/shBrushPhp.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/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.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();
SyntaxHighlighter.defaults['toolbar'] = false;
</script>
なお上記HTMLのうち使用しない言語（shBrushxxx）は削除します（3行目以降のscriptタグ）。2.スタイルの選択
2行目のlinkタグのshThemeDefault.cssの部分を変更することで表示のスタイルを変更することができます。スタイルはSyntaxHighlighterのテーマページにて確認できます。ちなみに本ブログはDefaultにて表示しています。Default：shThemeDefault.css
Django：shThemeDjango.css
Eclipse：shThemeEclipse.css
Emacs：shThemeEmacs.css
Fade To Grey：shThemeFadeToGrey.css
Midnight：shThemeMidnight.css
RDark：shThemeRDark.css
3.ソースコードの記述
<pre>タグを使って書く方法と<script>タグを使って書く方法の2種類ありますが、当ブログでは<pre>タグを使って各方法を説明します。
<pre class="brush:[言語指定];"> //コードを書く </pre>
preタグで囲った中にソースコードを記載します。なお、「<」や「>」などはエスケープ処理をします。私は面倒なので上記ソースを「HTML」編集画面で張り付けた後、「作成」画面にもどってソースを「//コードを書く」の部位にコピペしてます。
言語指定はこちら
| Brush name | Brush aliases | File name |
|---|---|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | coldfusion | shBrushColdFusion.js |
| C++ | cpp, c | shBrushCpp.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | html, xhtml, xml, xslt | shBrushXml.js |
モバイルデバイスでのレイアウトの適用について
標準の設定だとモバイルデバイスで表示した際には「SyntaxHighlighter」は適用されません。適用するには
「テーマ」→「モバイルの歯車」→「 はい。モバイル端末でモバイル テーマを表示する。 」→「モバイル テーマの選択」→「カスタム」に設定します。
0 件のコメント:
コメントを投稿