开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 16 天，点击查看活动详情

引言

大家应该都接触过markdown笔记吧，我们常常见到很多能写文章的网页提供了一个实时的markdown解析的功能----即我们在一侧写下markdown语法，右边能够实时解析，并将解析后的markdown语法渲染到右侧页面上。非常炫酷实用，那么这是如何实现的呢？今天我们来一起探究一下。

开始

首先，我们这个演示学习在Vue3+TypeScript下使用的，所以我们预先建议准备一个Vue3+Typescript工程。

对于markdown的解析，我们可以使用markdown-it来进行解析。

比如，我们在左侧设置一个输入框，接收用户markdown输入，我们通过markdown-it来进行一个解析，然后渲染到右边页面，完成实时解析的一个效果。

例子

<template>
          <h1 class="Title">
          超级笔记
        </h1>
        <div class="main">
          <textarea class="notes" v-model="markdown" ></textarea>
          <div v-html="html" class="show"></div>
        </div>
</template>

<script lang="ts" setup>
  import {ref , Ref , computed} from 'vue';
  import MarkdownIt from 'markdown-it';

  const md = new MarkdownIt();

  let markdown:Ref<string> = ref('');
  const html = computed(()=>{
    return md.render(markdown.value);
  })
  </script>


<style scoped>
.main {
  display: flex;
  flex-direction: row;
}
.show {
  /* height: 700px; */
  height: 44rem;
  width: 55%;
  overflow-x: hidden;
 overflow-y: scroll;
  padding: 8px;
  background-color: white;
  color: black;
  font-size: 1rem;
}
.notes {
  color: black;
  height: 700px;
  width: 45%;
  font-size: 1rem;
  background-color: white;
  width: 50%;
  margin-top: 10px;
}
.Title {
  text-align: center;
  font-style: italic;
  font-family: "华文彩云";
}
</style>

我们看一下这个例子，我们给textarea绑定了一个markdown的变量，我们在script中使用markdown-it提供的方法进行一个解析，转换成一个html对象，并将其挂载到右侧的div上，使其达到一个markdown语法解析渲染的效果。

具体解析的使用就是 const md = new MarkdownIt();初始化一个md对象，然后我们通过computed计算属性调用md.render(markdown.value);来返回一个html对象，然后我们将他挂载到右边，进行一个v-html的渲染。

看看效果:

使用markdown-it对markdown进行一个实时解析

引言

开始

例子