1 mdast-qrcode Markdown に QR code を埋め込むパッケージ 2 概要 以前に実験した「marp で作成したスライドで QR コードを表示する」をパッケージ化してみたので補足的なメモ。 npm パッケージ化 リッチエディタで扱いやすく Live Demo その他 3 npm パッケージ化 最近、npm レジストリへ登録するスターター を作成 QR code は手頃な題材なので試してみた せっかくなので、いくつか気になっていた点を改修 4 リッチエディタで扱いやすく 主な改修点として QR code の記述方法を拡張。 旧: src 内の qrcode: のみに対応 新: ファイル名にmdast-qrcode.*を指定することで、親ノードのリンク(URL)等も対象となる これによりメディアライブラリーへダミー画像を登録しておけば、リッチエディタの UI でも編集可能となる。 ※ mardock(このサイト)ではリッチエディタの出力を一旦 Markdown へ変換しています。 5 サンプル(ダミー画像貼り付け) 6 サンプル(データ入力画面) 7 サンプル(変換結果) https://github.com/hankei6km/mdast-qrcode 8 Live Demo LiveDemo QR code 対応のソースで marp スライドを作成する Sandbox(リッチエディタではなく通常の Markdown による入力ですが)。 CodeSandbox 上で fork すればそのまま編集可能 ローカルへ clone してyarn install yarn startで localhost:3000 を開いても動く、はず 9 スクリーンショット 10 その他 CLI サポートなど。 mdqr コマンドの追加 marp-cli と組み合わせることでコードの作成なしで利用可能 ただし、パイプとして使うことが前提 :qrcode 変換以外にも Markdown 文字列に影響がある 変換前のソースは保持し、変換後のソースは他コマンドへ渡すのみにとどめるため
