dp.SyntaxHighlighter-コード表示に役立つJavaScript

dp.SyntaxHighlighterの特徴

dp.SyntaxHighlighter Home Page

http://www.dreamprojections.com/syntaxhighlighter/Default.aspx

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

dp.SyntaxHighlighterのサポートしているプログラム言語

以下のプログラムコードをサポートしています。

• C#
• CSS
• C++
• VB & VB.NET
• Delphi, Pascal
• Java
• JavaScript
• PHP
• Python
• Ruby
• SQL
• XML, HTML, XSLT and any other XML style code

dp.SyntaxHighlighterの導入

dp.SyntaxHighlighter Home Page

http://www.dreamprojections.com/syntaxhighlighter/Default.aspx

上記のサイトからプログラムをDLします。ScriptsフォルダのJSファイルを今のブログのフォルダへすべてアップロードします。

CSSコード追加

StylesにあるSyntaxHighlighterファイルのCSSを既存のCSSに追加します。

ちょっとCSSを書き換えます。以下のCSSを参考にして各自にてCSSを調整しながら書き換えてみてください。もしくはYahoo! UI Library: Grids CSSのCSSを参考にして書き換えてみるといいかもしれないです。私の書き換えたパターンは以下の通りです。

/* Main style for the table */

.dp-highlighter {
	width: 100%;
	overflow: auto;
	line-height: 100% !important;
	margin: 18px 0px 18px 0px;
}

.dp-highlighter table {
	width: 100%;
	margin: 2px 0px 2px 0px;
	border-collapse: collapse;
	border-bottom: 2px solid #eee;
	background-color: #fff;
}

.dp-highlighter tbody.hide { display: none; }
.dp-highlighter tbody.show { display: table-row-group; _display: block; }

.dp-highlighter td 
{
	font-family: Courier New;
	font-size: 11px;
}

/* Styles for the tools */

.dp-highlighter .tools-corner {
	background-color: #eee;
	font-size: 9px;
}

.dp-highlighter .tools {
	background-color: #eee;
	padding: 3px 8px 3px 10px;
	border-bottom: 1px solid gray;
	font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: silver;
}

.dp-highlighter .tools-corner {
	background-color: #eee;
}

.dp-highlighter .tools a {
	font-size: 9px;
	color: gray;
	text-decoration: none;
}

.dp-highlighter .tools a:hover {
	color: red;
	text-decoration: underline;
}

/* Gutter with line number */

.dp-highlighter .gutter {
	padding-right: 5px; 
	padding-left: 10px; 
	width: 5px;
	background-color: #eee; 
	border-right: 1px solid gray; 
	color: gray;
	text-align: right;
	vertical-align: top;
}

/* Single line style */

.dp-highlighter .line1, .line2 {
	padding-left: 10px;
	/*border-bottom: 1px solid #F7F7F7;*/
	white-space:nowrap;
}

.dp-highlighter .line2 {
	/*background-color: #F7F7F7;*/
}

/* About dialog styles */

.dp-about {
	background-color: #fff;
	margin: 0px;
}

.dp-about table {
	width: 100%;
	height: 100%;
	font-size: 11px;
	font-family: Tahoma, Verdana, Arial, sans-serif !important;
}

.dp-about td {
	padding: 10px;
	vertical-align: top;
}

.dp-about .copy {
	border-bottom: 1px solid #ACA899;
	height: 95%;
}

.dp-about .title {
	color: red;
	font-weight: bold;
}

.dp-about .para {
	margin-bottom: 4px;
}

.dp-about .footer {
	background-color: #ECEADB;
	border-top: 1px solid #fff;
	text-align: right;
}

.dp-about .close {
	font-size: 11px;
	font-family: Tahoma, Verdana, Arial, sans-serif !important;
	background-color: #ECEADB;
	width: 60px;
	height: 22px;
}

基本タグ

公開するコードをすべて以下のtextareaタグのパターンで囲みます。

尚、囲むコードのプログラム言語に応じてclassセレクタを変えます。

• XMLコードの場合、class="xml"
• CSSコードの場合、class="css"
• JavaScriptコードの場合、class="js"
• Rubyコードの場合、class="ruby"
• SQLコードの場合、class="sql"
• Visual Basicコードの場合、class="vb"
• Javaコードの場合、class="java"
• pythonコードの場合、class="python"
• C#コードの場合、class="c#"
• C++コードの場合、class="c"
• Delphiコードの場合、class="delphi"

スクリプトの追加

公開するエントリーの最後に以下のスクリプトコードを付加します。
尚、各プログラムコードによって追加するスクリプトが異なります。

以下のスクリプトが基本です。

<script class="javascript" src="（コード保存先アドレス指定）Scripts/shCore.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

上記のコードにプログラムによって以下のスクリプトを追加します。

<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushPhp.js"></script>
<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushJScript.js"></script>
<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushJava.js"></script>
<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushVb.js"></script>
<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushSql.js"></script>
<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushXml.js"></script>
<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushPython.js"></script>
<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushRuby.js"></script>
<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushCss.js"></script>
<script class="javascript" src="（コード保存先アドレス指定）Scripts/shBrushCpp.js"></script>

例えば、わたくしの場合はXMLとCSSコードを主に情報として公開していますので、毎回エントリーの末尾に以下のコードを追加しています。

<script type="text/javascript" src="http://weblibrary.s224.xrea.com/weblog/shCore.js"></script>
<script type="text/javascript" src="http://weblibrary.s224.xrea.com/weblog/shBrushCss.js"></script>
<script type="text/javascript" src="http://weblibrary.s224.xrea.com/weblog/shBrushXml.js"></script>
<script class="javascript" type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

その他の機能

classセレクタの指定を変えることでさまざまな機能を追加することができます。
詳しくは、Extended configurationをご覧ください。

注意点

dp.SyntaxHighlighterを使っていて気になった点を紹介しておきます。

<textarea></textarea>について

公開するコードの中に<textarea></textarea>がある場合は、そのコードのみを実体参照に変換する必要があります。

実体参照コードに変換するには、お使いのオーサリングツールもしくはこちらの蓄々HTML実体参照変換を使うと便利です。

蓄々HTML実体参照変換

http://www.akiyan.com/cc_convert_html_specialchars

私の場合は、CSSコード以外はすべて実体参照に変換しています。オーサリングツールであれば簡単に変換してくれます。

行番号が表示されない-<ol></ol>タグのCSS指定

たぶんjavascriptでDOMの置き換えをしています。お使いのブログの既存CSS設定で表示されない場合があります。一度確認してみてください。行番号が表示されない場合は、<ol></ol>タグのCSS指定が必要です。

.dp-highlighter ol{
        list-style:decimal;
}

上記のCSSを追加することで行番号が表示されるようになると思います。

CSSのleftの重複表示

以前のソースをお使いの方は、CSSのleft表示が重複表示されていましたが、先月のアップデートで改善されたみたいです。

たまに公開サイトを覗いて修正点などのバグの解決がされていますので、そのつどスクリプトをアップデートするといいですよ。

コード公開手法参考エントリー一覧

他にもコードの表示方法にはいろんな手法で公開されているみたいです。以下の参考エントリーをご覧になり、ご自分に適した方法で公開してみるといいですよ。

• i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻:
• pre 要素のスタイル定義とマークアップ - 2xup.org:

参考JavaScript

ブラウザ上でHTML・JavaScript・PHP・Javaを作成できるエディタです。

Real Time Syntax Highlighting Code Editor JavaScript:

http://www.txt.org/rtshjs/index.htm?ts=222123821226