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

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


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

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

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


「SyntaxHighlighter」サンプルコード

以前にも紹介しましたが、あまり理解していなかったのでもう一度

dp.SyntaxHighlighter

サンプルコードなどをブログやHTML中に表示したい場合 コードをそのまま書くと<>などは特殊文字を扱うか、もしくわtextareaタグで表示するなどの方法を用いるほかありません。 そこで、コードを綺麗に表示させたい場合にこのjavascriptが役立ちます。 上記サンプルのようにコードを色別、整理された形で表示することができます。

特徴

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

サポートしている言語

以下のプログラムコードをサポートしています。
  • C#
  • CSS
  • C++
  • VB & VB.NET
  • Delphi, Pascal
  • Java
  • JavaScript
  • PHP
  • Python
  • Ruby
  • SQL
  • XML, HTML, XSLT and any other XML style code

導入方法

http://code.google.com/p/syntaxhighlighter/こちらからダウンロードします。 任意のディレクトリに置いたら をHEAD部に指定します。 shBrushJScript.js は使用するコードによって使い分けてください。 SyntaxHighlighter.css もご自由にカスタマイズしてください。 あとはBODY部に を記述するだけです。 なれると簡単なので試してみてください。
スポンサーサイト

テーマ:プログラミング - ジャンル:コンピュータ

<<FC2ブログでカテゴリ別一覧ページを作成してみよう | ホーム | Google Adsense Sandbox>>

コメント

コメントの投稿


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

トラックバック

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