life x web Technology Design » コード http://www.lifexweb.com/tech コミュニケーションとテクノロジーを考えるブログ Fri, 18 Nov 2011 00:59:56 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 SyntaxHighlighterを導入してコードをきれいに表示 http://www.lifexweb.com/tech/2009/03/syntaxhighlighter%e3%82%92%e5%b0%8e%e5%85%a5%e3%81%97%e3%81%a6%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e3%81%8d%e3%82%8c%e3%81%84%e3%81%ab%e8%a1%a8%e7%a4%ba/ http://www.lifexweb.com/tech/2009/03/syntaxhighlighter%e3%82%92%e5%b0%8e%e5%85%a5%e3%81%97%e3%81%a6%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e3%81%8d%e3%82%8c%e3%81%84%e3%81%ab%e8%a1%a8%e7%a4%ba/#comments Mon, 23 Mar 2009 00:53:03 +0000 Hideya Kato http://www.lifexweb.com/tech/?p=101 大きなこと言っておきながらいきなりですが、一応技術系のブログという事でプログラムのコードを載せる際にきれいに表示できるよう、SyntaxHighterを導入してみます。

以下、実際に導入するスクリプト。いかがでしょう？
<script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

横に長いコードだと見づらいですね。改善の余地ありです、、。

*追記(2009/03/23 11:00)：WordPressのテーマ変えたら表示されなくなっちゃいました。現在確認中。
*追記2（2009/03/23 13:30）：ただ単にスクリプトのパスがなかっただけの模様。いちいち入れるのは面倒なのでプラグイン版導入。

]]> http://www.lifexweb.com/tech/2009/03/syntaxhighlighter%e3%82%92%e5%b0%8e%e5%85%a5%e3%81%97%e3%81%a6%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e3%81%8d%e3%82%8c%e3%81%84%e3%81%ab%e8%a1%a8%e7%a4%ba/feed/ 0