如何掌握Vue 3中的markdown

Python学研大本营

已于 2023-04-25 11:05:33 修改

阅读量882

点赞数

文章标签： vue.js javascript 前端

于 2023-04-25 10:59:50 首次发布

本文链接：https://blog.csdn.net/weixin_39915649/article/details/130360239

版权

本文将介绍如何使用Markdown-it。

微信搜索关注《Python学研大本营》，加入读者群，分享更多精彩

介绍

Markdown 对于显示和存储格式化文本非常有用。例如常用的readme.md 文件就可以在存储库中随存储库。

语法简单但有效。例如，下表中是一个基本的例子：

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

结果如下：

或者，一个列表：

- Bacon
- Ham
- Eggs

或者：

Bacon
Ham
Eggs

那么，如何将未格式化的 Markdown 文本变成更适合观看的内容呢？

有人已经为此制作了一个名为markdown-it的工具，否则将不得不制作自己的解析器，这将是一件痛苦的事情。

Markdown-it

Markdown-it 是一个 javascript markdown 解析器，导出一个函数，可以生成纯 HTML，人们可以随意使用。如 GitHub 页面所述，它还具有大量插件和功能。

用它制作一个Vue 组件非常容易，唯一的要求是在设置一些参数后安装和导入markdown-it函数并使用该render方法。

要求和插件

首先要做的事情 - 安装依赖项。

最重要的是 markdown-it 本身：

npm i markdown-it

或者

yarn add markdown-it

推荐其他更有用的插件，因为markdown-it默认不支持某些功能：

markdown-it-abbr - 缩写
markdown-it-anchor - 锚点的自动 ID，可用于为页面的某些部分添加书签。
markdown-it-footnote
markdown-it-highlightjs - 对语法高亮非常有用
markdown-it-sub - 下标
markdown-it-sup - 上标
markdown-it-task-lists - 复选框的格式化列表

编写组件

导入markdown-it包及其插件后，可以使用 render 方法生成输出：

import MarkdownIt from "markdown-it";

const markdown = new MarkdownIt();

markdown.render("# Header");

因此，它应该产生以下结果：

<h1>Header</h1>

你也可以把之前提到的插件放进去：

const markdown = new MarkdownIt()
  .use(MarkdownItAbbr)
  .use(MarkdownItAnchor)
  .use(MarkdownItFootnote)
  .use(MarkdownItHighlightjs)
  .use(MarkdownItSub)
  .use(MarkdownItSup)
  .use(MarkdownItTasklists);

剩下的只是定义一个字符串属性，组件应该使用它来显示所需的文本并使用常规的 Vue 语法：

<template>
  <div v-html="markdown.render(source)" />
</template>

<script setup lang="ts">
import MarkdownIt from "markdown-it";
import MarkdownItAbbr from "markdown-it-abbr";
import MarkdownItAnchor from "markdown-it-anchor";
import MarkdownItFootnote from "markdown-it-footnote";
import MarkdownItHighlightjs from "markdown-it-highlightjs";
import MarkdownItSub from "markdown-it-sub";
import MarkdownItSup from "markdown-it-sup";
import MarkdownItTasklists from "markdown-it-task-lists";
import MarkdownItTOC from "markdown-it-toc-done-right";

const markdown = new MarkdownIt()
  .use(MarkdownItAbbr)
  .use(MarkdownItAnchor)
  .use(MarkdownItFootnote)
  .use(MarkdownItHighlightjs)
  .use(MarkdownItSub)
  .use(MarkdownItSup)
  .use(MarkdownItTasklists)
  .use(MarkdownItTOC);

defineProps({
  source: {
    type: String,
    default: ""
  }
});
</script>

并这样使用：

<MarkdownRenderer :source="'# Hi!!'" />

关注公众号，接下来会持续介绍有关Vue以及Python的相关内容。

推荐书单

《Python从入门到精通》（第二版）

《Python从入门到精通（第2版）》从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细介绍了使用Python进行程序开发应该掌握的各方面技术。全书共分23章，包括初识Python、Python语言基础、运算符与表达式、流程控制语句、列表和元组、字典和集合、字符串、Python中使用正则表达式、函数、面向对象程序设计、模块、异常处理及程序调试、文件及目录操作、操作数据库、GUI界面编程、Pygame游戏编程、网络爬虫开发、使用进程和线程、网络编程、Web编程、Flask框架、e起去旅行网站、AI图像识别工具等内容。所有知识都结合具体实例进行介绍，涉及的程序代码都给出了详细的注释，读者可轻松领会Python程序开发的精髓，快速提升开发技能。除此之外，该书还附配了243集高清教学微视频及PPT电子教案。

《Python从入门到精通（第2版）》可作为软件开发入门者的学习用书，也可作为高等院校相关专业的教学参考用书，还可供开发人员查阅、参考使用。

这本书有如下特色：