Vue3解析markdown并实现代码高亮显示的详细步骤

目录
  • 具体实现步骤如下：
    • 一、安装依赖库
    • 二、在main.js文件中引入highlight.js及样式并创建一个自定义的全局指令
    • 三、在Vue组件中应用marked解析及实现代码高亮
    • 四、显示效果

Vue实现博客前端，需要实现markdown的解析，如果有代码则需要实现代码的高亮。
Vue的markdown解析库有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked，代码高亮的库选用的是highlight.js。

具体实现步骤如下：

一、安装依赖库

在vue项目下打开命令窗口，并输入以下命令

npm install marked -save    // marked 用于将markdown转换成html
npm install highlight.js -save   //用于代码高亮显示

命令执行完后可以在控制台或package.json文件中看到有安装的版本号

二、在main.js文件中引入highlight.js及样式并创建一个自定义的全局指令

import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css' //样式

//创建v-highlight全局指令
Vue.directive('highlight',function (el) {
  let blocks = el.querySelectorAll('pre code');
  blocks.forEach((block)=>{
    hljs.highlightBlock(block)
  })
})

这样就可以在vue组件中使用v-highlight引用代码高亮的方法了。

三、在Vue组件中应用marked解析及实现代码高亮

代码示例如下：

 <!-- 正文输出 -->
<div class="entry-content">
  <div v-highlight v-html="article"  id="content"></div>
</div>
<script>
    // 将marked 引入
  import { marked }from 'marked';
    export default {
        name: 'articles',
        data(){
          return{
              article:''
          }
        },
        methods: {
          getPostDetail() {
            console.log('getPostDetail()'+this.id)
            fetchPostDetail(this.id).then(res => {
               this.postdetail=res.data
               // 调用marked()方法，将markdown转换成html
               this.article= marked(this.postdetail.content);
               console.log(res.data)
              }).catch(err => {
                  console.log(err)
              })

          },
        created() {
          //调用获取文章内容的接口方法
          this.getPostDetail()
        },
    }
 </script>

四、显示效果

markdown解析及代码高亮显示效果

示例中引用的样式是 import 'highlight.js/styles/atom-one-dark.css'
实际highlight.js/styles中提供了很多样式，可以根据自己的喜好选用。

到此这篇关于Vue3解析markdown并实现代码高亮显示的文章就介绍到这了,更多相关Vue3解析markdown内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 如何在在Vue3中使用markdown 编辑器组件

    目录 安装 引入组件 基础用法 保存后的 markdown 或者 html 文本如何渲染在页面上? 安装 # 使用 npm npm i @kangc/v-md-editor@next -S # 使用yarn yarn add @kangc/v-md-editor@next 引入组件 import { creatApp } from 'vue'; import VMdEditor from '@kangc/v-md-editor'; import '@kangc/v-md-editor/lib/s

  • 使用Vite2+Vue3渲染Markdown文档的方法实践

    目录 自定义 Vite 插件 使用 vite-plugin-markdown Import Front Matter attributes Import compiled HTML (Mode.HTML) Import ToC metadata (Mode.TOC) Import as a React component (Mode.REACT) Import as a Vue component (Mode.VUE) 写在最后 大部分使用 Vite2 的开发者遇到的一个问题,就是文档里并没有相

  • vue3引入highlight.js进行代码高亮的方法实例

    vue3引入highlight.js进行代码高亮的方法实例

    目录 背景描述: 一.安装依赖: 二.在vue3主入口main文件,对highlight进行引入和注册: 三.页面使用: 四.看下效果展示吧: 五.一些优化: 1.问题 2.解决方法 3. 处理后的效果 总结 背景描述: 在项目开发中,经常一些日志预览,还有文件的预览,需要进行代码高亮显示.这样可以让文本内容展示的时候显得更加友好,也便于阅读 效果类似markdown语法的代码高亮,如下: <TestPlan guiclass="TestPlanGui" testclass=&q

  • Vue3解析markdown并实现代码高亮显示的详细步骤

    Vue3解析markdown并实现代码高亮显示的详细步骤

    目录 具体实现步骤如下: 一.安装依赖库 二.在main.js文件中引入highlight.js及样式并创建一个自定义的全局指令 三.在Vue组件中应用marked解析及实现代码高亮 四.显示效果 Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮.Vue的markdown解析库有很多,如markdown-it.vue-markdown-loader.marked.vue-markdown等.这些库都大同小异.这里选用的是marked,代码高亮的库选用的是high

  • IDEA的崛起自己定义快捷生成代码块的详细步骤

    IDEA的崛起自己定义快捷生成代码块的详细步骤

    话不多说,使用过IDEA中快捷代码的同学应该都会用到 sout,以及表达式.sout 然后就会生成如下的代码 那么如果自己定义这种快捷生成代码的方法呢? 例如我想输入trylock就能自动生成如下代码 .lock(); try { } catch (Exception e) { e.printStackTrace(); } finally { .unlock(); } 第一种 或者表达式.trylock生成 表达式.lock(); try { } catch (Exception e) { e.

  • Vue3使用src动态引入本地图片的详细步骤

    目录 1. vue-cli搭建的项目 2.vite搭建的项目动态引入本地图片 补充:vue3加载动态图片 总结 1. vue-cli搭建的项目 在项目中我们想要动态引入本地图片的时候,(注意这是在cli搭建的,vite里面没有require(),vite里面需要封装个工具) 通过v-bind动态绑定 通过的require引入 require作用 用于引入模板.JSON.或本地文件 下面这种require直接包裹全部路径是可以的,但是我在想感觉不太优雅 想直接在src里用require(item.

  • vue3+ts+EsLint+Prettier规范代码的方法实现

    目录 使用 EsLint的使用 添加配置文件 Prettier的使用 使用husky和lint-staged构建代码 增加setting.json配置 参考资料 本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范. (1)EsLint 提供编码规范: (2)Prettier 是一个 Opinionated 的代码格式化工具. 使用 EsLint的使用 安装依赖 npm i -D eslint eslint-plugin-vue

  • asp.net+js 实现无刷新上传解析csv文件的代码

    前阵子工作中用到,贴上代码,仅保留上传有关的代码,发现code其实很少. 上传页面html/js 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

  • 推荐Discuz!5的PHP代码高亮显示与实现可运行代码

    discuz!5.0论坛显示风格的php代码高亮显示插件, 把php代码进行语法着色,喜欢PHP的同志可以轻松的看代码啦. 同时添加了html代码运行功能. 此插件是在以前某位同志发布的Discuz!4的php代码高亮显示基础之上修改完成. 另外,本人的php学习进入了停滞状态, 希望有人能帮助我走出php的学习困境 My QQ:5642382  我的QQ群:2577162 功能:发贴时使用[php]php代码[/php]标记来高亮显示php代码,       使用[runcode]Html代码

  • python解析xml模块封装代码

    有如下的xml文件: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8" ?>  <root>  <childs>  <child name='first' >1</child>  <child value="2">2</child>  </childs>  </root> 下面介绍python解

  • FCKEditor SyntaxHighlighter整合实现代码高亮显示

    FCKEditor SyntaxHighlighter整合实现代码高亮显示

    因此上网查了许多资料,没有说怎么做的,都是自己改好一个包上传.我研究了一个这些整合好的例子,粗略说一说,对以后开发其它FCKeditor插件也有好处. 为方便大家使用,我们特提供两个已经做成插件的版本.下载地址 第一步:在FCKeditor的路径中找到"editor\plugins\",在其中创建"highlighter"文件夹. 第二步:将"dp.SyntaxHighlighter\Scripts"文件夹复制到此文件夹中,所有的js文件和一个f

  • Javascript实现的CSS代码高亮显示

    相比JavaScript,CSS的语法就简单多了,主要是处理注释.字符串.CSS样式名称.CSS样式值.缩进和换行,具体详情请看代码. Javascript实现CSS代码高亮显示 body{ font-size:12px; line-height:1.8; font-family:'Courier New', Courier, monospace; } #area{ width:320px; height:120px; } body{ font-size:12px; line-height:1.

随机推荐