文章の体裁を整えました
他の言語のhighlight方法を追記しました
①各ブログサービスで直接HTMLを編集できるページに移動
bloggerの場合はテンプレート→HTMLの編集で編集画面に遷移できます
②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/shThemeDefault.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/shBrushJava.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<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>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
③class要素付きの<pre>タグで囲めば完了
<pre class="brush: java">
</pre>
で囲みます
以下サンプルです
</pre>
で囲みます
以下サンプルです
public static void main (String[] args) {
System.out.println("test");
}
■注意事項
- 今回はJavaを使用しましたが、他にもいろいろなソースコードを表示するためのスタイルが用意されています shBrushJava.jsの部分をshBrushRuby.jsに変更して等追記することで他の言語に対応可能です http://javascript.webcreativepark.net/library/syntaxhighlighterにbrushのリストが記載されております
- bloggerの場合、プレビューまで表示しないと反映されているかどうかがわかりません（HTMLと作成の切り替えだけではわかりません）
- 直接CSSを編集する方法はここでは紹介しませんが、bloggerでも頑張ればできるようです
■参考サイト
0 件のコメント:
コメントを投稿