January 20, 2023

RustのMarkdown→HTML変換ライブラリを静的サイトに埋め込んでみた

Markdown
HTML


使用したライブラリは2つ

pulldown-cmark でパースとレンダリングをしてもらい wasm-bindgen でJavaScriptとRustの橋渡しをしてもらいました


Rustのコードは数行だけ

※WasmtimeドキュメントのMarkdown Parserからコピペ

pub fn render_markdown(markdown: String) -> String {
    let mut html_buf = String::new();
    let parser = Parser::new(&markdown[..]);
    html::push_html(&mut html_buf, parser);
    html_buf
}

JavaScriptから間接的に render_markdown を呼び出しています

import init, { render_markdown } from './pkg/web_pulldown_cmark.js'

最後にビルドして完成

wasm-pack build --target web

ライブラリのお陰でほとんどコードを書かずに済みました


最初はMDNのWebAssembly JavaScript API の使用を読みながら試行錯誤していたのですが、どうやら文字列を渡すにはややこしい事をしないといけないみたいなので(参考:How to return a string (or similar) from Rust in WebAssembly?)結果 wasm-bindgen を使う事にしました

一連の流れはMDNのRust から WebAssembly にコンパイルするに載っています(必見!)


コンバータのリポジトリはこちら→https://github.com/hitorigoya/web-pulldown-cmark-example


参考サイト: