Saetl.net

Simple And Easy TempLate

SyntaxHighlighterの使い方

  1. 下記ページの「Click here to download」 よりファイル1式をダウンロード。(サンプルはVer 2.x系を使用)
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssファイルを読み込ませるためのコードを記述。
    <head>
    <!--ダウンロードしたファイル-->
    <link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
    </head>
    

    サンプルのshCore.cssコード(サンプルのshCore.cssは改変しています)

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	background: #fff;
    	font-family: Arial;
    }
    #container {
    	width: 850px;
    	margin: 20px auto;
    }
    a {
    	color: #333;
    	text-decoration: none;
    }
    a:hover {
    	color: #ff0000;
    	text-decoration: underline;
    }
    /*ここまでページ設定部分*/
    
    
    
    /*ここからSyntaxHighlighterの設定*/
    /**
     * SyntaxHighlighter
     * http://alexgorbatchev.com/
     *
     * SyntaxHighlighter is donationware. If you are using it, please donate.
     * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate
     *
     * @version
     * 2.1.382 (June 24 2010)
     *
     * @copyright
     * Copyright (C) 2004-2009 Alex Gorbatchev.
     *
     * @license
     * This file is part of SyntaxHighlighter.
     *
     * SyntaxHighlighter is free software: you can redistribute it and/or modify
     * it under the terms of the GNU Lesser General Public License as published by
     * the Free Software Foundation, either version 3 of the License, or
     * (at your option) any later version.
     *
     * SyntaxHighlighter is distributed in the hope that it will be useful,
     * but WITHOUT ANY WARRANTY; without even the implied warranty of
     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     * GNU General Public License for more details.
     *
     * You should have received a copy of the GNU General Public License
     * along with SyntaxHighlighter.  If not, see .
     */
    .syntaxhighlighter, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody {
    	margin: 0 !important;
    	padding: 0 !important;
    	border: 0 !important;
    	outline: 0 !important;
    	background: none !important;
    	text-align: left !important;
    	float: none !important;
    	vertical-align: baseline !important;
    	position: static !important;
    	left: auto !important;
    	top: auto !important;
    	right: auto !important;
    	bottom: auto !important;
    	height: auto !important;
    	width: auto !important;
    	line-height: 1.1em !important;
    	font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
    	font-weight: normal !important;
    	font-style: normal !important;
    	font-size: 1em !important;
    	min-height: inherit !important; /* For IE8, FF & WebKit */
    	min-height: auto !important; /* For IE7 */
    }
    .syntaxhighlighter {
    	width: 99% !important; /* 99% fixes IE8 horizontal scrollbar */
    	margin: 1em 0 1em 0 !important;
    	padding: 1px !important; /* adds a little border on top and bottom */
    	position: relative !important;
    }
    .syntaxhighlighter .bold {
    	font-weight: bold !important;
    }
    .syntaxhighlighter .italic {
    	font-style: italic !important;
    }
    .syntaxhighlighter .line {
    }
    .syntaxhighlighter .no-wrap .line .content {
    	white-space: pre !important;
    }
    .syntaxhighlighter .line table {
    	border-collapse: collapse !important;
    }
    .syntaxhighlighter .line td {
    	vertical-align: top !important;
    }
    .syntaxhighlighter .line .number {
    	width: 3em !important;
    }
    .syntaxhighlighter .line .number code {
    	width: 2.7em !important;
    	padding-right: .3em !important;
    	text-align: right !important;
    	display: block !important;
    }
    .syntaxhighlighter .line .content {
    	padding-left: .5em !important;
    }
    .syntaxhighlighter .line .spaces {
    }
    /* Disable border and margin on the lines when no gutter option is set */
    .syntaxhighlighter.nogutter .line .content {
    	border-left: none !important;
    }
    .syntaxhighlighter .bar {
    	display: none !important;
    }
    .syntaxhighlighter .bar.show {
    	display: block !important;
    }
    .syntaxhighlighter.collapsed .bar {
    	display: block !important;
    }
    /* Adjust some properties when collapsed */
    
    .syntaxhighlighter.collapsed .lines {
    	display: none !important;
    }
    .syntaxhighlighter .lines.no-wrap {
    	overflow: auto !important;
    	overflow-y: hidden !important;
    }
    /* Styles for the toolbar */
    
    .syntaxhighlighter .toolbar {
    	position: absolute !important;
    	right: 0px !important;
    	top: 0px !important;
    	font-size: 1px !important;
    	padding: 8px 8px 8px 0 !important; /* in px because images don't scale with ems */
    }
    .syntaxhighlighter.collapsed .toolbar {
    	font-size: 80% !important;
    	padding: .2em 0 .5em .5em !important;
    	position: static !important;
    }
    .syntaxhighlighter .toolbar a.item, .syntaxhighlighter .toolbar .item {
    	display: block !important;
    	float: left !important;
    	margin-left: 8px !important;
    	background-repeat: no-repeat !important;
    	overflow: hidden !important;
    	text-indent: -5000px !important;
    }
    .syntaxhighlighter.collapsed .toolbar .item {
    	display: none !important;
    }
    .syntaxhighlighter.collapsed .toolbar .item.expandSource {
    	background-image: url(magnifier.png) !important;
    	display: inline !important;
    	text-indent: 0 !important;
    	width: auto !important;
    	float: none !important;
    	height: 16px !important;
    	padding-left: 20px !important;
    }
    .syntaxhighlighter .toolbar .item.viewSource {
    	background-image: url(page_white_code.png) !important;
    }
    .syntaxhighlighter .toolbar .item.printSource {
    	background-image: url(printer.png) !important;
    }
    .syntaxhighlighter .toolbar .item.copyToClipboard {
    	text-indent: 0 !important;
    	background: none !important;
    	overflow: visible !important;
    }
    .syntaxhighlighter .toolbar .item.about {
    	background-image: url(help.png) !important;
    }
    
    /**
     * Print view.
     * Colors are based on the default theme without background.
     */
    
    .syntaxhighlighter.printing, .syntaxhighlighter.printing .line.alt1 .content, .syntaxhighlighter.printing .line.alt2 .content, .syntaxhighlighter.printing .line.highlighted .number, .syntaxhighlighter.printing .line.highlighted.alt1 .content, .syntaxhighlighter.printing .line.highlighted.alt2 .content, {
     background: none !important;
    }
    /* Gutter line numbers */
    .syntaxhighlighter.printing .line .number {
    	color: #bbb !important;
    }
    /* Add border to the lines */
    .syntaxhighlighter.printing .line .content {
    	color: #000 !important;
    }
    /* Toolbar when visible */
    .syntaxhighlighter.printing .toolbar {
    	display: none !important;
    }
    .syntaxhighlighter.printing a {
    	text-decoration: none !important;
    }
    .syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
    	color: #000 !important;
    }
    .syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
    	color: #008200 !important;
    }
    .syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
    	color: blue !important;
    }
    .syntaxhighlighter.printing .keyword {
    	color: #069 !important;
    	font-weight: bold !important;
    }
    .syntaxhighlighter.printing .preprocessor {
    	color: gray !important;
    }
    .syntaxhighlighter.printing .variable {
    	color: #a70 !important;
    }
    .syntaxhighlighter.printing .value {
    	color: #090 !important;
    }
    .syntaxhighlighter.printing .functions {
    	color: #ff1493 !important;
    }
    .syntaxhighlighter.printing .constants {
    	color: #0066CC !important;
    }
    .syntaxhighlighter.printing .script {
    	font-weight: bold !important;
    }
    .syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
    	color: #808080 !important;
    }
    .syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
    	color: #ff1493 !important;
    }
    .syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
    	color: red !important;
    }
    

    サンプルのshThemeDefault.cssコード

    /**
     * SyntaxHighlighter
     * http://alexgorbatchev.com/
     *
     * SyntaxHighlighter is donationware. If you are using it, please donate.
     * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate
     *
     * @version
     * 2.1.382 (June 24 2010)
     *
     * @copyright
     * Copyright (C) 2004-2009 Alex Gorbatchev.
     *
     * @license
     * This file is part of SyntaxHighlighter.
     *
     * SyntaxHighlighter is free software: you can redistribute it and/or modify
     * it under the terms of the GNU Lesser General Public License as published by
     * the Free Software Foundation, either version 3 of the License, or
     * (at your option) any later version.
     *
     * SyntaxHighlighter is distributed in the hope that it will be useful,
     * but WITHOUT ANY WARRANTY; without even the implied warranty of
     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     * GNU General Public License for more details.
     *
     * You should have received a copy of the GNU General Public License
     * along with SyntaxHighlighter.  If not, see .
     */
    /************************************
     * Default Syntax Highlighter theme.
     *
     * Interface elements.
     ************************************/
    
    .syntaxhighlighter {
    	background-color: #fff !important;
    }
    /* Highlighed line number */
    .syntaxhighlighter .line.highlighted .number {
    	color: black !important;
    }
    /* Highlighed line */
    .syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
    	background-color: #e0e0e0 !important;
    }
    /* Gutter line numbers */
    .syntaxhighlighter .line .number {
    	color: #afafaf !important;
    }
    /* Add border to the lines */
    .syntaxhighlighter .line .content {
    	border-left: 3px solid #6CE26C !important;
    	color: #000 !important;
    }
    .syntaxhighlighter.printing .line .content {
    	border: 0 !important;
    }
    /* First line */
    .syntaxhighlighter .line.alt1 {
    	background-color: #fff !important;
    }
    /* Second line */
    .syntaxhighlighter .line.alt2 {
    	background-color: #F8F8F8 !important;
    }
    .syntaxhighlighter .toolbar {
    	background-color: #F8F8F8 !important;
    	border: #E7E5DC solid 1px !important;
    }
    .syntaxhighlighter .toolbar a {
    	color: #a0a0a0 !important;
    }
    .syntaxhighlighter .toolbar a:hover {
    	color: red !important;
    }
    /************************************
     * Actual syntax highlighter colors.
     ************************************/
    .syntaxhighlighter .plain, .syntaxhighlighter .plain a {
    	color: #000 !important;
    }
    .syntaxhighlighter .comments, .syntaxhighlighter .comments a {
    	color: #008200 !important;
    }
    .syntaxhighlighter .string, .syntaxhighlighter .string a {
    	color: blue !important;
    }
    .syntaxhighlighter .keyword {
    	color: #069 !important;
    	font-weight: bold !important;
    }
    .syntaxhighlighter .preprocessor {
    	color: gray !important;
    }
    .syntaxhighlighter .variable {
    	color: #a70 !important;
    }
    .syntaxhighlighter .value {
    	color: #090 !important;
    }
    .syntaxhighlighter .functions {
    	color: #ff1493 !important;
    }
    .syntaxhighlighter .constants {
    	color: #0066CC !important;
    }
    .syntaxhighlighter .script {
    	background-color: yellow !important;
    }
    .syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
    	color: #808080 !important;
    }
    .syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
    	color: #ff1493 !important;
    }
    .syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
    	color: red !important;
    }
    
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。
    <!--ダウンロードしたファイル-->
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushxml.js"></script>
    <!--オプションを外部化したファイル-->
    <script type="text/javascript" src="scripts/shBrushoption.js"></script>
    </body>
    
    ・外部化したshBrushoption.js
    SyntaxHighlighter.config.clipboardSwf = '../../syntaxhighlighter/scripts/clipboard.swf';
    SyntaxHighlighter.config.tagName="syn";
    SyntaxHighlighter.defaults['auto-links'] = false;
    SyntaxHighlighter.all();
    SyntaxHighlighter.config.strings.expandSource = 'ソース展開';
    SyntaxHighlighter.config.strings.viewSource = 'ソース表示';
    SyntaxHighlighter.config.strings.copyToClipboard = 'クリップボードにコピー';
    SyntaxHighlighter.config.strings.copyToClipboardConfirmation ='コピー完了';
    SyntaxHighlighter.config.strings.print = 'プリンタ';
    SyntaxHighlighter.config.strings.help = 'SyntaxHighlighter';
    
    ・<body></body>内にコードを記述。
      <p>xhtmlの場合</p>
        <syn class="brush: xhtml">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;SyntaxHighlighter&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
    &lt;div id=&quot;container&quot;&gt;
      &lt;p&gt;sample&lt;/p&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;scripts/shCore.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
        </syn>
    
      <p>cssの場合</p>
        <syn class="brush: 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;
    }
        </syn>
    
      <p>javascriptsの場合</p>
        <syn class="brush: js">
    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'];
        </syn>
    
      <p>ソースを折りたたむ場合</p>
        <syn class="brush: xhtml; collapse: true;">
    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;SyntaxHighlighter&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
    &lt;div id=&quot;container&quot;&gt;
      &lt;p&gt;sample&lt;/p&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;scripts/shCore.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
        </syn>
    
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>SyntaxHighlighter</title>
    <link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
    </head>
    
    <body>
    
    <div id="container">
    
      <p>xhtmlの場合</p>
        <syn class="brush: xhtml">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;SyntaxHighlighter&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
    &lt;div id=&quot;container&quot;&gt;
      &lt;p&gt;sample&lt;/p&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;scripts/shCore.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
        </syn>
    
      <p>cssの場合</p>
        <syn class="brush: 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;
    }
        </syn>
    
      <p>javascriptsの場合</p>
        <syn class="brush: js">
    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'];
        </syn>
    
      <p>ソースを折りたたむ場合</p>
        <syn class="brush: xhtml; collapse: true;">
    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;SyntaxHighlighter&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
    &lt;div id=&quot;container&quot;&gt;
      &lt;p&gt;sample&lt;/p&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;scripts/shCore.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
        </syn>
    
     </div>
    
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushxml.js"></script>
    <script type="text/javascript" src="scripts/shBrushoption.js"></script>
    
    </body>
    </html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル