自定义博客皮肤VIP专享

*博客头图：

点击选择上传的图片

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

点击选择上传的图片

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

点击选择上传的图片

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览取消提交

自定义博客皮肤

上一步保存

一步一个坑

原创 uni-datetime-picker在钉钉中报错：undefined is not an object (evaluating ‘navigator.userAgent.toLowerCase‘)

uni-datetime-picker组件在钉钉小程序中点击失效，报错undefined is not an object

2025-03-31 11:25:57 369

原创在 Vue+Vite 项目中安装 Tailwind CSS

在 vue+vite 中安装使用 Tailwind Css

2023-12-11 17:05:28 1752

原创 Vue实现Markdown文件内容显示及代码块高亮

【代码】Vue实现Markdown文件内容显示及代码块高亮。

2023-02-14 14:30:11 2985 3

原创 Vue3+highlight.js实现代码高亮 + 行号

【代码】Vue3+highlight.js实现代码高亮 + 行号。

2023-02-13 18:13:29 2746 2

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

椰汁兑清酒

博客等级

码龄9年

4
原创

27
点赞

38
收藏

19
粉丝

关注

私信

分类专栏

css 1篇
Markdown 2篇

最新评论

Vue实现Markdown文件内容显示及代码块高亮
和世界不一样，那就不一样！: 你用下我的代码试试看：<template> <div> <div class="markdown-body" v-html="result"></div> </div> </template> <script> import { marked } from "marked"; import hljs from "highlight.js"; // 代码块高亮 import "highlight.js/styles/github.css"; // 代码块高亮样式 import "github-markdown-css"; // 整体 markdown 样式 export default { name: "index", data() { return { result: "", }; }, mounted() { // 要显示的 Markdown 文件内容 const content = `# Vue实现Markdown文件内容显示 > 用到的插件有：marked、highlight.js、github-markdown-css | 插件 | 备注 | | --------- | ------------- | | marked | markdown 显示 | | highlight | 代码高亮 | `; this.result = marked.parse(content, { highlight: function (code, lang) { const language = hljs.getLanguage(lang) ? lang : "plaintext"; return hljs.highlight(code, { language }).value; }, }); }, }; </script> <style scoped></style>
Vue实现Markdown文件内容显示及代码块高亮
做个菜鸟: 为什么我跟楼主一样引用，出不来表格的样式呢？跪求大佬帮助
Vue实现Markdown文件内容显示及代码块高亮
k a r l: 楼主的文章很有作用，不过现在marked已经废弃了原有的highlight方法，现在已经更新为：https://www.npmjs.com/package/marked-highlight 这个了
Vue3+highlight.js实现代码高亮 + 行号
橘猫脑袋: 你这家伙故意把行号代码写错，找了半天才看见td行号那个字符串拼接错了，导致最后不显示行号
Vue3+highlight.js实现代码高亮 + 行号
橘猫脑袋: 不会显示行号

提示

确定要删除当前文章？

取消删除

原创 uni-datetime-picker在钉钉中报错：undefined is not an object (evaluating ‘navigator.userAgent.toLowerCase‘)

原创 在 Vue+Vite 项目中安装 Tailwind CSS

原创 Vue实现Markdown文件内容显示及代码块高亮

原创 Vue3+highlight.js实现代码高亮 + 行号

空空如也

空空如也

原创在 Vue+Vite 项目中安装 Tailwind CSS