vue使用showdown并实现代码区域高亮的示例代码

前言：当我们想把makedown文档转译为html在网页上显示，并且能漂亮的展示出自己想要的网页形式，接下来我给大家介绍插件来达到我们所想要的功能。
注：下面安装及使用方式是基于vue进行滴。

1、安装showdown

npm install showdown --save

2、将showdown引入到使用的页面中

<template>
  <div v-html="htms"></div>
</template>

<script>
import showdown from "showdown"
converter.setOption('tables', true);  // 将表格显示出来
export default {
  data() {
    return {
      htms: ""
    }
  },
  created() {
    this.setMakedown()
  },
  methods: {
    setMakedown() {
     this.htms = converter.makeHtml('# 这是一个标题')
    }
  }
}
</script>

最终展示效果

但是这时有个问题出现，如果我们去添加代码块儿时，代码是统一颜色，代码块也没有背景色，同时也没有高亮样式，接下来我们解决代码没有高亮问题。

1、安装highlight

npm install highlight --save

2、 在main.js添加自定义指令

import hljs from "highlight.js"
import 'highlight.js/styles/default.css';

// 定义自定义指令 highlight 代码高亮
Vue.directive('highlight',function (el) {
 let blocks = el.querySelectorAll('pre code');
 blocks.forEach((block)=>{
  hljs.highlightBlock(block)
 })
})

3、 将“ v-highlight ”添加到使用的div标签上

<template>
  <div v-html="htms" v-highlight></div>
</template>

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题

    在终端中运行以下命令: vue create xxx // xxx为项目名称,例如 vue-project 然后,系统会提示我们选择默认预设或手动选择功能.使用向下箭头键,我们手动选择功能,然后按Enter键. 然后,我们将看到一系列功能选项.使用向下箭头键,我们将向下移动并使用空格键选择需要的功能,然后按回车键. Linter / Formatter 就是代码风格. 我们将使用 ESLint + Prettier 我们将在保存时添加Lint的附加功能. 我们将选择单独的配置文件. 我们可以选择

  • vue2实现搜索结果中的搜索关键字高亮的代码

    vue2实现搜索结果中的搜索关键字高亮的代码

    具体代码如下所示: // 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>') } else { return val } } // 或者用

  • vue使用原生js实现滚动页面跟踪导航高亮的示例代码

    需要使用vue做一个专题页面.滚动页面指定区域导航高亮. 监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换. 我使用的方法是在定位元素上添加id,在导航添加data-id属性,监听滚动事件,如果当前滚动区域大于定位元素区域,将元素的id赋值给变量,然后与导航的data-id进行匹配,切换class. html结构 main.vue <template> <div class="qz-hom

  • vue使用showdown并实现代码区域高亮的示例代码

    前言:当我们想把makedown文档转译为html在网页上显示,并且能漂亮的展示出自己想要的网页形式,接下来我给大家介绍插件来达到我们所想要的功能. 注:下面安装及使用方式是基于vue进行滴. 1.安装showdown npm install showdown --save 2.将showdown引入到使用的页面中 <template> <div v-html="htms"></div> </template> <script>

  • vue loadmore组件上拉加载更多功能示例代码

    最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯. 首先简单写一下模板部分的html代码,,很简单清晰的逻辑: <template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot> </div> <d

  • vue滑动吸顶及锚点定位的示例代码

    在上篇文章给大家介绍了vue实现吸顶.锚点和滚动高亮按钮效果 感兴趣的朋友可以点击查看https://www.jb51.net/article/172365.htm 今天给大家继续分享vue滑动吸顶及锚点定位的代码,具体内容如下所示: Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id='menu'> <ul> <li v-for=&q

  • vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码

    vue+elementui+vuex+sessionStorage实现历史标签菜单的示例代码

    一般是有左侧菜单后,然后要在页面上部分添加历史标签菜单需求. 借鉴其他项目,以及网上功能加以组合调整实现 按照标签实现方式步骤来(大致思路): 1,写一个tagNav标签组件 2,在路由文件上每个路由组件都添加meta属性 meta:{title:'组件中文名'} 3,在store的mutation.js文件中写标签的添加/删除方法以及在方法中更新sessionStorage数据 4,在主页面上添加组件以及router-view外层添加keep-alive组件,我这边是main.vue为登录后主

  • Android TextView实现词组高亮的示例代码

    Android TextView实现词组高亮的示例代码

    本文介绍了Android TextView实现词组高亮的示例代码,分享给大家,具体如下: HighlightTextView Android文本高亮控件,基于View实现. 特点 文本高亮 单词自动换行 高亮词组保持在同一行显示 效果如下: 主要逻辑: 两个 Paint 负责绘制不同的文字 在每次绘制之前计算将要绘制的文本是否会超出屏幕宽度,如果超出则换行 protected void onDraw(Canvas canvas) { super.onDraw(canvas); float x_d

  • vue中实现图片和文件上传的示例代码

    html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');

  • vue不操作dom实现图片轮播的示例代码

    本文介绍了vue不操作dom实现图片轮播的示例代码,分享给大家,具体如下: 效果 宽度为1190px且水平居中的轮播盒子: 中间是当前显示的默认尺寸图片: 左右两边是预显示的小尺寸图片: 轮播从右至左,图片逐渐放大. 做普通平滑轮播也可以参照这个思路 html <ul> <li v-for="(demo,index) in demoList" :key="index" :class="{'demo-left':demoStyle(inde

  • vue 使用 vue-pdf 实现pdf在线预览的示例代码

    背景 之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf在线预览的过程,但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这个组件,虽然说它没有原生那样强大,比如不支持pdf文字复制,打印会乱码,但是我感觉已经足以满足我的需求了.本篇笔记循序渐进,从基础的demo,到一个可用的程度,文末列出

  • vue实现点击按钮切换背景颜色的示例代码

    用vue简单的实现点击按钮切换背景颜色,具体代码如下所示: <div class="btnTitle"> <div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div> <div class="btn-bg" :class="{bg:time == 4}" @c

  • vue 路由meta 设置导航隐藏与显示功能的示例代码

    vue 路由meta 设置title 导航隐藏,具体代码如下所示: router.js routes: [{ path: '/', name: 'HelloWorld', component: HelloWorld, meta: { title: "HelloWorld", 要现实的title show: true 设置导航隐藏显示 } }] App.vue <template> <div id="app"> <router-view&

随机推荐