xhtmlの場合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SyntaxHighlighter</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container">
<p>sample</p>
</div>
<script type="text/javascript" src="scripts/shCore.js"></script>
</body>
</html>
cssの場合
* {
margin:0;
padding:0
}
body {
background:#fff;
font-family:Arial;
}
#container {
width:520px;
margin: 20px auto;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}
javascriptsの場合
SyntaxHighlighter.brushes.JScript = function() {
var keywords = 'break case catch continue ' +
'default delete do else false ' + 'for function if in instanceof ' +
'new null return super switch ' +
'this throw true try typeof var while with';
this.regexList = [{
regex: SyntaxHighlighter.regexLib.singleLineCComments,
css: 'comments'
}, // one line comments
{
regex: SyntaxHighlighter.regexLib.multiLineCComments,
css: 'comments'
}, // multiline comments
{
regex: SyntaxHighlighter.regexLib.doubleQuotedString,
css: 'string'
}, // double quoted strings
{
regex: SyntaxHighlighter.regexLib.singleQuotedString,
css: 'string'
}, // single quoted strings
{
regex: /\s*#.*/gm,
css: 'preprocessor'
}, // preprocessor tags like #region and #endregion
{
regex: new RegExp(this.getKeywords(keywords), 'gm'),
css: 'keyword'
} // keywords
];
this.forHtmlScript(SyntaxHighlighter.regexLib.scriptScriptTags);
};
SyntaxHighlighter.brushes.JScript.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.JScript.aliases = ['js', 'jscript', 'javascript'];
ソースを折りたたむ場合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SyntaxHighlighter</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container">
<p>sample</p>
</div>
<script type="text/javascript" src="scripts/shCore.js"></script>
</body>
</html>
Javascriptサンプル集 - Saetl.net