vue中实现代码高亮

哈喽，大家好，我是小编鹏仔，本次开发项目中要实现一个类似简单 swagger 一样的功能，展示所有项目的接口，然后在页面中点击哪个接口获取哪个接口请求方式、参数等测试请求，请求成功或失败，将请求返回的结果展示到页面中。

我刚开始用pre标签直接将返回结果渲染到页面，发现没有任何样式，如下图所示，丑不拉几的...

<pre v-html="content"></pre>

于是就找了一下vue的代码高亮插件（prismjs），顺手整理分享一下。

第一步，我们在vue项目中进行安装

npm install prismjs

第二步，在页面引入

// 引入Prism.js
import Prism from 'prismjs';

<style scoped>
/* 引入Prism.js的CSS主题 */
@import 'prismjs/themes/prism-tomorrow.css';
</style>

第三步，页面HTML中写入代码

<pre style="max-height: 300px;">
    <code class="language-javascript" v-html="content"></code>
</pre>

第四步，在获取到渲染值后执行 Prism.highlightAll();

this.$nextTick(() => {
    Prism.highlightAll();
 });

<code>标签中的class属性 language- 后缀对应你想要高亮的语言。

如，使用 language-javascript 来高亮 JavaScript 代码。

官方文档 https://prismjs.com/index.html

• 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

• Apex -        apex

• APL -        apl

• AppleScript -        applescript

• AQL -        aql

• Arduino -        arduino,        ino

• ARFF -        arff

• ARM Assembly -        armasm,        arm-asm

• Arturo -        arturo,        art

• AsciiDoc -        asciidoc,        adoc

• ASP.NET (C#) -        aspnet

• 6502 Assembly -        asm6502

• Atmel AVR Assembly -        asmatmel

• AutoHotkey -        autohotkey

• AutoIt -        autoit

• AviSynth -        avisynth,        avs

• Avro IDL -        avro-idl,        avdl

• AWK -        awk,        gawk

• Bash -        bash,        sh,        shell

• BASIC -        basic

• Batch -        batch

• BBcode -        bbcode,        shortcode

• BBj -        bbj

• Bicep -        bicep

• Birb -        birb

• Bison -        bison

• BNF -        bnf,        rbnf

• BQN -        bqn

• Brainfuck -        brainfuck

• BrightScript -        brightscript

• Bro -        bro

• BSL (1C:Enterprise) -        bsl,        oscript

• C -        c

• C# -        csharp,        cs,        dotnet

• C++ -        cpp

• CFScript -        cfscript,        cfc

• ChaiScript -        chaiscript

• CIL -        cil

• Cilk/C -        cilkc,        cilk-c

• Cilk/C++ -        cilkcpp,        cilk-cpp,        cilk

• Clojure -        clojure

• CMake -        cmake

• COBOL -        cobol

• CoffeeScript -        coffeescript,        coffee

• Concurnas -        concurnas,        conc

• Content-Security-Policy -        csp

• Cooklang -        cooklang

• Coq -        coq

• Crystal -        crystal

• CSS Extras -        css-extras

• CSV -        csv

• CUE -        cue

• Cypher -        cypher

• D -        d

• Dart -        dart

• DataWeave -        dataweave

• DAX -        dax

• Dhall -        dhall

• Diff -        diff

• Django/Jinja2 -        django,        jinja2

• DNS zone file -        dns-zone-file,        dns-zone

• Docker -        docker,        dockerfile

• DOT (Graphviz) -        dot,        gv

• 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

• False -        false

• Firestore security rules -        firestore-security-rules

• Flow -        flow

• Fortran -        fortran

• FreeMarker Template Language -        ftl

• GameMaker Language -        gml,        gamemakerlanguage

• GAP (CAS) -        gap

• G-code -        gcode

• GDScript -        gdscript

• GEDCOM -        gedcom

• gettext -        gettext,        po

• Gherkin -        gherkin

• Git -        git

• GLSL -        glsl

• GN -        gn,        gni

• GNU Linker Script -        linker-script,        ld

• Go -        go

• Go module -        go-module,        go-mod

• Gradle -        gradle

• GraphQL -        graphql

• Groovy -        groovy

• Haml -        haml

• Handlebars -        handlebars,        hbs,        mustache

• Haskell -        haskell,        hs

• Haxe -        haxe

• HCL -        hcl

• HLSL -        hlsl

• Hoon -        hoon

• HTTP -        http

• HTTP Public-Key-Pins -        hpkp

• HTTP Strict-Transport-Security -        hsts

• IchigoJam -        ichigojam

• Icon -        icon

• ICU Message Format -        icu-message-format

• Idris -        idris,        idr

• .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

• Jexl -        jexl

• 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

• Keepalived Configure -        keepalived

• Keyman -        keyman

• Kotlin -        kotlin,        kt,        kts

• KuMir (КуМир) -        kumir,        kum

• Kusto -        kusto

• LaTeX -        latex,        tex,        context

• Latte -        latte

• Less -        less

• LilyPond -        lilypond,        ly

• Liquid -        liquid

• Lisp -        lisp,        emacs,        elisp,        emacs-lisp

• LiveScript -        livescript

• LLVM IR -        llvm

• Log file -        log

• LOLCODE -        lolcode

• Lua -        lua

• Magma (CAS) -        magma

• Makefile -        makefile

• Markdown -        markdown,        md

• Markup templating -        markup-templating

• Mata -        mata

• MATLAB -        matlab

• MAXScript -        maxscript

• MEL -        mel

• Mermaid -        mermaid

• METAFONT -        metafont

• 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

• Nevod -        nevod

• nginx -        nginx

• Nim -        nim

• Nix -        nix

• NSIS -        nsis

• Objective-C -        objectivec,        objc

• OCaml -        ocaml

• Odin -        odin

• OpenCL -        opencl

• OpenQasm -        openqasm,        qasm

• Oz -        oz

• PARI/GP -        parigp

• Parser -        parser

• Pascal -        pascal,        objectpascal

• Pascaligo -        pascaligo

• PATROL Scripting Language -        psl

• PC-Axis -        pcaxis,        px

• PeopleCode -        peoplecode,        pcode

• Perl -        perl

• PHP -        php

• PHPDoc -        phpdoc

• PHP Extras -        php-extras

• PlantUML -        plant-uml,        plantuml

• PL/SQL -        plsql

• PowerQuery -        powerquery,        pq,        mscript

• PowerShell -        powershell

• Processing -        processing

• Prolog -        prolog

• PromQL -        promql

• .properties -        properties

• Protocol Buffers -        protobuf

• Pug -        pug

• Puppet -        puppet

• Pure -        pure

• PureBasic -        purebasic,        pbfasm

• PureScript -        purescript,        purs

• Python -        python,        py

• Q# -        qsharp,        qs

• Q (kdb+ database) -        q

• QML -        qml

• Qore -        qore

• R -        r

• Racket -        racket,        rkt

• Razor C# -        cshtml,        razor

• React JSX -        jsx

• React TSX -        tsx

• Reason -        reason

• Regex -        regex

• Rego -        rego

• Ren'py -        renpy,        rpy

• ReScript -        rescript,        res

• 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

• Squirrel -        squirrel

• Stan -        stan

• Stata Ado -        stata

• Structured Text (IEC 61131-3) -        iecst

• Stylus -        stylus

• SuperCollider -        supercollider,        sclang

• Swift -        swift

• Systemd configuration file -        systemd

• 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

• Tremor -        tremor,        trickle,        troy

• Turtle -        turtle,        trig

• Twig -        twig

• TypeScript -        typescript,        ts

• TypoScript -        typoscript,        tsconfig

• UnrealScript -        unrealscript,        uscript,        uc

• UO Razor Script -        uorazor

• URI -        uri,        url

• V -        v

• Vala -        vala

• VB.Net -        vbnet

• Velocity -        velocity

• Verilog -        verilog

• VHDL -        vhdl

• vim -        vim

• Visual Basic -        visual-basic,        vb,        vba

• WarpScript -        warpscript

• WebAssembly -        wasm

• Web IDL -        web-idl,        webidl

• WGSL -        wgsl

• Wiki markup -        wiki

• Wolfram language -        wolfram,        mathematica,        nb,        wl

• Wren -        wren

• Xeora -        xeora,        xeoracube

• XML doc (.net) -        xml-doc

• Xojo (REALbasic) -        xojo

• XQuery -        xquery

• YAML -        yaml,        yml

• YANG -        yang

• Zig -        zig

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓