新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


SyntaxHighlighterを使ってソースをHTMLに表示してみよう



HTML上でソースを表示したいとなると

<pre>でソースをそのままの状態で記述

したり

&lt;pre&gt;と記述して < や > を記述する

などいろいろとめんどくさい作業が多い


そこで

「SyntaxHighlighter」というJavaScriptが存在するのだ

■特徴
・プログラム毎での特定要素の文字色を変えて表示可能
・各ソースに行番号を付加可能
・IEであれば、”copy to clipboard”のリンクが表示されて公開しているコードの取得も容易
・”view plain”のリンクでテキストエリアでのソースが別画面にて表示
・”print”のリンクでソース部分を印刷することも容易
・JavaScriptオフの状態では、テキストエリアにてコードが表示

などの特徴があり、ソースを補完してHTML上に綺麗に表示してれるのだ


■使い方
http://code.google.com/p/syntaxhighlighter/downloads/list
からsyntaxhighlighterをダウンロードします



HTMLへの記述の仕方としては


<link rel="stylesheet" href="../css/SyntaxHighlighter.css" type="text/css">
<script src="../js/SyntaxHighlighter/Scripts/shCore.js" type="text/javascript"></script>
<SCRIPT src="../js/SyntaxHighlighter/Scripts/shBrushJScript.js" type=text/javascript></SCRIPT>
<SCRIPT src="../js/SyntaxHighlighter/Scripts/shBrushXml.js" type=text/javascript></SCRIPT>
<script type="text/javascript" language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

これを自分の環境にあわせてHEAD部に記述




次にBODY部に

<textarea name="code" class="HTML" cols="60" rows="5">
ソースの内容を記述
</textarea>



これだけ


サンプルというかYahooのYUI紹介ページのソースサンプルとしても利用されているのではっておきます
http://developer.yahoo.com/yui/grids/
スポンサーサイト

テーマ:JavaScript - ジャンル:コンピュータ

<<dojo.jsでブラウザチェック | ホーム | SpryのSAMPLEにある Photo Galleryを使ってみた その3 (編集中・・・)>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kanamehackday.blog17.fc2.com/tb.php/113-a6e858f7
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。