10 分钟内使用 Svelte 构建 Markdown 编辑器

Svelte.js（或简称“Svelte”）是一个现代 JavaScript 编译器，它允许您编写易于理解的 JavaScript 代码，然后将其编译为在浏览器中运行的高效代码。

Svelte 编译器将您的组件编译为 JavaScript，而不是依赖虚拟 DOM 之类的概念来更新浏览器 DOM。这可以提升性能，并为您的代码带来真正的响应式体验。

在阅读了Snipcart上的一篇文章后，我受到启发，尝试了 Svelte markdown demo。

让我们构建一个 Markdown 编辑器。我的目标是展示如何简单快速地开始使用 Svelte。

如果你想直接查看代码，可以查看我的Git repo

1. 设置

首先使用以下命令创建 svelte 项目。

npx degit sveltejs/template svelte-markdown-demo

完成上述命令后，您将看到项目文件夹已创建。如下所示

cd svelte-markdown-demo
npm install

完成上述命令后，您将看到项目中已创建 node_modules 文件夹。如下所示

使用以下命令运行您的项目。

npm run dev

导航到http://localhost:5000/。您将看到以下输出

2. 安装 Marked
在这个 Svelte 项目中，我们将使用优秀的Marked库、一个 markdown 解析器和编译器。

让我们使用以下命令将标记的包安装到我们的项目中

npm install marked

3. 让我们编写代码

在你的项目中，打开 App.svelte——我们将直接在这个组件中编写应用程序。为了展示 Svelte 的简洁性，我们将所有内容都写在这个组件中。
删除脚本标签中的代码。
然后，导入标记。在脚本标签顶部添加以下行：

import marked from 'marked';

-然后我们将创建两个变量，源包含将由标记编译的 markdown 文本，另一个包含由Marked库编译的 HTML。

let source = `
# H1 heading

## H2 heading

### H3 heading

---

**bold text**

*italicized text*

---

1. First item
2. Second item
3. Third item

- First item
- Second item
- Third item

[Svelte](https://svelte.dev/)
`;
let markdown = marked(source);

让我们编写模板。在同一个文件 (App.svelte) 中，在脚本块后添加以下几行。

<main class="container">
<header class="header">
    <h1 class="header-title">Svelte markdown editor</h1>
</header>

<div class="markdown-editor">
    <div class="left-panel">
        <textarea bind:value={source} class="source"></textarea>
    </div>

    <div class="right-panel">
        <div class="output">{@html markdown}</div>
    </div>
</div>
</main>

我们创建了一个带有一个标题和两个面板的容器。
左侧面板是一个文本区域，我们将在其中写入源代码或 markdown。
直接使用bind:value，我们指示 Svelte 将此表单元素的值绑定到我们的源变量。
右侧面板将显示编译后的 markdown 的输出。
这里是 Svelte 中可以使用的特殊标签：{@html ...}。此标签将确保 HTML 直接在组件中呈现。

最后，我们将添加一些样式。在同一个文件中，在模板后添加一个样式块。

    .container{
        background: #ff3e00d6;
        padding:10px 30px;
    }
    .header {
        height: 10vh;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .header-title {
        margin: 0;
        color:#fff;
    }
    .markdown-editor {
        width: 100%;
        display: flex;
        align-items:flex-start;
        justify-content: space-evenly;
    }
    .left-panel, .right-panel {
        width: 50%;
        border: solid 1px black;
        height: 85vh;
        background: #ffffff;
    }
    .right-panel {
        overflow: auto;
    }
    .source {
        border: none;
        width: 100%;
        height: 100%;
        background: #001628;
        color: #83ba52;
    }
    .source:focus {
        outline: none;
    }
    .output {
        width: 100%;
        padding: 0 2em;
    }