★゜・。。・゜゜・。。・゜☆ 2011年03月26日 ☆゜・。。・゜゜・。。・゜★
SyntaxHighlighterでソースコードを見やすく表示
・ASCII.jp：技術系サイトに必需品！ ソースコードは鮮やかに
・ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」｜caraldo.net | WebとiPhoneとロードバイクが大好き！
などを参考に、SyntaxHighlighterを実装させてみました。
さっそく、<head></head>内に追加したコードを書いてみると、
いままで
ですが、ここまでくるのにちょっとした落とし穴が。
各単語を区切るために<code></code>（本当は<span></span>かもしれないですが、なぜか<code></code>になっています）で囲まれているのですが、
WordPressで<code>タグを有効にするには ≫ マイペースのLinux
にもあるように、スタイルシートを
としていたので、各単語の切れ目ごとに改行されてしまいました。
また、背景に色や影を敷いたり罫線を付けたりさせていたので、かなり派手な装飾に。
ここで使っているSyntaxHighlighterは
<div class="syntaxhighlighter"></div>
で囲まれているので、
などで初期化して、ようやく思った表示になりました。
といっても、まだ少し変なところがあるので、その修正と、余裕ができたらカスタマイズしてゆきたいと思います。
どうしようもなく崩れている場合は「F5」を押したら直るかも？
・ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」｜caraldo.net | WebとiPhoneとロードバイクが大好き！
などを参考に、SyntaxHighlighterを実装させてみました。
さっそく、<head></head>内に追加したコードを書いてみると、
<!-- Syntax Highlighter --> <script type="text/javascript" src="http://charlie432.fool.jp/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="http://charlie432.fool.jp/syntaxhighlighter/scripts/shBrushXml.js"></script> <script type="text/javascript" src="http://charlie432.fool.jp/syntaxhighlighter/scripts/shBrushCss.js"></script> <script type="text/javascript" src="http://charlie432.fool.jp/syntaxhighlighter/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="http://charlie432.fool.jp/syntaxhighlighter/scripts/shBrushPhp.js"></script> <link type="text/css" rel="stylesheet" href="http://charlie432.fool.jp/syntaxhighlighter/styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="http://charlie432.fool.jp/syntaxhighlighter/styles/shThemeDefault.css"/> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'http://charlie432.fool.jp/syntaxhighlighter/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> <!-- /Syntax Highlighter -->
いままで
<!-- Syntax Highlighter -->
<script type="text/javascript" src="http://charlie432.fool.jp/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="http://charlie432.fool.jp/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://charlie432.fool.jp/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://charlie432.fool.jp/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://charlie432.fool.jp/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<link type="text/css" rel="stylesheet" href="http://charlie432.fool.jp/syntaxhighlighter/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://charlie432.fool.jp/syntaxhighlighter/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://charlie432.fool.jp/syntaxhighlighter/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- /Syntax Highlighter -->
と見せていたものです。ですが、ここまでくるのにちょっとした落とし穴が。
各単語を区切るために<code></code>（本当は<span></span>かもしれないですが、なぜか<code></code>になっています）で囲まれているのですが、
WordPressで<code>タグを有効にするには ≫ マイペースのLinux
にもあるように、スタイルシートを
code {
display:block;
}
としていたので、各単語の切れ目ごとに改行されてしまいました。
また、背景に色や影を敷いたり罫線を付けたりさせていたので、かなり派手な装飾に。
ここで使っているSyntaxHighlighterは
<div class="syntaxhighlighter"></div>
で囲まれているので、
.syntaxhighlighter code {
display:inline;
background-color:transparent;
}
などで初期化して、ようやく思った表示になりました。
といっても、まだ少し変なところがあるので、その修正と、余裕ができたらカスタマイズしてゆきたいと思います。
どうしようもなく崩れている場合は「F5」を押したら直るかも？
