pulldown_cmark使ってMarkdownEditor作ってみた

はじめに

前回まではRustとWebAssembly使ってFavicon生成などの画像処理を学習していたが、

今回はユーティリティ系アプリの作成もしてみたいので、pulldown_cmarkを使ってマークダウンエディタを作ってみる。

以前作成したfaviconツールについて

pulldown_cmarkについて

プロジェクトの作成

pulldown_cmarkを使うと簡単にマークダウンの処理が可能。

下記のようにOptionと入力文字でParserを作成し、

Parserをpush_htmlのメソッドにいれるだけでHTMLに変換される(便利すぎる😎)

lib.rs

// 省略

#[wasm_bindgen]
pub fn md_preview(input: String) -> String {
    let mut options = Options::empty();
    options.insert(Options::ENABLE_TABLES);
    options.insert(Options::ENABLE_FOOTNOTES);
    options.insert(Options::ENABLE_STRIKETHROUGH);
    options.insert(Options::ENABLE_TASKLISTS);
    options.insert(Options::ENABLE_SMART_PUNCTUATION);
    options.insert(Options::ENABLE_HEADING_ATTRIBUTES);
    options.insert(Options::ENABLE_YAML_STYLE_METADATA_BLOCKS);
    options.insert(Options::ENABLE_PLUSES_DELIMITED_METADATA_BLOCKS);
    options.insert(Options::ENABLE_OLD_FOOTNOTES);
    options.insert(Options::ENABLE_MATH);
    options.insert(Options::ENABLE_GFM);
    let parser = Parser::new_ext(&*input,options);
    let mut result = String::new();
    html::push_html(&mut result, parser);
    result
}

// 省略

次に上記の関数を呼び出す処理を実装する。

JavascriptでtextareaをinputしたタイミングでリアルタイムにPreviewできるようにイベントを付与する。

index.js

// 省略

  textArea.addEventListener("input", (event) => {
        document.getElementById("preview").innerHTML = md_preview(event.target.value);
    });

// 省略

主要機能のコーディングはこれだけ！

他に欲しい機能などを実装して完了！！

今回の成果物

デモURL

デモ画像

ソース

まとめ

上記のようなMarkdownを処理するライブラリがJavascriptにも存在しているので、そちらも使ってみたい。📝

簡単に楽しくコーディングできるのでこういったライブラリ作ってくださる方々に感謝です。🙏

※間違い等ありましたら、ご指摘いただけると助かります。