JS 製フレームワーク Svelte + marked で Markdown 記法を書けるようにする

Markdown 系 javascript ライブラリのインストール

• Markdown 記法にできる javascript は github に色々あるので、使いやすいものを選べばいいと思う。
• 今回は marked を使用する。

$ npm install --save marked

Markdown

• ルーティングなどのコードは割愛。
• getter 使えばいい感じになる。
  • ex) get markedStr() { return marked(this.str) }
    • ex) <div class="md">{ @html cls.markedStr }</div>
• index.svelte 上に .md に対しての css を記述しても .md 以下の Markdown 記述がスタイル適用されない。ビルド時に svelte ファイル上に書いた js や css を最適化して bundle.js や bundle.css に書き出すので、 svelte に関係ない marked はビルド時にどういった挙動起こすか把握してないから、 css のスタイルがうまく反映されないのだと思う。
• なので .md に関連するスタイルは gulp + sass で別途書き出した。

index.svelte

<script>

	import marked from 'marked'

	marked.setOptions({
		breaks: true,
	})

</script>

<style lang="scss">

	$color: #f66;

	h1 {
		color: $color;
	}

</style>


<h1>Markdown</h1>

<div>
	<div class="md">
		<h3>test</h3>
		{ @html marked(`

### Headline 3

* list
* list
* list

		`) }
	</div>
</div>