HTML内にタグやCSSを行番号や背景色付で見やすく表示できる「SyntaxHighlighter」

よくブログやサイトに、HTMLタグやCSSをわかりやすく表示されているのを見かけます。

いざ自分がやろうと思うと「？？？」

どーやるんだ…（T▽T）

 

「HTML　行番号付　CSS」等で検索すると、すぐに結果が出てきました☆

みなさん、丁寧に解説してくださっているので助かります（T▽T）

 

「SyntaxHighlighter」という名前だそうです。

 

《PRE》コードを使って、行頭番号付＆ステキ＆綺麗に！Webサイト上にソースコードを表示してくれるんだそうです！

 

ソースを別窓表示したり、クリップボードに保存やら印刷も可能なスグレものだということです。

 

ではでは、初心者の私も使ってみたいと思います(*´▽｀*)

 

▼ダウンロードはこちら

http://www.netyasun.com/syntaxhighlighter/

 

↑のページに飛ぶと、↓のような画面です。

ほんのちょっと「アレ？ダウンロードはどこだ？」なんて思いましたが、右端にちいちゃく「download」というリンク発見！ゝ(´∀｀)／

 

click here ti downloadとあるので、クリックしてダウンロードします☆

 

■解凍後の内容（2015年2月現在 Version 3.0.83）

 

これらをトップディレクトリに入れます。

 

そして、使用したいファイル（＊＊フォルダ／index.html）のhead内に、以下をコピペします。

※階層の指定はご自分の設定に合わせてください。

 

ダウンロードするまではもちろんサクサクできたのですが、なぜだかDreamweaverでシンタックスエラーが出たり、ページを更新すると「Can't find brush for～」と表示されたりしてしまい、しばらく時間を要しましたが、

 

Dreamweaverでのシンタックスエラーは、私がコピーをしてきた元サイトのコードが間違っていたようで、scriptの閉じタグが

＜/script/＞

となっていたので、そこを修正したら上手くいきました♪

 

表示したいHTMLやCSSを　《pre》　～　《/pre》　で囲んでください。

 

preタグには、「class="brush: css; title: ; notranslate" title=""」と記述するようです。

 

色などもお好みで変えられるみたいなので、そのうちやってみようと思います^^

 

千里の道も一歩から！

 

はじめはなんだか難しそうだな、と思いましたが、やればできました(*´▽｀*)