本文将介绍如何使用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版)》可作为软件开发入门者的学习用书,也可作为高等院校相关专业的教学参考用书,还可供开发人员查阅、参考使用。
这本书有如下特色:
-
循序渐进,实战讲述
-
243集教学微课视频,39小时知识点精讲,可听可看,随时随地扫码学
-
趣味解读,易教易学
-
赠送Python实战训练背记手册
-
在线解答,高效学习
企业QQ、QQ群在线答疑,明日学院社区答疑。
每周清大文森学堂在线直播答疑。
购买链接:https://u.jd.com/XIgAG8g
精彩回顾
微信搜索关注《Python学研大本营》
访问【IT今日热榜】,发现每日技术热点