SvelteKitでmarkdownの記事を作成

はじめに

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

0. 使ったもの

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

UIコンポーネントにはFlowbite-svelteを利用しました。
導入方法は前の記事で公開しています。

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

$ npm i -S svelte-markdown

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

公式より

+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} />

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

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

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

完成形

+page.svelte

<script>
  import Markdown from '$lib/MarkdownForm.svelte';
  let value = '';

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

<Markdown value={value}/>

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;
}