Home > Web > | javascript > SyntaxHighlighter Archive

SyntaxHighlighter Archive

SyntaxHighlighter には pre タグではなく script タグがお得

文字実体参照
<&lt;
&&amp;

SyntaxHighlighter による記述に <pre> タグを使うといろいろと不便な点がある。一番の問題は、<pre> 内では左表に示す文字を直接書き表わせないことだ。

Continue reading

【Javascript】SyntaxHighlighter 3.0 を Movable Type で使う

【Javascript】SyntaxHighlighter 3.0 の新機能と注意点
http://blog.remora.cx/2010/07/new-function-of-syntaxhighlighter-3.html

SyntaxHighlighter を Movable Type で使うプラグインには次のものがある。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/


SyntaxHighlighter for Movable Type | kwrogu
http://blogspot.makotokw.com/portfolio/movabletype/syntaxhighlighter/

SyntaxHighlighter for Movable Type « kwLog
http://blog.makotokw.com/portfolio/movabletype/syntaxhighlighter/

これは SyntaxHighlighter 2.x にしか対応していないのだが、最新版の 3.0.83 で無理矢理動かしてみた。

Continue reading

【Javascript】SyntaxHighlighter 3.0 の新機能と注意点

ブログ等でコードをさらすときに必携のスクリプト“SyntaxHighlighter”がメジャーバージョンアップして 3.0 になっていた。2.0 系、2.1 系よりアップデートするときの新機能と注意点について書いてみる。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

新機能について
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html

Continue reading

SyntaxHighlighterでYAMLをハイライトする

当然と言えば当然だが、TT2 のとき(その1その2)よりは遙かに楽だった。
# サンプル
arg1: value1
arg2:
    -   [ value2, value3 ]
    -   arg3:
            - value4
修正・作成するファイルは2つ。

ファイル名
/mt/plugins/SyntaxHighlighter/lib/SyntaxHighlighter/Plugin.pm

        'html'=>'shBrushXml',
        'xhtml'=>'shBrushXml',
        'tt' => 'shBrushTT2',
        'tt2' => 'shBrushTT2',
# 前回の修正の直後に書き加える
        'yml' => 'shBrushYAML',
        'yaml' => 'shBrushYAML',
    );

ファイル名
/mt-static/plugins/SyntaxHighlighter/2.0/scripts/shBrushYAML.js

/* こっちは新たに作成する
   かなり大雑把だけど、一応の役には立つよね */
SyntaxHighlighter.brushes.YAML = function() {
    this.regexList = [
        { regex: /#.*$/gm,     css: 'comments' }
        ,{ regex: /\w+:/g,     css: 'keyword' }
        ,{ regex: /[^#:]+$/gm,    css: 'string' }
        ,{ regex: SyntaxHighlighter.regexLib.doubleQuotedString
            ,css: 'string' }
        ,{ regex: SyntaxHighlighter.regexLib.singleQuotedString
            ,css: 'string' }
    ];
};
SyntaxHighlighter.brushes.YAML.prototype
    = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.YAML.aliases
    = ['yml', 'yaml'];
最後にMTのHTMLヘッダーテンプレートを書き換えて完了だ。
<$mt:SyntaxHighlighterInclude brush="html,perl,jscript,bash,tt2,plain,sql,yaml" theme="default"$>

SyntaxHighlighter でTemplate Toolkitをハイライトする その2

前回の状態ではTT2構文のハイライトはうまくいくものの、本来の用途である、HTML中に埋め込んだ状態ではそれが反映されなかった。それは今回使用したプラグインにおける以下の仕様のためだ。

SyntaxHighlighter for Movable Type « kwLog
  • SyntaxHighlighterのconfigurationには対応していません

よってプラグインの構文を無理矢理拡張して対応。さらにカラフルになった。

#!/usr/bin/perl
use utf8;
use strict;
use warnings;
use errors;

my $word = shift;
if ( $word =~ /orz/ ) {
    die "ズコー";
}

Continue reading

SyntaxHighlighterでTemplate Toolkitをハイライトする

これは結構大変だった。前回いじったshBrushPerl.jsと同じ場所 *1 shBrushTT2.jsを置いても、それだけでは反映されない。次のファイルをいじる。
/mt/plugins/SyntaxHighlighter/lib/SyntaxHighlighter/Plugin.pm
# 149行目あたりに2行を追加
        'html'=>'shBrushXml',
        'xhtml'=>'shBrushXml',
        'tt' => 'shBrushTT2',
        'tt2' => 'shBrushTT2',
    );
これで後はHTMLヘッダーテンプレートに"tt2"を加えるだけだ。
<$mt:SyntaxHighlighterInclude brush="html,perl,jscript,bash,tt2,plain" theme="default"$>
肝心のshBrushTT2.jsの中身は次の通り。

Continue reading

SyntaxHighlighterにハイライトしたい語句を追加する

Perl5.10で登場した語句や、Mooseなキーワードがハイライトされないのでそれを改良。といっても大したことはない。次のファイルをいじる。
/mt-static/plugins/SyntaxHighlighter/2.0/scripts/shBrushPerl.js
// 53行目あたり
    'undef unlink unpack ... ' +
    'say';
// 59行目あたり
    'require return sub ... ' +
    'try catch with using otherwise finally given when state BEGIN END ' +
    'extends requires has';
後は必要なときに付け足していこう。

初めてのブログ

技術系(?)のネタはこちらに書くことにする。Perl見習いとしてはやはりMovable Typeだろうと言うことで、一日かけてセットアップした。
とりあえず真っ先にシンタックスハイライトプラグインを導入。ググってみたらこれが一番いいみたい。

SyntaxHighlighter for Movable Type « kwLog
http://blog.makotokw.com/portfolio/movabletype/syntaxhighlighter/

"say"のような新しいwordをハイライトしてくれないみたいだが、それはまた後でいじろう。

#!/usr/bin/perl
use utf8;
use errors -with_using;
use Modern::Perl;

say "Hello, World!";

Index of all entries

Home > Web > | javascript > SyntaxHighlighter Archive

Feeds
CC Licence

Creative Commons License

このブログはクリエイティブ・コモンズでライセンスされています。

W3C Validation

I ♥ validator

Return to page top