最終更新日 2025-07-22

秀丸エディタ・HmCustomLivePreviewのカスタム マークダウン編

概要

ここでは、前節「秀丸エディタ・HmCustomLivePreviewのカスタム」の最後の章です。

以下のような、「マークダウンのライブビュー」も、HmCustomLivePreview を利用すれば、
簡単に実現可能です。

PICTURE

ダウンロード

更新日 2017/12/08
HmCustomLivePreviewMD.zip

使い方

HmCustomLivePreviewMD.macの解説

今回は、秀丸のテキストを、マークダウンとみなして、HTMLレンダリングするように組んだものとなります。
HmCustomLivePreviewは、.NETライブラリだけではなく、JScriptで動作するライブラリも利用可能ですので、
マークダウンのライブラリとしては最も有名な「marked.js」をそのまま利用しています。

#dll = loaddll( currentmacrodirectory + @"\HmCustomLivePreview.dll" );
if (!#dll) {
  message("HmCustomLivePreview.dllを読み込むことが出来ません。");
  endmacro;
}


// 以下 marked.js(https://github.com/chjj/marked/tree/master/lib)。のソースそのまま「HmCustomLivePreviewMD.js」として保存。
// 一切編集していない。
#_ = dllfuncw( #dll, "DoFile", currentmacrodirectory + @"\HmCustomLivePreviewMD.js" );


// 以下メイン処理
#_ = dllfuncw( #dll, "DoString", R"JSCRIPT(

function OnCustomTranslateHTML(filename, rawtext) {

    // テキストをマークダウンとして解釈して、htmlに変換
    var html = marked(rawtext);
    return html;
}

)JSCRIPT"
);

// HmCustomLivePreviewの表示
#_ = dllfuncw( #dll, "Show", hidemaruhandle(0) );

HmCustomLivePreviewMD.macを見てみると、下図のようになります。

PICTURE

たったこれだけのことで、マークダウンのリアルタイムビューの基礎が出来上がりました。

HmCustomLivePreviewを一度閉じましょう。

さらに利便性を高める工夫

といったことを実現するため、最終的には以下のようなソースとなっています。

#dll = loaddll( currentmacrodirectory + @"\HmCustomLivePreview.dll" );
if (!#dll) {
    message("HmCustomLivePreview.dllを読み込むことが出来ません。");
    endmacro;
}

//------------------------------------------------------------------------------------------------------------------------------
// 「HmCustomLivePreviewMD.js」は「marked.js(https://github.com/chjj/marked/tree/master/lib)」のソースそのまま。
//------------------------------------------------------------------------------------------------------------------------------
#_ = dllfuncw( #dll, "DoFile", currentmacrodirectory + @"\HmCustomLivePreviewMD.js" );


//------------------------------------------------------------------------------------------------------------------------------
// HmCustomLivePreviewの処理
//------------------------------------------------------------------------------------------------------------------------------
#_ = dllfuncw( #dll, "DoString", R"JSCRIPT(

// 秀丸マクロシンボルのcurrentmacrodirectoryをJScript空間に読み込み。
var currentmacrodirectory = hm.Macro.Var("currentmacrodirectory");

// GithubっぽいCSSファイルの指定
var css  = "<link href='" + currentmacrodirectory+"\\HmCustomLivePreviewMD.css" + "' rel='stylesheet'>" + "\n";

// 最後のテキスト
var last = {
    rawtext : "",
    all : "",
};

function OnCustomTranslateHTML(filename, rawtext) {

    // 軽量化の一環。前回と同じテキスト内容なら同じ結果
    if (last.rawtext == rawtext ) {
        return last.all;
    }
    last.rawtext = rawtext;

    // テキストをマークダウンとして解釈して、htmlに変換
    var html = marked(rawtext);

    // 事故おこしてるようなら、元の文字列そのまま返す
    if (!html) {
        return rawtext;
    }

    // 編集中テキストに対する相対アドレスに対応するには、自身のベースURLを保つ必要がある。
    var base = "";
    if ( filename && !html.match(/<base\s+/) ) {
        base = "<base href='" + filename + "'>" + "\n";
    }

    last.all = base + css + "\n\n\n" + html;
    return last.all;
}

)JSCRIPT"
);

// HmCustomLivePreviewの表示
#_ = dllfuncw( #dll, "Show", hidemaruhandle(0) );

改良されたHmCustomLivePreviewMD.macを見てみると、下図のようになります。

PICTURE

独自のマークダウンの追加

marked.jsでは、Githubのマークダウンなどで利用できる「チェックボックス」の機能が実装されていません。
独自に追加するとすれば、以下のようになるでしょう。

function OnCustomTranslateHTML(filename, rawtext) {

    // 軽量化の一環。前回と同じテキスト内容なら同じ結果
    if (last.rawtext == rawtext ) {
        return last.all;
    }
    last.rawtext = rawtext;

    // チェックボックスへの変換機能を追加。
    rawtext = rawtext.replace(/\- \[x\]/g, '<input type="checkbox" checked="checked">')
                     .replace(/\- \[ \]/g, '<input type="checkbox">');

    // テキストをマークダウンとして解釈して、htmlに変換
    var html = marked(rawtext);

ライセンス