logo サブスレッド

TypeScript で remark-react

最近いろいろ踏んでる気がします。tamaです。

フロントサイドで Markdown をフォーマットしたいと思いました。
Reactに組み込むには react-markdown というモジュールがあるようですが、
GFM(GitHub-flavored Markdown)に対応した remark-react もあるというウワサを聞きつけそちらを試してみたところ
案の定苦戦したので記録に残しておきます。

remark-react は TypeScript の型定義ファイルがないので require() で読み込みます。
いちいち型定義ファイル作るほどでもなさそう。

2〜3年前のブログ記事は process()processSync() が返すオブジェクトの .contents プロパティを表示しているようですが、
remark 12.0.0、remark-react 7.0.1 の現在、.contents は元のMarkdownテキストしか示していません。
どうも VFileインタフェースでは定義されていない .result というプロパティに react.element が格納されているもよう。

import remark from 'remark';

const remark2react = require('remark-react');

export function md2react(markdown: string, options?: any) {
    const processor = remark().use(remark2react, options);

    if (options && options.async) {
        // 非同期版
        return new Promise((accept, reject) => {
            processor.process(markdown, (error, file: any) => {
                if (error) {
                    reject(error);
                } else {
                    accept(file.result || file.contents)
                }
            });
        });
    } else {
        // 同期版
        const file: any = processor.processSync(markdown);
        return file.result || file.contents;
    }
}

というわけで雑にまとめるとこんなモジュールを用意しておけば
<div>{md2react('# title\n* __list__\n * _item_')}</div>
みたくしてReact要素化したMarkdownを錬成できそうです。

現在の位置:サブスレッド ホーム > 技術ブログ > TypeScript で remark-react