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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: # 引言大家应该都接触过markdown笔记吧,我们常常见到很多能写文章的网页提供了一个实时的markdown解析的功能----即我们在一侧写下markdown语法,右边能够实时解析,并将解析后的markdown语法渲染到右侧页面上。非常炫酷实用,那么这是如何实现的呢?今天我们来一起探究一下。# 开始首先,我们这个演示学习在Vue3+TypeScript下使用的,所以我们预先建议准备一个Vue3+Typescript工程。对于markdown的解析,我们可以使用`markdown-it`来进行解析。比如,我们在左侧设置一个输入框,接收用户markdown输入,我们通过`ma

引言

大家应该都接触过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的渲染。

看看效果:

image.png

相关文章
|
7月前
|
数据采集 自然语言处理 程序员
ChatGPT 调教日记(一):Markdown 解析器
ChatGPT 调教日记(一):Markdown 解析器
174 0
|
小程序 前端开发 安全
uniapp中解析markdown支持网页和小程序
对于`markdown`相信大家都不陌生,日常写文档或日常记录都用到的比较多,书写的是`markdown`的格式,实时预览的是转换后的`html`样式。本次实现的需求是在`uniapp`中转换`markdown`文本展示在不同的平台,主要平台是浏览器使用和微信小程序使用。
268 1
|
JavaScript 前端开发
Vue3解析markdown解析并实现代码高亮显示
Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮。 Vue的markdown解析库有很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked,代码高亮的库选用的是highlight.js。
969 0
Vue3解析markdown解析并实现代码高亮显示
|
5月前
|
Unix Linux Shell
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
Sphinx是一个Python文档生成工具,它可以解析reStructuredText或Markdown格式的源代码注释,并生成多种输出格式,如HTML、LaTeX、PDF、ePub等。
|
7月前
|
JavaScript 前端开发 Java
小笔记:表 - 各种语言的 CommonMark Markdown解析器 实现
小笔记:表 - 各种语言的 CommonMark Markdown解析器 实现
225 1
|
JavaScript
正则表达式之简易markdown文件解析器
正则表达式之简易markdown文件解析器
144 0
|
23天前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
61 2
|
2月前
|
缓存 Java 程序员
Map - LinkedHashSet&Map源码解析
Map - LinkedHashSet&Map源码解析
72 0
|
2月前
|
算法 Java 容器
Map - HashSet & HashMap 源码解析
Map - HashSet & HashMap 源码解析
57 0
|
2月前
|
存储 Java C++
Collection-PriorityQueue源码解析
Collection-PriorityQueue源码解析
64 0

推荐镜像

更多