在vue项目中使用prismjs

什么是prismjs

prismjs是一款代码高亮美化插件，在一些技术博客类的网站中需要展示代码时，可以使用它类似与markdown的代码块，
官网链接：https://prismjs.com/index.html

怎么使用

1、安装插件

//安装prismjs 插件
npm install prismjs -S//安装prismjs的编译器插件
npm install babel-plugin-prismjs -D

2、配置插件

在项目下找到babel.config.js
在module.exports中的plugins追加以下配置，如果原本没有plugins可以手动添加

 module.exports = {plugins: [["prismjs", {"languages": ["javascript", "css", "markup"],"plugins": ["line-numbers"], //配置显示行号插件"theme": "okaidia", //主体名称"css": true}]]
}

3、在项目中引入模块

import Prism from "prismjs";

在钩子函数mounted中添加

Prism.highlightAll()

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

注意这里的html结构是pre包裹着code

类名的含义

line-numbers显示行号
language-xxx或lang-xxx选择编程语言，如：language-js

<pre><code class="language-js line-numbers" >let msg = "这是一段代码演示"console.log(msg)</code>
</pre>

效果如下：

类名对照表

横杠-前的是语言，横杠后的是对应类名：
如：JavaScript - javascript, js
对应的类名是：language-jsorlanguage-javascript,以此类推

Markup - markup, html, xml, svg, mathml, ssml, atom, rss
CSS - css
C-like - clike
JavaScript - javascript, js
ABAP - abap
ABNF - abnf
ActionScript - actionscript
Ada - ada
Agda - agda
AL - al
ANTLR4 - antlr4, g4
Apache Configuration - apacheconf
APL - apl
AppleScript - applescript
AQL - aql
Arduino - arduino
ARFF - arff
AsciiDoc - asciidoc, adoc
ASP.NET (C#) - aspnet
6502 Assembly - asm6502
AutoHotkey - autohotkey
AutoIt - autoit
Bash - bash, shell
BASIC - basic
Batch - batch
BBcode - bbcode, shortcode
Birb - birb
Bison - bison
BNF - bnf, rbnf
Brainfuck - brainfuck
BrightScript - brightscript
Bro - bro
BSL (1C:Enterprise) - bsl, oscript
C - c
C# - csharp, cs, dotnet
C++ - cpp
CIL - cil
Clojure - clojure
CMake - cmake
CoffeeScript - coffeescript, coffee
Concurnas - concurnas, conc
Content-Security-Policy - csp
Crystal - crystal
CSS Extras - css-extras
Cypher - cypher
D - d
Dart - dart
DAX - dax
Dhall - dhall
Diff - diff
Django/Jinja2 - django, jinja2
DNS zone file - dns-zone-file, dns-zone
Docker - docker, dockerfile
EBNF - ebnf
EditorConfig - editorconfig
Eiffel - eiffel
EJS - ejs, eta
Elixir - elixir
Elm - elm
Embedded Lua templating - etlua
ERB - erb
Erlang - erlang
Excel Formula - excel-formula, xlsx, xls
F# - fsharp
Factor - factor
Firestore security rules - firestore-security-rules
Flow - flow
Fortran - fortran
FreeMarker Template Language - ftl
GameMaker Language - gml, gamemakerlanguage
G-code - gcode
GDScript - gdscript
GEDCOM - gedcom
Gherkin - gherkin
Git - git
GLSL - glsl
Go - go
GraphQL - graphql
Groovy - groovy
Haml - haml
Handlebars - handlebars
Haskell - haskell, hs
Haxe - haxe
HCL - hcl
HLSL - hlsl
HTTP - http
HTTP Public-Key-Pins - hpkp
HTTP Strict-Transport-Security - hsts
IchigoJam - ichigojam
Icon - icon
.ignore - ignore, gitignore, hgignore, npmignore
Inform 7 - inform7
Ini - ini
Io - io
J - j
Java - java
JavaDoc - javadoc
JavaDoc-like - javadoclike
Java stack trace - javastacktrace
Jolie - jolie
JQ - jq
JSDoc - jsdoc
JS Extras - js-extras
JSON - json, webmanifest
JSON5 - json5
JSONP - jsonp
JS stack trace - jsstacktrace
JS Templates - js-templates
Julia - julia
Keyman - keyman
Kotlin - kotlin, kt, kts
LaTeX - latex, tex, context
Latte - latte
Less - less
LilyPond - lilypond, ly
Liquid - liquid
Lisp - lisp, emacs, elisp, emacs-lisp
LiveScript - livescript
LLVM IR - llvm
LOLCODE - lolcode
Lua - lua
Makefile - makefile
Markdown - markdown, md
Markup templating - markup-templating
MATLAB - matlab
MEL - mel
Mizar - mizar
MongoDB - mongodb
Monkey - monkey
MoonScript - moonscript, moon
N1QL - n1ql
N4JS - n4js, n4jsd
Nand To Tetris HDL - nand2tetris-hdl
Naninovel Script - naniscript, nani
NASM - nasm
NEON - neon
nginx - nginx
Nim - nim
Nix - nix
NSIS - nsis
Objective-C - objectivec, objc
OCaml - ocaml
OpenCL - opencl
Oz - oz
PARI/GP - parigp
Parser - parser
Pascal - pascal, objectpascal
Pascaligo - pascaligo
PC-Axis - pcaxis, px
PeopleCode - peoplecode, pcode
Perl - perl
PHP - php
PHPDoc - phpdoc
PHP Extras - php-extras
PL/SQL - plsql
PowerQuery - powerquery, pq, mscript
PowerShell - powershell
Processing - processing
Prolog - prolog
.properties - properties
Protocol Buffers - protobuf
Pug - pug
Puppet - puppet
Pure - pure
PureBasic - purebasic, pbfasm
PureScript - purescript, purs
Python - python, py
Q (kdb+ database) - q
QML - qml
Qore - qore
R - r
Racket - racket, rkt
React JSX - jsx
React TSX - tsx
Reason - reason
Regex - regex
Ren'py - renpy, rpy
reST (reStructuredText) - rest
Rip - rip
Roboconf - roboconf
Robot Framework - robotframework, robot
Ruby - ruby, rb
Rust - rust
SAS - sas
Sass (Sass) - sass
Sass (Scss) - scss
Scala - scala
Scheme - scheme
Shell session - shell-session, sh-session, shellsession
Smali - smali
Smalltalk - smalltalk
Smarty - smarty
SML - sml, smlnj
Solidity (Ethereum) - solidity, sol
Solution file - solution-file, sln
Soy (Closure Template) - soy
SPARQL - sparql, rq
Splunk SPL - splunk-spl
SQF: Status Quo Function (Arma 3) - sqf
SQL - sql
Stan - stan
Structured Text (IEC 61131-3) - iecst
Stylus - stylus
Swift - swift
T4 templating - t4-templating
T4 Text Templates (C#) - t4-cs, t4
T4 Text Templates (VB) - t4-vb
TAP - tap
Tcl - tcl
Template Toolkit 2 - tt2
Textile - textile
TOML - toml
Turtle - turtle, trig
Twig - twig
TypeScript - typescript, ts
TypoScript - typoscript, tsconfig
UnrealScript - unrealscript, uscript, uc
Vala - vala
VB.Net - vbnet
Velocity - velocity
Verilog - verilog
VHDL - vhdl
vim - vim
Visual Basic - visual-basic, vb, vba
WarpScript - warpscript
WebAssembly - wasm
Wiki markup - wiki
Xeora - xeora, xeoracube
XML doc (.net) - xml-doc
Xojo (REALbasic) - xojo
XQuery - xquery
YAML - yaml, yml
YANG - yang
Zig - zig

参考文献：

prismjs官网

使用 Prism.js 实现漂亮的代码语法高亮

在vue中使用prismjs，让页面代码变漂亮！

漂亮的代码语法高亮插件Prism.js简单使用文档

在vue项目中使用prismjs（网页代码高亮插件）相关推荐

Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等
先放张效果图第一步:安装依赖 npm install tinymce@5.0.12 第二步:在项目中的public文件夹中新建tinymce文件夹(因为我的项目是脚手架创建的,所以公共文件夹是pub ...
vue项目中字体自适应屏幕(使用px2rem插件)
1.为什么使用rem做适配? 答:当你使用px做单位的时候,在不通分辨率的手机型号,他显示的大小就是设定的多少px,当手机尺寸大时,那么元素就会显得很小,当手机分辨率过小时,元素就会显得很大,因为我们 ...
vue-tour快速入门：VUE项目中如何使用vue-tour新手引导指引插件？怎样使用？包含具体实例
官网: Vue Tour | A lightweight and customizable tour plugin for use with Vue.jshttps://pulsardev.githu ...
Vue 项目中高亮格式化 xml 代码
效果演示安装插件 $ npm install highlight.js --save 代码实现 xml原文如下: <?xml version=\"1.0\" encodin ...
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
Swiper4.5在vue项目中的使用方法
一. 效果图 · 渐变式 · gif 动画演示: 二.首先,npm 安装 swiper 用swiper,所以要先在框架内npm install --save swiper安装它. 安装完成之后,你会在 ...
Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
一.首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后,在package.json文件中添加这段代码 "postcss&quo ...
vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑
vue之猫眼json数据的获取直接用于自己的vue项目中遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题加载不出 ...

在vue项目中使用prismjs（网页代码高亮插件）