コードの着色SyntxHighlighterプロジェクト（最も流行しているコードのハイライト）

11037 ワード

SyntaxHighlighter

ダウンロード住所：http://www.dreamprojections.com/syntaxhighlighter/ またはhttp://code.google.com/p/syntaxhighlighter/デモンストレーションアドレス：http://www.dreamprojections.com/syntaxhighlighter/Tests/PHP.html
使用方法:
1、ウェブファイルtest.htmを一つのディレクトリに保存すると、dp.SyntxHighlighterを当該ディレクトリの下のサブディレクトリに展開し、イメージ2と仮定して、ウェブページのの間に以下のコードを挿入する：
＜link type=「text/css」rel=「styless heet」href=「imags/Style/Syntax Highlight.css」
3、ウェブページでプログラムのソースコードを表示するところに、以下のコードを挿入します。（その中のクラス＝「js」はjs文法でソースコードを表示します。他の設定可能なクラスの値はそれぞれc铅、css、c、delphi、java、js、php、python、ruby、sql、vb、xml）：


<textarea name="code" class="js" rows="15" cols="100">
         
</textarea>

4、ウェブページの末尾の前に以下のコードを挿入します。


<html>
<head>
<title>  </title>
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>
</head>
<body>
<textarea name="code" class="java" rows="15" cols="100">
public class a{
}
</textarea>
</body>
<script class="javascript" src="Scripts/shCore.js"></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>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf ='Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>  
</html>

SyntxHighlighterはGoogle Code上のオープンソースプロジェクトで、主にウェブページ上のコードに色をつけるために使われています。使用はとても便利で、効果もいいです。
設置方法：
1.まずページに下記のコードを追加します。（ダウンロードしたSyntxHighlighterをSyntxHighlighterディレクトリの下に置いて、ディレクトリ構造に注意してください。）


<link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript">
window.onload = function () 
{
    dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

公式のインストールにはwindow.onloadがありません。これはまだ必要だと思います。つまり、ページを読み込む時にコードの色をつける必要があります。
2.使い方は以下の通りです。
方法1：preを使う


<pre name="code" class="c-sharp">
... some code here ... 
</pre>

方法二：textareaを使う


<textarea name="code" class="c#" cols="60" rows="10"> 
... some code here ... 
</textarea>

また、コードの折りたたみなどの高機能な設定方法もあります。
私はインタラクティブwikiでインストールに成功しました。インストール方法は上述の通りです。第一歩の修正コードはdoc.phpファイルの最後に置けばいいです。今後wikiを編集する時、直接htmlモードを使ってもいいです。PS：CSDNのブログシステムで使用されているのもこのプラグインです。
================================================================================http://code.google.com/p/syntaxhighlighter/downloads/listステップ1:スタイルの追加
第二ステップ：コードを追加します。


<textarea name=”code” class=”php”>
      
</textarea>

ここのclassとは、言語にc、c嚖、vb、java、php、ruby、js、css、sql…があります。
第三ステップは必要なjsを含みます。


<script language=”javascript” src=”Scripts/shCore.js”></script>
<script language=”javascript” src=”Scripts/shBrushPhp.js”></script>(         )
<script language=”javascript”>
dp.SyntaxHighlighter.ClipboardSwf = ‘Scripts/clipboard.swf';//    
dp.SyntaxHighlighter.HighlightAll('code');//           name
</script>

=======================================================================================
1.まずSyntxHighlighter 2をダウンロードします。SyntxHighlighterディレクトリに解凍します。
3.HTMLファイルを作成する：


<pre name="code" class="Ruby">
...Ruby  ...
</pre>

preとtextareaの二種類のHTMLタグに適用できます。nameはcodeで、classは着色する言語です。今はC、C啣、CSS、Delphi、Java、JScript、Python、Ruby、Sql、VB、XMLなどの言語をサポートしています。
4.必要なCSSとJSファイルを追加する：


<link rel="stylesheet" type="text/css" href="./lib/SyntaxHighlighter/Styles/SyntaxHighlighter.css" />
<script src="./lib/SyntaxHighlighter/Scripts/shCore.js"></script>
<script src="./lib/SyntaxHighlighter/Scripts/shBrushRuby.js"></script>

ここはRubyだけ使っています。他のものは似ています。
5.次はwindowのonloadイベントで、SyntxHighlighterを働かせます。


window.onload = function() 
{
    dp.SyntaxHighlighter.ClipboardSwf = './lib/SyntaxHighlighter/Scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll("code");
};

その後、次のページを更新します。コードはすでに色が付いています。
==========================をハイライトしたいコードをpreやtextareaにセットする


<pre name="code" class="c-sharp">
... some code here ...
</pre>
<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>

クラスオプションはテキストブロックを単独で設定することができます。
nogtter 行番号は表示されません。
nocontrols 上にコントローラが表示されません。collappse デフォルトのコードを折り畳みます。firstline[value] 行カウント開始値です。デフォルトは1 show columnsです。最初の行に列を表示します。これらのオプションはエイリアスと一緒に置いて、コロン記号を使用します。


<pre name="code" class="html:nocontrols:firstline[10]">
... some code here ...
</pre>

言語     エイリアス
C++     cpp，c，c++C啱     cxi，c-sharp，csharpCSS     cssDelphi     delphi、pascalJava     javaJava Script     js、jscript、javascript PHP     phpPython     py，pythonRuby     rb，ruby，LIls，rorSql     sqlVB     vb，vb.netXML/HTML     xml，html、xhtml、xslat
ページの最後にJSとCSS参照を追加します。    JSはたくさんあります。言語が固定すれば、shCoreとshBrushXmlのJSファイルを導入すればいいです。


<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');//    ‘code'           
</script>

* SyntaxHighlighter－HighlightAll方法
これは大域関数です。ウェブページのコードブロックを全部探して、明るいコードブロックに変換します。パラメータfunction dp.SyntaxHlighter.HighlightAll(name，show Guter)，[showCotrol]，[collappseAll]，[firstLine]，[showColumns]
name 必要

と要素が使用する名前。<br>show Guter     オプション     すべての処理のコードブロックの行番号をオンまたはオフにします。デフォルトはtrue(true)show Controlsです。     オプション     すべての処理の＜pre＞のコントローラをオンまたはオフにします。デフォルトはtrue collaseAllです。     オプション     すべての処理の「pre」の折りたたみをオンまたはオフにします。showControlsがfalseか交換された場合、この値は無視されます。デフォルトはfalse(farstLine)です。     オプション     行番号の最初の行を指定します。コードブロックがファイルのどの相対位置にあるかを指定したい場合に有用です。デフォルトは1）showColumns     オプション     最初の行に列を表示します。デフォルトはfalseです <br>HighlightAllに呼出されたすべての値は、設定の対応するオプションをリロードします。<br>ダウンロード先:<br>http://code.google.com/p/syntaxhighlighter/<br>もう一つの小さな例を紹介します。textareaとpreの違いは<pre><code><code><br/><html><br/><head><br/><title>高亮测试</title><br/>    <link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"/><br/>    <script language="javascript" src="Scripts/shCore.js"></script><br/>    <script language="javascript" src="Scripts/shBrushXml.js"></script><br/></head><br/><body><br/><textarea name="code" class="xml" rows="15" cols="100"><br/>程序源代码放在这儿afds<br/>dp.SyntaxHighlighter.HighlightAll('code');<br/>dp.SyntaxHighlighter.HighlightAll('code2');<br/>请注译掉这二句查看效果,注意 textarea 和 pre 的分别。pre中的 《 号需要转译，要不然就原样输出了,在高亮代码没有生效的情况下。<br/><h1>adsfadfadf</h1><br/>    -------------------<br/>&lt;h1>adsfadfadf&lt;/h1><br/></textarea> <br/><pre name="code2" class="xml" rows="15" cols="100"><br/>程序源代码放在这儿afds<br/>dp.SyntaxHighlighter.HighlightAll('code');<br/>dp.SyntaxHighlighter.HighlightAll('code2');<br/>    <h1>adsfadfadf</h1><br/>    -------------------<br/>&lt;h1>adsfadfadf&lt;/h1><br/></pre> <br/><script class="javascript"><br/>dp.SyntaxHighlighter.HighlightAll('code');<br/>dp.SyntaxHighlighter.HighlightAll('code2');<br/></script><br/></body><br/></html><br/></code></code></pre>です。

ITK-SNAPを用いてケチな動作を行い、maskの例を保存する。

LinuxのSetfaclコマンド