mieki256's diary

mieki256's diary

2021/02/13(土) [n年前の日記]

2021/02/13(土) [n年前の日記]

2021/02/13(土) [n年前の日記]

#1 [hsp][hns] hns上でHSPのスクリプトソースを色付け表示してみたい

#1 [hsp][hns] hns上でHSPのスクリプトソースを色付け表示してみたい

最近の日記

検索

過去ログ表示

#1 [hsp][hns] hns上でHSPのスクリプトソースを色付け表示してみたい

最近の日記

カテゴリ一覧

検索

過去ログ表示

◎ ちと問題があった。 :

◎ コメント行への対応がアレっぽい。 :

◎ 動作テスト。 :

◎ 自分の手元の hns を修正。 :

◎ ちと問題があった。 :

◎ コメント行への対応がアレっぽい。 :

◎ 動作テスト。 :

◎ 自分の手元の hns を修正。 :

◎ ちと問題があった。 :

◎ コメント行への対応がアレっぽい。 :

◎ 動作テスト。 :

◎ 自分の手元の hns を修正。 :

この日記ページは、hns (Hyper NIKKI System) というWeb日記生成システムで表示しているのだけど。 *1

_Hyper NIKKI System Project

プログラムソース部分については、SyntaxHighlighter という JavaScript を利用させてもらって色付け表示していて。

_syntaxhighlighter/syntaxhighlighter

SyntaxHighlighter は、メジャーなプログラミング言語には対応しているのだけど、HSP には対応していない。どうにかできないものか…。と思ってググってみたら、HSP用の SyntaxHighlighter Brush ファイルを公開してくれている方が。ありがたや。使わせてもらったり。

_HSP用のSyntaxHighlighter定義用ファイル（shBrushHsp.js） | Codetter（こーどったー）

brushファイルというのは、それぞれの言語の色分け表示に対応させるための定義が書かれているファイル、とでも言うか…。例えば C++ソースの色分け表示なら shBrushCpp.js で定義されてるし、Perlの色分け表示なら shBrushPerl.js で定義されてる。なので、HSPに対応させるなら、shBrushHsp.js を作って対応させることになる。

試してみたところ、一部で問題が…。

「key & $80」が「key &; $80」に。
「count >= wait_frame」が「count >;= wait_frame」に。

何故か「;」が挿入されてしまうようだなと…。

色々試してみたけれど、どうやら shBrushHsp.js 内で、「;」を使ったコメント行に対応させるための行を入れると、件の症状が出るようで。

「;」がコメントになってる言語って他に何があったかなと調べてみたら、Lisp がそういう言語仕様のようで。であれば、shBrushLisp.js を参考にすればどうにかなりそうな予感。

shBrushHsp.js の一部を、以下のように書き換えてみた。

        this.regexList=[
            {regex:SyntaxHighlighter.regexLib.singleLineCComments,  css:'comments'},
            {regex:SyntaxHighlighter.regexLib.multiLineCComments,   css:'comments'},
            {regex:SyntaxHighlighter.regexLib.doubleQuotedString,   css:'string'},
            
            {regex: new RegExp('&\\w+;', 'g'),                      css:'plain'},
            {regex: new RegExp(';.*', 'g'),                         css:'comments'},
            
            {regex: /\#\w+/gm,                                      css:'preprocessor'},
            {regex: /\*\w+/gm,                                      css:'functions'},
            {regex: /\$\w+/gm,                                      css:'value'},
            
            {regex:new RegExp(this.getKeywords(keywords),'gm'),     css:'keyword'}
            ];

試しに、HSPスクリプトっぽいものを仮で書いて動作確認してみる。

言語の指定をしない場合は以下のように表示される。

; HSPスクリプトソースの色分け表示のテスト
; コメント文
// これもコメント文
/*
これもコメント文
*/

#define winid 3

    a = $80

*mainloop
    stick key, $FF
    if key & $80 : goto *endjob
    if count >= wait_frame {
        step = step + 1
    }
    if count <= 10 : goto *endjob
    if count = 0 : goto *endjob
    if count ! 0 : goto *endjob
    goto *mainloop

*jobend
    end

SyntaxHighlighter で色付け表示してみる。これでどうかな…。

; HSPスクリプトソースの色分け表示のテスト
; コメント文
// これもコメント文
/*
これもコメント文
*/

#define winid 3

    a = $80

*mainloop
    stick key, $FF
    if key & $80 : goto *endjob
    if count >= wait_frame {
        step = step + 1
    }
    if count <= 10 : goto *endjob
    if count = 0 : goto *endjob
    if count ! 0 : goto *endjob
    goto *mainloop

*jobend
    end

おかしな表示ではなさそう。これでどうにかなった…かな…。たぶん。

一応、修正した版も置いておきます。

_shbrushhsp.js.txt

一応、自分の手元の hns について修正した部分をメモしておく。他の人にとっては意味不明でも、作業メモを残しておかないと、後で似た作業をする時に自分が困るので…。

手元で動いている SyntaxHighlighter は、Version 3.0.83 (July 02 2010)。前述の shBrushHsp.js とバージョンは一致してた。

scripts/ 以下に shBrushHsp.js として保存。
hns の theme.ph 内に「,"hsp scripts/shBrushHsp.js"」を追記。

theme.ph の最初のあたりは、こんな感じの記述になった。

################################################################
# Extend HTML
package HNS::ExtHTML;
$DOCTYPE = qq(<?xml version="1.0"?>\n<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"\n"http://www.w3.org/TR/html4/loose.dtd">\n);
#$Head = undef;
$Head = qq[
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="icons/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="RSS" href="${HNS::System::MyDiaryURI}rss.cgi">
<META http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="./import.css" type="text/css" media="all">

<link type="text/css" rel="stylesheet" href="styles/shCore.css">
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css">
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shAutoloader.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<script type="text/javascript">
window.onload=function(){
    SyntaxHighlighter.autoloader(
        "bash                     scripts/shBrushBash.js"
        ,"as3 actionscript3       scripts/shBrushAS3.js"
        ,"cpp c                   scripts/shBrushCpp.js"
        ,"c-sharp csharp          scripts/shBrushCSharp.js"
        ,"css                     scripts/shBrushCss.js"
        ,"js jscript javascript   scripts/shBrushJScript.js"
        ,"perl pl                 scripts/shBrushPerl.js"
        ,"text plain              scripts/shBrushPlain.js"
        ,"python py               scripts/shBrushPython.js"
        ,"ruby rails ror          scripts/shBrushRuby.js"
        ,"vb vbnet                scripts/shBrushVb.js"
        ,"lisp                    scripts/shBrushLisp.js"
        ,"lua                     scripts/shBrushLua.js"
        ,"hsp                     scripts/shBrushHsp.js"
    );
    SyntaxHighlighter.all();
}
</script>
];

加えて、lib/HNS/Hnf/Command.pm を弄って、「PRE perl」「PRE hsp」といった指定もできるようにしてあった…はず…。このあたりは記憶が怪しい…。

# PRE
package HNS::Hnf::Command::PRE;
use vars qw(@ISA $Template $EndTemplate $NumAttr $IsOneline $AllowCommands
            $IsBeginSection $CountName $OmittableEnd
            $TemplateWithCode $EndTemplateWithCode
            $TemplateWithoutCode $EndTemplateWithoutCode);

@ISA = qw(HNS::Hnf::Command::Cite);
$NumAttr = 1;
$Template                = qq(<pre class="plain">);
$EndTemplate             = qq(</pre>);
$TemplateWithoutCode     = qq(<pre class="plain">);
$EndTemplateWithoutCode  = qq(</pre>);
$TemplateWithCode      = qq(<pre class="brush: %1">);
$EndTemplateWithCode   = "</pre>";
# $TemplateWithCode        = qq(<pre><code>);
# $EndTemplateWithCode     = qq(</code></pre>);
$AllowCommands = [$HNS::Hnf::Command::Entities{'Inline'}];

sub AsHTML ($$$){
    my ($self, $start, $params) = @_;
    my $codelang = $self->{attr}->[1];
    if ( $codelang ) {
        $Template = $TemplateWithCode;
        $EndTemplate = $EndTemplateWithCode;
    } else {
        $Template = $TemplateWithoutCode;
        $EndTemplate = $EndTemplateWithoutCode;
    }
    return $self->SUPER::AsHTML($start, $params);
}

: ブログじゃなくて、ウェブ日記。

[ ツッコむ ]

以上です。

Prev - 2021/02 - Next