Svelte Markdown Editor

Svelte で、簡単なマークダウンエディタを作ってみたサンプルプログラム。

以下のライブラリを用いた。

  • marked
    • マークダウンから HTML に変換
  • isomorphic-dompurify
    • HTML をサニタイズ

スタイリングは最低限にしかしていない。

チェックポイント

  • src/lib/md/
    • マークダウン関連の関数、コンポーネントを格納している。
    • テストコードも同梱している。
  • src/lib/md/core/
    • コア部分は、マークダウンから HTML 文字列への変換、サニタイズ等のコードがある。
    • ここは、Svelte に依存しないコードなので他のプロジェクトでも流用できる。(依存するサードパーティパッケージは導入する必要はある)
  • src/lib/md/core/marked.ts
    • markedを使って、マークダウンから HTML 文字列への変換をする際に、カスタムのレンダラーを定義している。(具体的な内容はコードを参照されたし)
      • <a>target="_blank" を付与したり、 rel 属性をつけている。
      • <code>highlight.js のために class="language-xxx" を付与している。(※pre > code コードブロックのみ対象)

確認方法

npm install
npm run dev

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes