-
Notifications
You must be signed in to change notification settings - Fork 4.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
markdown-it 插件如何写(三) #255
Labels
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
前言
在 《一篇带你用 VuePress Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档。
在搭建博客的过程中,我们出于实际的需求,在《VuePress 博客优化之拓展 Markdown 语法》中讲解了如何写一个
markdown-it
插件,又在 《markdown-it 原理解析》中讲解了markdown-it
的执行原理,本篇我们将讲解具体的实战代码,帮助大家更好的写插件。markdown-it-inline
markdown-it
的作者提供了markdown-it-inine
用于方便修改 inline tokens 。举个例子,如果我们给所有的链接添加target="_blank"
,正常你需要这样写:使用
markdown-it-for-inline
后:如果我们要替换掉某个文字,也可以使用
markdown-it-for-inline
:markdown-it-container
markdown-it 的作者同样提供了 markdown-it-container 用于快速创建块级自定义容器。
有了这个插件,你可以这样使用 markdown 语法:
注意这其中的
:::
是插件定义的语法,它会取出:::
后的字符,在这个例子中是warning
,并提供方法自定义渲染结果:最终渲染的结果为:
像 VuePress 提供了自定义容器:
其实就是用
markdown-it-container
实现的,其实现源码为:系列文章
博客搭建系列是我至今写的唯一一个偏实战的系列教程,预计 20 篇左右,讲解如何使用 VuePress 搭建、优化博客,并部署到 GitHub、Gitee、私有服务器等平台。本篇为第 18 篇,全系列文章地址:https://github.com/mqyqingfeng/Blog
微信:「mqyqingfeng」,加我进冴羽唯一的读者群。
如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。
The text was updated successfully, but these errors were encountered: