2012年11月12日月曜日

syntax2html のバージョンアップ

ラベル:

ソースコード変換サービスの syntax2html を若干バージョンアップしました。改善点は次の通りです。

  • インラインCSS機能を強化しました。
  • pygments 1.4 から 1.5 に変更しました。これにより、対応するコードは２３５種類になりました。
  • ユーザ・インターフェースを改善する共に、多少のバグを修正しました。
  • syntax2html サイトへのリンク機能を付け加えました。

一番大きい改善は、インラインCSS機能の強化です。pygments の吐き出すインラインCSSのコードは、他のCSSコードの影響を全く考慮していませんでした。また行番号をインラインCSSで出力すると、レイアウトが崩れるという問題もありました。このためコードをチェックし、必要なCSSコードをインラインでセットするようにしました。

次のブログサービスの初期設定で syntax2html が出力したコードの動作を確認しました。

レイアウトのズレは対症療法的になってしまいますので、まだ不十分だとは思います。

インラインCSSは、普段はソースコードをブログには載せないが、ブログで公開する必要に迫られた場合に、使用すれば便利だと思います。ブログ側では何も設定は必要ありません（syntax2html が出力したHTMLコードを記事にコピするだけ）。

syntax2html へのリンク機能は、特に意味がありません。もし表示したくない場合は、「syntax2html へのリンクを表示」のチェックを外すだけです。

最後にインラインCSSのサンプルを紹介します。

注意
インラインCSSを使っていますが、このブログでは syntax2html 用に特別なCSSを設定しています。このため、サンプルで表示されている行番号とコードの間の線は、通常のインラインCSSでは表示されません。

■ AWK のコード（Pygments 1.5 で追加されました） 

1
/^AWK/ { print "この行は AWK ではじまる行です。" }
syntax2html

■ Dart のコード（Pygments 1.5 で追加されました） 

1
2
3
4
5
#import('dart:html');
void main() {
    var elem = query('#text');
    elem.text = 'Hello, Dart!';
}
syntax2html

■ DTD のコード（Pygments 1.5 で追加されました） 

1
2
3
4
5
6
<!ELEMENT firstName (#PCDATA)>
<!ELEMENT secondName (#PCDATA)>
<!ELEMENT info ANY>
<!ELEMENT data (firstName,secondName,info?)>
<!ELEMENT myDocument (data)*>
<!ATTLIST data age CDATA #IMPLIED>
syntax2html

■ F# のコード（Pygments 1.5 で追加されました） 

1
2
3
4
let rec factorial n =
    match n with
    | 0 -> 1
    | _ -> n * factorial (n - 1)
syntax2html

■ Groovy のコード（Pygments 1.5 で追加されました） 

1
2
3
4
5
6
7
8
9
class Greet {
  def name
  Greet(who) { name = who[0].toUpperCase() +
                      who[1..-1] }
  def salute() { println "Hello $name!" }
}

g = new Greet('world') // ???????????????????????????
g.salute()             // "Hello World!" ?????????
syntax2html

■ JSON のコード（Pygments 1.5 で追加されました） 

1
{"name": "John Smith", "age": 33}
syntax2html

■ MoonScript のコード（Pygments 1.5 で追加されました） 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
export my_func
x = 2323

collection =
  height: 32434
  hats: {"tophat", "bball", "bowler"}

my_func = (a) -> x + a

print my_func 100
syntax2html

■ PostgreSQL のコード（Pygments 1.5 で追加されました） 

1
2
3
4
CREATE FUNCTION square_root(double precision) RETURNS double precision
    AS 'dsqrt'
    LANGUAGE internal
    STRICT;
syntax2html

■ PowerShell のコード（Pygments 1.5 で追加されました） 

1
2
3
PS> $rssUrl = "http://blogs.msdn.com/powershell/rss.aspx"
PS> $blog = [xml](New-Object System.Net.WebClient).DownloadString($rssUrl)
PS> $blog.rss.channel.item | Select title -first 8
syntax2html

■ Scilab のコード（Pygments 1.5 で追加されました） 

1
2
3
4
5
6
function [x]=fact(k)
  k=int(k)
  if k<1 then k=1,end
  x=1;
  for j=1:k,x=x*j;end
endfunction
syntax2html

■ SystemVerilog のコード（Pygments 1.5 で追加されました） 

1
2
3
4
5
typedef enum reg [2:0] {
   RED, GREEN, BLUE, CYAN, MAGENTA, YELLOW
} color_t;

color_t   my_color = GREEN;
syntax2html


syntax2html へは、こちらのリンクをクリックしてください　→ syntax2html