vue-markdown-preview-virtualdom

Addressing a problem with the Markdown editor and its preview, where all the elements in the preview are updated each typing.

• The display by v-html redraws all elements for each character entered.
• By breaking up the HTML into Vue's VirtualDOM and rendering it, only the change differences on the preview are updated.
• This eliminates problems such as reloading images and the resulting scrolling misalignment.

Explanation blog entries:

• VueでMarkdownのプレビューをVueの仮想DOMで表示する — 清水川Web
• Vue MarkdownエディタにMermaidを組み込んで仮想DOMでレンダリング — 清水川Web
• Vue Componentの再利用による意図しない描画を避ける、MD仮想DOM描画の特殊ケース — 清水川Web
• markdown-itでlinkをblock要素としてパースするプラグインを作る — 清水川Web

日本語

Markdown エディタとそのプレビューを作るときに、プレビューのエレメントが文字入力ごとに全て更新されてしまう問題の対処。

• v-htmlによる表示は1文字入力毎に全てのエレメントを再描画します。
• HTMLをVueのVirtualDOMに分解してレンダリングすることで、プレビュー上の変更差分だけが更新されます。
• これによって、画像の再ロードや、それに伴うスクロール位置のズレなどの問題を解消できます。

licenses

• MIT License (except bellow files)
• MICAN by @nana_marux / CC BY-NC 4.0 DEED
• XKCD Comic #353: Python / CC BY-NC 2.5 DEED

v-html vs VirtualDom

20231125-demo-1.mp4

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

You should invoke proxy process to use block-link rendering feature,

npm run proxy

Type-Check, Compile and Minify for Production

npm run build