ソースコードをHTMLに変換するサービスを始めました。
「インラインＣＳＳ」をチェックするとコード量が多くなりますが、特別な設定なしでブログ等に表示することが可能になります。宜しかったら、ご利用ください。
→ syntax2html （クリックします・・・最初の画面表示までに時間が掛かる場合があります）
「インラインＣＳＳ」をチェックするとコード量が多くなりますが、特別な設定なしでブログ等に表示することが可能になります。宜しかったら、ご利用ください。
→ syntax2html （クリックします・・・最初の画面表示までに時間が掛かる場合があります）
前回記事 でSyntaxHighlighterの設定を行なった。今回は設置したSyntaxHighlighterの使用方法について記事を書く。以下、使用方法・注意点など箇条書きで記述する。
-
使用方法
SyntaxHighlighterを使用してソースを表示するには、preタグを利用する。
記述例（python）<pre class="brush: alias"> （ソースはここ） </pre>
alias にソースの種別コードを指定する。
<pre class="brush: py"> print "Hello world" </pre>
結果print "Hello world"
次のように、scriptタグを使う方法もあるそうだ（10/25追加）。この指定方法では後述する特殊文字の問題は発生しないため、ソースをそのまま表示可能だ。<script class="brush: alias" type="syntaxhighlighter"><![CDATA[ （ソースはここ） ]]></script>
alias にソースの種別コードを指定する。
参考： Linux愛好者の独り言 SyntaxHighlighter 3.0を使いこなす２
aliasに指定できるコードは以下の表を参照。
参考： Aliasに設定するコード一覧（本家サイトより）
Brush name
ソース種別Brush aliases
設定できるコードFile name
JSファイル名ActionScript3 as3, actionscript3 shBrushAS3.js Bash/shell bash, shell shBrushBash.js ColdFusion cf, coldfusion shBrushColdFusion.js C# c-sharp, csharp shBrushCSharp.js C++ cpp, c shBrushCpp.js CSS css shBrushCss.js Delphi delphi, pas, pascal shBrushDelphi.js Diff diff, patch shBrushDiff.js Erlang erl, erlang shBrushErlang.js Groovy groovy shBrushGroovy.js JavaScript js, jscript, javascript shBrushJScript.js Java java shBrushJava.js JavaFX jfx, javafx shBrushJavaFX.js Perl perl, pl shBrushPerl.js PHP php shBrushPhp.js Plain Text plain, text shBrushPlain.js PowerShell ps, powershell shBrushPowerShell.js Python py, python shBrushPython.js Ruby rails, ror, ruby shBrushRuby.js Scala scala shBrushScala.js SQL sql shBrushSql.js Visual Basic vb, vbnet shBrushVb.js XML xml, xhtml, xslt, html, xhtml shBrushXml.js
-
使用上の注意点
-
ソースコードのコピー
ソース上でダブルクリックすることにより、ソースコード全体が選択される。その後、Ctrl+C などを利用してコード全体をコピーできる。 -
preタグ中で使用できない文字
幾つかの文字は preタグでは直接使用できない。使用する場合、キーワード表記もしくは10進表記に変換して使用する。文字 < > & " ' キーワード表記 < > & " 10進表記 < > & " '
文字列変換をサポートしてくれるサイトも存在する。変換して貼り付けるだけなので非常に楽になる。
文字列変換サポートサイト： preタグメーカー
※ この情報はandonkun's noteさんのサイトを参考にしました。 -
記事設定
記事をブログに投稿する時に、「改行HTMLタグ変換」→「改行を<br/>タグに変換しない」 を選択する必要がある。
-
ソースコードのコピー
-
オプション
preタグと一緒に使用できるオプションが幾つか存在する。以下簡単に使用例を示す。
-
highlight - 強調表示
記述例（1・2・4行目を強調）<pre class="brush: py; highlight: [1,2,4]"> a = "Hello" b = " " c = "world" print(a+b+c) </pre>
結果a = "Hello" b = " " c = "world" print(a+b+c)
-
title - タイトル設定
記述例<pre class="brush: py" title= "これはテストです"> a = "Hello" b = " " c = "world" print(a+b+c) </pre>
titleはclass属性でなく、title属性に記述する。
結果a = "Hello" b = " " c = "world" print(a+b+c)
-
collapse:true - ソース折り畳み・展開
記述例<pre class="brush: py; collapse: true; toolbar: true"> a = "Hello" b = " " c = "world" print(a+b+c) </pre>
ソース展開にはツールバーがtrueになっている必要がある。ツールバーのデフォルト値がfalseの場合、preタグ中で toolbar:true を指定する。
結果a = "Hello" b = " " c = "world" print(a+b+c)
-
gutter:false - 行番号非表示
記述例<pre class="brush: py; gutter: false"> a = "Hello" b = " " c = "world" print(a+b+c) </pre>
結果a = "Hello" b = " " c = "world" print(a+b+c)
-
html-script:true - 他のソースと同時にHTMLタグをキーワード表示
記述例（JavaScriptとHTML）<pre class="brush: js; html-script: true"> <html> <head> <title>テスト</title> </head> <body> <script type="text/javascript"> <!-- document.write("Hello World"); // --> </script> </body> </html> </pre>結果<html> <head> <title>テスト</title> </head> <body> <script type="text/javascript"> <!-- document.write("Hello World"); // --> </script> </body> </html> -
first-line:10 - 開始行番号を指定（ex.10番から）
記述例<pre class="brush: py; first-line: 10"> a = "Hello" b = " " c = "world" print(a+b+c) </pre>
結果a = "Hello" b = " " c = "world" print(a+b+c)
-
tab-size:2 - タブサイズの指定（ex.2）
記述例<pre class="brush: py; tab-size: 2"> def sum(ls): s=0 for x in ls: s+=x return(s) </pre>
タブがあると表示サイズが、通常はデフォルトで4が設定されている。サイズを変更したい場合、このオプションで変更。
結果def sum(ls): s=0 for x in ls: s+=x return(s)
※ Blogger ではタブ文字を入力しても空白一文字に変換するため、表示が変わらないようだ。
-
highlight - 強調表示