mdast-qrcode

概要

以前に実験した「marp で作成したスライドで QR コードを表示する」をパッケージ化してみたので補足的なメモ。

• npm パッケージ化
• リッチエディタで扱いやすく
• Live Demo
• その他

npm パッケージ化

• 最近、npm レジストリへ登録するスターター を作成

  • QR code は手頃な題材なので試してみた

• せっかくなので、いくつか気になっていた点を改修

リッチエディタで扱いやすく

主な改修点として QR code の記述方法を拡張。

• 旧: src 内の qrcode: のみに対応
• 新: ファイル名にmdast-qrcode.*を指定することで、親ノードのリンク(URL)等も対象となる

これによりメディアライブラリーへダミー画像を登録しておけば、リッチエディタの UI でも編集可能となる。

※ mardock(このサイト)ではリッチエディタの出力を一旦 Markdown へ変換しています。

サンプル(ダミー画像貼り付け)

サンプル(データ入力画面)

サンプル(変換結果)

https://github.com/hankei6km/mdast-qrcode

Live Demo

LiveDemo

QR code 対応のソースで marp スライドを作成する Sandbox(リッチエディタではなく通常の Markdown による入力ですが)。

• CodeSandbox 上で fork すればそのまま編集可能
• ローカルへ clone してyarn install yarn startで localhost:3000 を開いても動く、はず

スクリーンショット

その他

CLI サポートなど。

• mdqr コマンドの追加

• marp-cli と組み合わせることでコードの作成なしで利用可能

• ただし、パイプとして使うことが前提

  • :qrcode 変換以外にも Markdown 文字列に影響がある
  • 変換前のソースは保持し、変換後のソースは他コマンドへ渡すのみにとどめるため