在Vue 3项目中,使用markdown-it库可以方便地解析Markdown内容,并通过集成highlight.js库实现语法高亮功能。以下是详细步骤,包括如何在Vue 3项目中实现Markdown语法高亮: 1. 安装必要的依赖 首先,你需要安装markdown-it和highlight.js库。如果你使用的是TypeScript项目,还需要安装相应的类型定义。 bash npm install ...
npm install markdown-it-highlight 在 获取 .css 文件node_modules/markdown-it-highlight/dist/index.css,它具有更好的语法高亮颜色并使用它。 然后你必须设置这个defaults对象并将其设置在defaults.highlight: var defaults = { html: false, // Enable HTML tags in source xhtmlOut: false, // Use '/'...
markdown-it-footnote markdown-it-highlightjs - 对语法高亮非常有用 markdown-it-sub - 下标 mark...
.use(require('markdown-it-katex'),{"throwOnError" : false, "errorColor" : " #cc0000"}); //数学语法高亮 $\sqrt{3x-1}+(1+x)^2$ // html 标签美化 mdHtml.renderer.rules.table_open = function () { return '<table class="table table-striped">\n'; }; // 替换 emoji mdHtml.re...
使用了流行的markdown-it(MarkDown渲染),highlight.js(语法高亮)和mermaid.js(画流程图、时序图等的js库)组件。 先看一个我的个人博客截图,后续准备开源出来,没使用数据库,只使用md文件和配置文件就完成了所有功能。 所以部署也很简单,不用先建库,建表,直接放到服务器的一个任意目录里运行即可,写博客就是往目...
使用了流行的markdown-it(MarkDown渲染),highlight.js(语法高亮)和mermaid.js(画流程图、时序图等的js库)组件。 先看一个我的个人博客截图,后续准备开源出来,没使用数据库,只使用md文件和配置文件就完成了所有功能。 所以部署也很简单,不用先建库,建表,直接放到服务器的一个任意目录里运行即可,写博客就是往目...
markdown-it-vue, Vue组件, Markdown语法, GFM风格, Mermaid图表 一、markdown-it-vue简介 1.1 markdown-it-vue的核心功能 markdown-it-vue不仅仅是一个简单的文本转换工具,它更像是一个为现代网页量身定制的多媒体表达平台。作为一款Vue框架下的强大组件,它集成了众多实用且令人兴奋的功能,使得开发者能够在不...
支持高亮的语言 语言高亮使用 hilight.js 打包过大,因此只引用了常用的语言。 如果这里没有你需要的语言,欢迎提 PR。 html json css shell bash C Java Python C++ C# PHP SQL R Swift Go MATLAB Ruby Perl Objective-C Rust Dart Delphi D Kotlin Scala SAS Lisp Lua Ada Fortran PowerShell VBScript VBscri...
语法高亮 使用highlight选项给围栏代码块应用语法高亮功能: 代码语言:js 复制 varhljs=require('highlight.js');// https://highlightjs.org/// 通常的默认值们varmd=require('markdown-it')({highlight:function(str,lang){if(lang&&hljs.getLanguage(lang)){try{returnhljs.highlight(lang,str).value;...
使用markdown语法记录博客是一个高效的方式,前端加载时需要解析markdown字符串。在nuxt3框架中vue3解析markdown语法可以直接使用markdown-it来解析。 之前在vue2中使用过vue-markdown这样的依赖,但是vue升级后就无法使用了,而markdown-it不受vue版本影响。