vue 代码高亮 prismjs 或 highlight.js插件的用法

简介: vue 代码高亮 prismjs 或 highlight.js插件的用法

vue nuxt.js 代码高亮 prismjs 或 highlight.js 插件的用法

功能点分析: 前端vue2.0 + nuxt.js 实现代码高亮 使用的插件是 prismjs 和 babel-plugin-prismjs编译器插件

1.安装 prismjs 插件 和 babel-plugin-prismjs

npm install prismjs // 这里也可以使用 yarn add prismjs
npm install babel-plugin-prismjs -D

课外小知识 · prismjs 要 配合着 babel-plugin-prismjs 编译器更好

有的小伙伴就好奇了

为啥要编译器更好呢 这里我就借用 prismjs 官网的一句话

*为了方便地仅使用您需要的语言和插件配置您的 Prism 实例,请使用 babel 插件

babel-plugin-prismjs。这将允许您加载最少数量的语言和插件以满足您的需求。有关配置详细信息,请参阅该插件的文档。

书归正传

2.需要配置 babel-plugin-prismjs 编译器这个插件

我们可以通过 nuxt 的 nuxt.config.js 文件进行配置

 module.exports = {
  build: { 
    babel: {
      plugins: [
        [
          'prismjs',
          {
            // 可以选择多种语言
            languages:['javascript','php','c','cpp','python','go'],
            //配置显示行号插件
            plugins: [
              'line-numbers',
            ],
            theme: 'coy', //主体名称
            css: true
          }
        ]
      ]
    }
  },
}

3.在plugins文件下添加一个prismjs.js

在prismjs.js 中引入

·亿点小知识 ·provide/inject provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法,而在任何后代组件中,我们都可以使用 inject 来接收 provide 提供的数据或方法。

import Prism from 'prismjs';
//可以引入其他的css样式
import 'prismjs/themes/prism.min.css';
export default (ctx, inject) => {
  inject('prism', Prism)
}

4.在需要美化的代码块中添加

// reCode 其实就是要高亮的内容  请看下面 js代码
<pre v-html="resCode"></pre> //在页面中使用
methods:{
  // 在方法中使用 this.$prism.highlight 
  resCode(){ 
  return this.$prism.highlight(`var txt = 内容`, this.$prism.languages.bash, 'bash') 
  // language.xxx或lang.xxx选择编程语言
} 
}

_此功能适用与 vue + nuxt 想要纯 vue 可以点击下面穿越 _

还有另一个 vue-highlightjs来实现 代码高亮 穿越

想要进一步详细的配置 高亮内容 请穿越 prismjs官网

相关文章
|
4天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
29 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
11天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
57 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
2月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
2月前
|
JavaScript 前端开发 异构计算
兼容移动手机的js拖拽插件Draggin.js
兼容移动手机的js拖拽插件Draggin.js
63 1
|
2月前
|
JavaScript
时尚简洁的js轮播图特效插件
这是一款时尚简洁的js轮播图特效插件。该轮播图采用es6语法制作,底部带缩略图和描述信息。图片和描述信息在切换时同步滑动。
|
2月前
|
JavaScript 前端开发
基于SVG的js圆形菜单插件
这是一款基于SVG的js圆形菜单插件。该js圆形菜单插件可以生成漂亮的圆形菜单效果,支持二级菜单,支持使用鼠标滚动切换菜单
67 16
|
3月前
|
Web App开发 JavaScript iOS开发
JS弹出式QQ在线客服插件
JS弹出式QQ在线客服插件
49 6
|
3月前
|
Web App开发 JavaScript 前端开发
高性能的纯Js滚动条美化插件smooth-scrollbar
smooth-scrollbar是一款高性能的纯JavaScript滚动条美化插件。该滚动条为现代浏览器而制作,它具有高性能,自由配置,平滑滚动等特点,支持各种现代桌面浏览器和手机设备。
|
3月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
65 5
|
3月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
67 0

热门文章

最新文章