(09.01.15 追記、記事の最後に加えております。)

ブログの中でたまにコードを書いたりしますが、
<h1>うっかりさん</h1>
と表示させたいところをうっかり特殊文字に変換させるのを忘れて

うっかりさん

みたいにしてしまうことがあります。面倒です。
そこで調べてみると、わざわざ変換させずともソース表示をしてくれるJavaScriptのプログラム"dp.SyntaxHighlighter"というものがあったので、早速試してみることに。以下導入の際のメモになります。

http://code.google.com/p/syntaxhighlighter/からファイルをダウンロード
解凍したもの（"dp.SyntaxHighlighter"フォルダ）をサーバーにアップロード
ブログ（サイト）の<head>～</head>内に以下のように記述します。
ファイルへのパスは環境に応じて変更してください。
<br /><head> <br /> <br /><link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"> <br /><script type="text/javascript" src="Scripts/shCore.js"></script> <br /> <br /> <br /> <br /><script type="text/javascript" src="Scripts/shBrushJScript.js"></script> <br /><script type="text/javascript" src="Scripts/shBrushCss.js"></script> <br /><script type="text/javascript" src="Scripts/shBrushPhp.js"></script> <br /><script type="text/javascript" src="Scripts/shBrushXml.js"></script> <br /> <br /><script type="text/javascript"> <br />window.onload = function () { <br />dp.SyntaxHighlighter.ClipboardSwf ='Scripts/clipboard.swf';dp.SyntaxHighlighter.HighlightAll('code'); <br />} <br /></script> <br /> <br /></head>
あとは<body>～</body>内に表示させたいソースコードを書き、これを以下のように<textarea name="code" class="○○">のような形で囲めばOK
<br /><body> <br /><textarea name="code" class="xhtml"> <br /><h1>うっかりさんもこれで安心！</h1> <br /></textarea> <br /></body> <br />

以上で使えるようになるかと思います。なお、上の手順3ではxhtml,css,php,JavaScriptのみ設定しましたが、C,C++,C#,Delphi,Java,Python,Ruby,SQL,VBといった言語にも対応しているようです。ファイルがあるので同様に繋ぐだけです。

また、手順4の<textarea name="code" class="○○">の○○部分、ここは対応させる言語が入ります。CSSコードの表示なら、class="css"のように。詳しくはコチラより確認ください。

色使いなども"SyntaxHighlighter.css"からアレンジ可能です。あなた色に染めてください。

参考サイト様
・dp.SyntaxHighlighter
・Forty-N-FiveBlog"ブログ上にソースを記述する際、美しく表示する方法"

(09.01.15 追記)
bloggerの設定には、html上の改行を<br>にするかしないかというものがあります。僕はこれを"する(on)"にしているため、上で示したコード上に<br>が沢山付いてしまっております。特にbloggerユーザーの方で"dp.SyntaxHighlighter"を使われる場合は、改行設定をオフにして使われることをオススメしておきます。

《関連記事》

以前学校での講義の際、ある先生がhtmlのページを"→キー"だけでスライドさせておりました。便利だなぁと思いつつ、今回制作物を発表することになったので、興味本位で試してみることにしました。先生のスライドファイルをFirebugで覗いていると、どうやらW3Cが公開する"HTML Slidy"というjavascriptライブラリを使用していると判明！そうとわかればコッチのもの、得意の執拗な検索コンボの始まりです。以下、今回制作するまでの僕の手順になります。

１．CSSファイルを作成（ファイル名"slidy.css"）
→"http://www.w3.org/Talks/Tools/Slidy/slidy.css"
２．jsファイルを作成（ファイル名"slidy.js"）
→"http://www.w3.org/Talks/Tools/Slidy/slidy.js "
３．以下の雛形を貼り付けたXHTMLファイルを作成
＊必要に応じて書き換えてください

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Slide Shows in XHTML</title>
<meta name="copyright"
content="Copyright &#169; 2005 your copyright notice" />
<link rel="stylesheet" type="text/css" media="screen, projection, print"
href="http://www.w3.org/Talks/Tools/Slidy/slidy.css" />
<script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js"
charset="utf-8" type="text/javascript"></script>
<style type="text/css">
<!-- your custom style rules -->
</style>
</head>
<body>
... ここでマークアップしていきます ...
</body>
</html>

４．以下のルールに従い、マークアップ
・スライドさせるページは、以下の1枚目、2枚目…の部分に記述する

<div class="slide">1枚目</div>
<div class="slide">2枚目</div>

------------------------------------------------------------------------------------------------------------
・スライドのタイトルはh1タグで囲む

<h1>スライドのタイトル</h1>

------------------------------------------------------------------------------------------------------------
・ページ内の情報を"→キー"ごとに表示させる場合はclass="incremental"を使う

<div class="incremental">
<p>1クリック目に表示</p>
<p>2クリック目に表示</p>
<p>3クリック目に表示</p>
</div>

------------------------------------------------------------------------------------------------------------
と言ったところです。
スライドページの操作としては、"→","space"､"クリック"で次ページに進み、"←"で前ページに戻ります。キー1つで、文字サイズを変更やスライドページの解除も可能です。僕も参考にさせていただいた"HTML Slidyの使い方"さんでは、ここまで書いたものをより分かりやすく、そしてより詳しくまとめてくださってます。最初からこちらを紹介したほうが皆さんの為ですね（笑）
肝心のサンプルページですが、"HTML Slidyの公式ページ（英語）"や、先ほど紹介させていただいた"HTML Slidyの使い方"さんで確認できます。

プレゼンや説明などする際に役立ちそうなツール、覚えておいて損は無いと思いますよ！

2008年12月19日金曜日

ソースコードをわかりやすく表示するJSプログラム"dp.SyntaxHighlighter"

うっかりさん

2008年10月3日金曜日

プレゼンにも使えるjavascriptライブラリ"HTML Slidy"