こんにちは。
ある特定の曲が頭の中をぐるぐる回っています♪
よくブログやサイトで、行番号や背景に色が付いて、HTMLやCSSがきれいに表示されているのを見ます。
自分がサイトに、HTMLを記述しようとしたときに「ハッ」と気が付きました。
今作業しているHTMLファイルに、
「例」としてHTMLやCSSを記述したいとき、ページに表示させたいときにどうやるんだろうという疑問が浮かびました。
いろいろ調べてみると、
「SyntaxHighlighter」で解決できることがわかりました(*^^*)/
《PRE》コードを使って、行頭番号付＆ステキ＆綺麗に！Webサイト上にソースコードを表示してくれます。
▼「SyntaxHighlighter」ダウンロードはこちら
http://www.netyasun.com/syntaxhighlighter/
↑のページに飛ぶとほんのちょっと「アレ？ダウンロードはどこだ？」なんて思いましたが、右端にちいちゃく「download」というリンク発見！ゝ(´∀｀)／
“click here ti download”とあるので、クリックしてダウンロードします☆
■解凍後の内容（2015年2月現在 Version 3.0.83）
これらをトップディレクトリに入れます。
そして、使用したいファイル（＊＊フォルダ／index.html）のhead内に、以下をコピペします。
※階層の指定はご自分の設定に合わせてください。
<pre class="brush: css; title: ; notranslate" title=""> <link type="text/css" rel="stylesheet" href="../syntaxhighlighter_3.0.83/styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="../syntaxhighlighter_3.0.83/styles/shThemeDefault.css"/> <script type="text/javascript" src="../syntaxhighlighter_3.0.83/scripts/shCore.js"></script> <script type="text/javascript" src="../syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script> <script type="text/javascript" src="../syntaxhighlighter_3.0.83/scripts/shBrushCss.js"></script> <script type="text/javascript" src="../syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="../syntaxhighlighter_3.0.83/scripts/shBrushPhp.js"></script> <script type="text/javascript">SyntaxHighlighter.all();</script>
ダウンロードするまではもちろんサクサクできたのですが、なぜだかDreamweaverでシンタックスエラーが出たり、ページを更新すると「Can’t find brush for～」と表示されたりしてしまい、しばらく時間を要しましたが、Dreamweaverでのシンタックスエラーは、私がコピーをしてきた元サイトのコードが間違っていたようで、scriptの閉じタグが
</script/>
となっていたので、そこを修正したら上手くいきました♪
表示したいHTMLやCSSを 《pre》 ～ 《/pre》 で囲んでください。
preタグには、「class=”brush: css; title: ; notranslate” title=””」と記述するようです。
色などもお好みで変えられるみたいなので、そのうちやってみようと思います^^
▼同様の内容をコチラにも掲載していますのでよろしければどうぞ♪
