てぃーだブログで Syntaxhighlighter を使う前に

先日の以下の記事にて、てぃーだブログ上に Syntaxhighlighter の設定が完了した旨ご案内いたしましたが、今回はそもそも Syntaxhighlighter とは何かを説明します。

Syntaxhighlighter とは

まずは公式ページから。

Syntax Highlighter - Alex Gorbatchev

About

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. To get an idea of what SyntaxHighlighter is capable of, have a look at the demo page.

(シンタックスハイライターは完全な機能をもった JavaScript で開発された自己完結型のプログラムで、コードの構文をハイライト表示するものです。アイデアを得るためにシンタックスハイライターは何が可能なのかデモページを見てください。)

Syntaxhighlighter とは Web 上でプログラムコードをハイライト表示して見やすくするために JavaScript で書かれたプログラムということです。

同様の機能をもったプログラムは他にもいくつかある様ですが、Syntaxhighlighter の見た目がなんとなく良さそうだったのでこれを使って見ようと思いました。ちなみにデモページはこんな感じです。



指定したプログラミング言語に合わせて構文をハイライト表示してくれます。強調したい行そのものにハイライトを設定したりも出来ます (ここでは 5 行目と 15 行目)。文字数が多いときは自動的にスライドバーが表示されます。

対応する Syntax (構文法) は以下の通りです。それぞれをブラシと呼びます。

Syntaxhighlighter のブラシ (Brushes)

Bundled Brushes (バンドルされているブラシ)

1. ActionScript3
2. Bash/shell
3. ColdFusion
4. C#
5. C++
6. CSS
7. Delphi
8. Diff
9. Erlang
10. Groovy
11. JavaScript
12. Java
13. JavaFX
14. Perl
15. PHP
16. Plain
17. PowerShell
18. Python
19. Ruby
20. Scala
21. SQL
22. Visual Basic
23. XML

各ブラシにはブラシの名前に対応したブラシのエイリアス (別名) と、機能を実現する JavaScript のファイルが存在します。ここら辺は実際の設定の時に必要になります。

上記の通り Syntaxhighlighter は標準でバンドルされているだけで、 23 の言語に対応しています。僕は Perl を勉強中なので Perl のブラシを使います。

Syntaxhighlighter とは、この様に希望のプログラミング言語にそったハイライト表示を Web 上で実現してくれるプログラムなわけです。

僕がなぜこの様な設定をするかというと、それは "かっこいい" からです。初級的 Perl コードですらこんなになるんです。これは強い動機付けに結びつきます。

ということで次回に続きます。

 #!/usr/bin/perl



my $count = 0;

my $char  = '';

my $int   = 0;



while ($count <= 1) {



  if ($count == 0) {

    $char = <STDIN>;

  } else {

    $int = <STDIN>;

  }

  $count++;

}



my $ans = $char x $int;

print "$ans\n";

#!/usr/bin/perl

my $count = 0;
my $char = '';
my $int = 0;

while ($count <= 1) {

if ($count == 0) {
$char = <STDIN>;
} else {
$int = <STDIN>;
}
$count++;
}

my $ans = $char x $int;
print "$ans\n";

Syntaxhighlighter の記事