SvelteKitでmarkdownの記事を作成

# はじめに

`SvelteKit`を使って`markdown`記事を作成したのでその時のメモ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/a9044e5c-12e4-cfaf-f4b0-51c4fcbd852e.png)

# 0. 使ったもの

* Vite + SvelteKit + Typescript
    * Flowbite-svelte
    * tailwind css
    * svelte-markdown


UIコンポーネントには[Flowbite-svelte](https://flowbite-svelte.com/)を利用しました。
導入方法は前の記事で公開しています。

https://qiita.com/doyaseizin/items/6e7e8571cc6c3d7ad2e8

# 1. svelte-markdownのインストール

```bash
$ npm i -S svelte-markdown
```

# 2. まず試しに使ってみる

公式より

```vue:+page.svelte
<script>
  import SvelteMarkdown from 'svelte-markdown'
  const source = `
  # This is a header

  This is a paragraph.

  * This is a list
  * With two items
      1. And a sublist
      2. That is ordered
          * With another
          * Sublist inside

  | And this is | A table |
  |-------------|---------|
  | With two    | columns |
`
</script>

<SvelteMarkdown {source} />
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/16887dda-9afe-d021-603f-6f09b1b08913.png)


cssはいい感じに調整してください👍

参考として最後に自分の設定を載せておきます。


# 3. EditとPreviewで記事作成フォームっぽく

完成形
![markdown.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/35cc3353-d815-3f50-e73b-556834cd1e25.gif)

```vue:+page.svelte
<script>
  import Markdown from '$lib/MarkdownForm.svelte';
  let value = '';

  // valueを使った処理
</script>

<Markdown value={value}/>
```

```vue:MarkdownForm.svelte
<script lang="ts">
  import { TabItem, Tabs } from "flowbite-svelte";
  import SvelteMarkdown from "svelte-markdown";

  export let value: string;
</script>

<Tabs style="full" defaultClass="flex rounded-lg divide-x divide-gray-200 shadow dark:divide-gray-700">
  <TabItem class="w-full" open>
    <span slot="title">Markdown</span>
    <textarea
      class="w-full rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:placeholder-gray-400 dark:text-white  border border-gray-200 dark:border-gray-600 text-area p-2.5 text-sm focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500"
      bind:value={value}
    />
  </TabItem>
  <TabItem class="w-full">
    <span slot="title">Preview</span>
    <SvelteMarkdown source={value}/>
  </TabItem>
</Tabs>

<style>
  textarea {
    height: 200px;
  }
</style>
```

`Flowbite-svelte`のタブを使って、入力の`textarea`と、`SvelteMarkdown`のプレビュー画面を切り替えられるようにしました。


# 4. 参考CSS

```:style.css
h1 {
  @apply dark:text-white text-4xl font-bold my-5;
  border-bottom: solid;
}

table {
  @apply dark:text-white;
  display: block;
  overflow: auto;
  margin: 1.5em 0;
  border-collapse: collapse;
}

table thead {
  @apply dark:text-white;
  border-left: 1px solid #ddd;
}

tr {
  @apply dark:text-white;
  border-left: 1px solid #ddd;
}
tr:nth-child(odd) {
  @apply dark:text-white;
  background-color: #eee;
}

tr:nth-child(even) {
  @apply dark:text-white;
  background-color: #fff;
}

th {
  @apply dark:text-white;
  font-weight: bold;
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 8px 10px;
}

td {
  @apply dark:text-white;
  text-align: left;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 8px 10px;
  max-width: 600px;
}
ol {
  @apply dark:text-white;
  list-style-type: decimal;
  padding-left: 20px;
}
```