SHJS (Syntax Highlighting in JavaScript)

例えば、下のように記述すると
<pre class="html">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SHJS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="sh_main.js"></script>
<script type="text/javascript" src="lang/sh_html.js"></script>
<link type="text/css" rel="stylesheet" href="css/sh_ide-codewarrior.css">
</head>
</pre>

下のように表示されたりします。「 css/sh_the.css 」のスタイルを使用しました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SHJS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="sh_main.js"></script>
<script type="text/javascript" src="lang/sh_html.js"></script>
<link type="text/css" rel="stylesheet" href="css/sh_ide-codewarrior.css">
</head>

その他にも、４０種近くの css ファイルが「 css/ 」に入っていますので、お好みで変更されて下さいますように。

sh_berries.css_Sample.png
sh_berries-dark

sh_night.css_Sample.png
sh_night

sh_ide-eclipse.css_Sample.png
sh_ide-eclipse

sh_desert.css_Sample.png
sh_desert

sh_greenlcd_Sample.png
sh_greenlcd

sh_navy_Sample.png
sh_navy

sh_easter_Sample.png
sh_easter

emcs.css_Sample.png
sh_emcs.css

gnu.org/softwareで他のstyleを見ることができます。参考にどうぞ。


実装方法

ダウンロードしたファイルは解凍をして、使用する自分のサイトの適確な場所へおきます。

<head>
<script type="text/javascript" src="shjs/sh_main.js"></script>
<script type="text/javascript" src="shjs/lang/sh_sh.js"></script>
<link type="text/css" rel="stylesheet" href="shjs/css/sh_xxx.css">
</head>

<body onload="sh_highlightDocument();">

<head> と </head> の間に「 sh_main.js 」、「 sh_sh.js 」の場所を自分のサイトの場所にあわせて指定し、スタイルシート「 sh_xxx.css 」などの指定をしておきます。たくさんのスタイルシートが添付されていますので、いろいろと表示を試してみるのもいいかも・・・。

そして、<body>要素に<onload="sh_highlightDocument();">の属性を追加しておきます。
静的HTMLに設置の設定はこれで終りですが、<head> 部分の何かの違いによってはこの通りには行かない事があるかもしれません。例えば、<HTML> と<XHTML> などでは又違う方法になるかもしれません。
ここではとりあえず実装に成功した方法を記しました。

CMS ツールなどに実装の時にはその CMS ツールの説明書に従ってくださいますように。
おそらく plugin のディレクトリーにおくことになるかと思いますが・・・・？

使用方法

実際に使用するときには、まず<head>部分の方で<script type="text/javascript" src="lang/sh_html.js>の部分を使用する言語.js に変更しておき、<body>の方で<pre class="言語">ここへソース</pre>となります。
なお、「 < > 」などの特殊な文字列は反映されませんので、表示されない、という現象がおきる事もあります。
特殊文字については３C勧告 私的 日本語訳などをどうぞ。
むずかしい説明なんかいらないから、といわれるのでしたら、とりあえずこちらの特殊文字一覧などはいかかがでしょうか？

SHJS 言語一覧

Language HTML class
Bison sh_bison
C/C++ sh_cpp
C# sh_csharp
ChangeLog sh_changelog
CSS sh_css
Diff sh_diff
Flex sh_flex
HTML sh_html
Java sh_java
JavaScript sh_javascript
LaTeX sh_latex
Log files sh_log
M4 sh_m4
Makefiles sh_makefile
Pascal sh_pascal
Perl sh_perl
PHP sh_php
Prolog sh_prolog
Python sh_python
Ruby sh_ruby
Shell sh_sh
SQL sh_sql
Tcl sh_tcl
XML sh_xml

上へ戻る | HOMEへもどる