HTML,CSS,JS,Perl,PHPなどの各ソースコードをWebサイト上に綺麗に再現。

NetyaSun

ソースコード表示　ホームページ　作成、運営、管理ガイド

行番号や各行背景色で見やすい ソースコード ビュー ライブラリ　SyntaxHighlighter

エディタのようにWebサイト上に綺麗にソースコードを表示する方法。
ソースを書くプロ達や未来の開発者のための学びの場である
HTML,CSS,JS,Perl,PHPなどのマニュアル・解説サイトなどで、
PREソースコードを行頭番号付きでカッコよく表示するソース ビューア

SyntaxHighlighter　　SyntaxHighlighter:Download
ソース上にオンマウスで 表示する操作画像 の操作タブがソースの右上に表示されるようになった。
ソースを別窓ビュー表示したりクリップボードに保存や印刷も可能な優れものです。

<?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>ソースコードを綺麗に表示</title>
<meta name="description" content="HTML,CSS,JS,Perl,PHPなどのソースコードをウェブで表示" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link type="text/css" rel="stylesheet" href="styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css" />
  <script type="text/javascript" src="scripts/shCore.js"></script>
  <script type="text/javascript" src="scripts/shBrushXml.js"></script>
  <script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
    SyntaxHighlighter.all();
  </script>
</head>
<body>
<div id="container">

<pre class="brush: xhtml;">
ここにソースコードを記述する
</pre>
</div>
</body>
</html>

Webサイト上に綺麗にソースコードを表示する方法

  1. SyntaxHighlighter:Download
    SyntaxHighlighterをダウンロード＆解凍
    このサイトでのバージョンは、version 2.1.364(October 15 2009)　　旧バージョンとかなり違う。

  2. SyntaxHighlighter.zip 解凍後の中身

    • scripts　（JSフォルダ）
    • src　（JSフォルダ）
    • styles　（CSSフォルダ）
    • LGPLv3.txt　（LICENSE）
    • test.html　（テスト表示用.HTML）

  3. ローカルフォルダ内へドラッグ&ドロップ
    このサイトの場合（file:///D:/netyasun.com/syntaxhighlighter/）

      トップディレクトリ
   |
   +- index.html
   |
   +- /syntaxhighlighter/
       |
       +-- /scripts/
       |
       +-- /src/
       |
       +-- /styles/
       |
       +-- test.html

  4. test.htmlを参考に
    新しい.htmlを制作し、test.htmlのHEAD内のCSSとJSの<link,<scriptをコピペ。
    （新しい.htmlへのCSSとJSのパスを正確に指定する事。相対パスでOK ）

  5. ソースコードを記述、文字コードも確認。
    テスト的なソースコードをpre内に記述しブラウザで表示確認

    <pre class="brush: c-sharp;"> Hello World </pre>
    <pre class="brush: c-sharp;"> Hello World </pre>

  6. Brush nameを選択
    <pre class="brush: c-sharp;">　</pre> のclass名を
    記述する言語形式に合わせBrush aliases名に変更。
    Brush nameに合わせ、HEAD内の不要なJSの<script >を削除。再度ブラウザで表示確認。

    Brush nameBrush aliasesFile name
    ActionScript3as3, actionscript3shBrushAS3.js
    Bash/shellbash, shellshBrushBash.js
    ColdFusioncoldfusionshBrushColdFusion.js
    C++cpp, cshBrushCpp.js
    C#c-sharp, csharpshBrushCSharp.js
    CSScssshBrushCss.js
    Delphidelphi, pas, pascalshBrushDelphi.js
    Diffdiff, patchshBrushDiff.js
    ErlangerlangshBrushErlang.js
    GroovygroovyshBrushGroovy.js
    JavajavashBrushJava.js
    JavaFXjfx, javafxshBrushJavaFX.js
    JavaScriptjs, jscript, javascriptshBrushJScript.js
    Perlperl, plshBrushPerl.js
    PHPphpshBrushPhp.js
    Plain Textplain, textshBrushPlain.js
    PowerShellps, powershellshBrushPowerShell.js
    Pythonpy, pythonshBrushPython.js
    Rubyrails, ror, rubyshBrushRuby.js
    ScalascalashBrushScala.js
    SQLsqlshBrushSql.js
    Visual Basicvb, vbnetshBrushVb.js
    XMLhtml, xhtml, xml, xsltshBrushXml.js

  7. CSS
    syntaxhighlighterフォルダのstyles内から一致するファイルのCSSを変更し
    自分好みのソースコード画面にカスタマイズする事も可能です。

    • shThemeDefault.css
    • shThemeDjango.css
    • shThemeEclipse.css
    • shThemeEmacs.css
    • shThemeFadeToGrey.css
    • shThemeMidnight.css
    • shThemeRDark.css
  8. CSS表示確認クリック 
    <?xml version="1.0" encoding="Shift_JIS"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>ソースコードを綺麗に表示</title>
<meta name="description" content="HTML,CSS,JS,Perl,PHPなどのソースコードをウェブで表示" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link type="text/css" rel="stylesheet" href="styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css" />
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushBash.js"></script>
<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="scripts/shBrushJava.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="scripts/shBrushPython.js"></script>
<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="scripts/shBrushScala.js"></script>
<script type="text/javascript" src="scripts/shBrushSql.js"></script>
<script type="text/javascript" src="scripts/shBrushVb.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<script type="text/javascript">
   SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
   SyntaxHighlighter.all();
</script>
</head>
<body>
<pre class="brush: c-sharp;">
ここにソースコードを記述する
</pre>
</body>
</html>

    ソースの展開可能　クリックでソースが展開

    <pre class="brush: xhtml; collapse: true;">
ここにソースコードを記述する
<pre>

<!-- これも使えます。 -->
<script type="syntaxhighlighter" class="brush: html; collapse: true;"><![CDATA[
ここにソースコードを記述する
]]></script>

  9. javascript 追加
    表示する操作画像 の操作タブを日本語化。（不要なauto-links仕様も解除）

    SyntaxHighlighter.config.clipboardSwf = 'clipboard.swf';
SyntaxHighlighter.config.strings.expandSource = 'ソース';
SyntaxHighlighter.config.strings.viewSource = 'ソース表示';
SyntaxHighlighter.config.strings.copyToClipboard = 'コピー　Clipboard';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation ='コピー完了';
SyntaxHighlighter.config.strings.print = 'プリンタ';
SyntaxHighlighter.config.strings.help = 'SyntaxHighlighter version 2.1.364';
SyntaxHighlighter.all();
SyntaxHighlighter.defaults['auto-links'] = false;

  10. 注意：オプション

    • 面倒でもお約束の < & > を &lt; &amp; &gt; にエスケープしなければ、
      < DTD >などそのままHTML認識されてしまいます・・・
      　<textarea>の利用は？　version 2.での利用法は不明・・・
    • IE6で崩れるのでハック・IE6バグ対策を忘れずに。
    • 環境によってクリップボードに不具合。（Flash10）
    • SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.defaults['auto-links'] = false;
      SyntaxHighlighter.defaults['gutter'] = false;
      SyntaxHighlighter.defaults['smart-tabs'] = false;
      のようにtrueかfalseの設定。jsで統一させるかpre毎にclass設定するか。
    • auto-links: false;　http://から始まるURL記述がアンカー対応になるのを回避。
    • gutter:false;　行頭番号無し設定。
    • toolbar: false;　ツールバー（タブ）無し。
    • light:true;　行頭番号もツールバーも無し。
    • highlight:[1,2,3];　指定した数値の行をハイライト（カンマ区切り）。
    • collapse: true;　ソース折りたたみ・展開
    • first-line: 7;　途中の行頭番号からの開始値。<ol start="7">と同じ。
    • tab-size: 4;　tabインデントの幅サイズ設定。
    • wrap-lines: false;　改行無しでスクロール。
      　overflow:auto;のwhite-space:nowrap;と同じ。
    • SyntaxHighlighter version 2.1.364 alexgorbatchev.com
      http://alexgorbatchev.com/wiki/SyntaxHighlighter
      http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration

  11. サーバにアップロード
    HTMLファイルと各フォルダ（ scripts , src , styles ）をアップロード（制作）
    必要なBrush aliases要素をBrush nameを参考に、syntaxhighlighterディレクトリ内の
    scriptsディレクトリ内に必要なFile nameのJSファイルをアップロード。
    同じく、stylesディレクトリ内に好みのデザインのCSSファイルをアップロード。

SyntaxHighlighter

やっぱりjavascript環境。一瞬の表示が少し遅い。
PREの各行を判断しol,liとbacgroundで実装していると思いきや、毎行table枠で固めた仕様。
また、ソースをコピーする場合、普通にソースをShiftキーやマウスでなぞってコピペすると、行頭記号なども一緒にペーストされてしまうので（ol仕様）、このSyntaxHighlighterのボタンや操作性が普及して欲しいところです。

今後、shTheme*.cssで各有名エディタ仕様のデザインスキンや、
メモ帳の仕様やブラウザまで対応し、未知のHTML6頃には、
<editor>要素？とかでソースがデザインされると面白いかも。
※　Japanese仕様など今後の開発に期待します。

HTMLソースコード変換

Copyright © NetyaSun All rights reserved.