markdown 代码高亮

需要依赖

npm install marked --save
npm install highlight.js --save

这里使用的主题是monokai-sublime.css可以自行更换主题。

结果

<template><div><div class="hljs" ref="hlDiv" v-html="code"></div></div>
</template><script>import marked from 'marked'import hljs from "highlight.js";import javascript from 'highlight.js/lib/languages/javascript';import 'highlight.js/styles/monokai-sublime.css';export default {name: "height",data(){return {code:'```javascript\nfunction(){\n\tconsole.log(123)\n}\n```'}},mounted(){marked.setOptions({renderer: new marked.Renderer(),highlight: function(code) {return hljs.highlightAuto(code).value;},pedantic: false,gfm: true,tables: true,breaks: false,sanitize: false,smartLists: true,smartypants: false,xhtml: false});this.code = marked(this.code)},}
</script>

vue 中使用 marked + highlight.js 代码高亮相关推荐

Vue3+vite使用 Highlight.js代码高亮实现网页代码显示
Vue3+vite使用 Highlight.js代码高亮实现网页显示代码这里只展示了Vue中如何使用,如需要其他使用或者自定义高亮,请访问 Highlight.js官网安装npm install ...
highlight.js代码高亮后把空格替换成了无间断空格U+00A0
原文链接:http://xs.deld.vip/article/show/10.html 前端高亮正确,但复制高亮后的代码空格被处理成了无间断空格U+00A0 示例: 复制到的代码粘贴到viscode ...
完美：C# Blazor中显示Markdown并添加代码高亮
昨天发了一篇介绍这个库:C# Blazor中显示Markdown文件,介绍怎么在Blazor中显示Markdown内容的文章,文章内的代码是没有高亮的,思来相去,还是要做好,于是百度到这篇文章.NET ...
vue build text html,Vue中v-text / v-HTML使用实例代码详解_放手_前端开发者
废话少说,代码如下所述: /p> 显示123 /p> 补充:vuejs {{}},v-text 和 v-html的区别 {{message}} let app = new Vue({ el ...
将不确定变为确定~Razor视图中是否可以嵌套JS代码
这个问题有点意思,Razor的自动闭合性,导致JS代码不能直接与Razor代码混排,原来ASPX页面中,我们到处可见这种代码 <%if(Model!=null){foreach (var ite ...
Vue中引入使用 D3.js
Vue中引入使用 D3.js 1. D3.js 学习文档 D3.js 中文网 D3.js 入门教程 D3.js v5版入门教程 d3.js API中文手册-[看云] d3.layout (布局)-[ ...
在vue项目中使用prismjs（网页代码高亮插件）
在vue项目中使用prismjs 什么是prismjs prismjs是一款代码高亮美化插件,在一些技术博客类的网站中需要展示代码时,可以使用它类似与markdown的代码块, 官网链接:https: ...
highlight.js 语法高亮，让你的页面更美观~
在网页开发过程中,经常会用到代码的展示,而不同颜色的代码,可以让页面看起来更直观,也更美观. highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供 ...
Vue中通过配置eslintrc.js文件来解决编译时出现的no-trailing-spaces、no-undef等错误
错误信息: D:\work\vue\workbench\src\views\login\index.vue12:10 warning 'Options' is defined but never us ...

vue 中使用 marked + highlight.js 代码高亮

markdown 代码高亮

vue 中使用 marked + highlight.js 代码高亮相关推荐

最新文章

热门文章