ライブラリなしでライブMarkdownエディタを作成した

Markdownエディタを構築するのに、重いライブラリは必要ありません。私は約40行のコードで動作するバージョンを作成しました。入力に合わせてHTMLを即座にレンダリングします。

プロセスは5つの具体的なステップに従います：

  1. HTML文字のエスケープ まず < や > といった記号を置換する必要があります。これにより、scriptタグによるXSS攻撃を防ぎます。これをスキップすると、エディタの安全性が損なわれます。

  2. コードブロックの保護 コードブロックを抽出し、プレースホルダーに置き換えます。これにより、フォーマット規則がサンプル内のコードを壊さないようにします。

  3. ブロックルールの処理 テキストの全行を走査します。

  • # を使用して h1 タグを作成します。
  • - を使用してリストアイテムを作成します。
  • > を使用して引用を作成します。 リストの行を単一の ul タグにまとめます。
  1. インライン正規表現の適用 正規表現を使用してテキストスタイルを処理します。
  • **text** を strong タグに変換します。
  • [text](link) をアンカータグに変換します。 順序が重要です。エラーを避けるため、イタリックの前にボールドを処理してください。
  1. ライブレンダリング キー入力のたびにコンテンツ全体を再レンダリングします。Markdownは軽量で解析が速いため、即座に分割画面のようなエフェクトが得られます。

ロジックはシンプルです：エスケープ、保護、ブロックルール、インライン正規表現、そしてレンダリング。

ライブエディタはこちらから試せます: https://dev48v.infy.uk/solve/day11-markdown-editor.html

ソース: https://dev.to/dev48v/i-built-a-live-markdown-editor-with-no-library-40-lines-3ln9