niwadesign

ホームページ制作のネタ発信

javascript

ソースコード表示に便利なsyntaxhighlighter

投稿日:2008/4/15 火曜日 更新日:

ソースコード表示に便利なsyntaxhighlighter

ブログに貼り付けたソースを見やすくしたいため色々調べてみるとsyntaxhighlighterがいろんなサイトで使われていたのでご紹介。

DL:http://code.google.com/p/syntaxhighlighter/

対応言語
C,C++,C#
CSS
Delphi
Java
JavaScript
PHP
Python
Ruby
SQL
VB
XML/HTM

使い方はとっても簡単。
<pre></pre>の間に表示したいコードを書きます。
<pre>のclassにhtmlやcssを書くだけ。

<pre name=“code” class=“html”>
ここにコードを書く。
</pre>
<link type=“text/css” rel=“stylesheet” href=“Styles/SyntaxHighlighter.css”></link>
<script language=“javascript” src=“Scripts/shCore.js”></script>
<script language=“javascript” src=“Scripts/shBrushXml.js”></script>
<script language=“javascript” src=“Scripts/shBrushCss.js”></script>
<script language=“javascript”>
dp.SyntaxHighlighter.ClipboardSwf = ‘Scripts/clipboard.swf’;
dp.SyntaxHighlighter.HighlightAll(‘code’);
</script>

サンプル

<a href="http://www.niwadesign.jp/">ニワデザイン</a>

※Word Pressなどで使う場合はjavascript部分はfooter.phpに書いときましょう。

-javascript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

iPhone用htmlのヘッダー要素のルールβ版

viewportは幅を指定するためのもの。 javascript部分はアドレスバーを非表示(画面の上に隠す)にするためのもの。 <link rel="apple-touch-icon& …