jinzh notes
jinzh notes

在vite中使用prismjs

在vite中使用prismjs
内容纲要

前言

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily.

prismjs是一款代码高亮插件,本身及其轻量(相较hightlightjs),同时原生支持行号,这是hightlight所没有的。。。

安装

JS环境:

pnpm i prismjs

TS环境:

pnpm i @types/prismjs

官方推荐使用插件,使得在打包编译时加载最少的语言和插件数量,不过官网推荐的插件是babel-plugin-prismjs,但是不适合vite使用(虽然vite也支持babel插件),这里使用专为vite编写的插件:vite-plugin-prismjs

安装:

pnpm install vite-plugin-prismjs -D

vite配置

在vite中进行如下配置:

// vite.config.js
import { defineConfig } from 'vite';
import prismjs from 'vite-plugin-prismjs';

export default defineConfig({
  plugins: [
    prismjs({
      languages: ['json'],
      // languages: 'all',
      /* 有个问题,这里需要注意
         这个引入的插件只是相关的js,css仍然需要自己进行引入
      */
    }),
  ],
});

使用

引入模块:

import Prism from "prismjs";

在钩子函数mounted中执行:

//这里使用vue演示
onMounted(() => {
        Prism.highlightAll(/* 配置 */);
    });

template中使用:

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

效果如下

https://jinzh.me/wp-content/uploads/2022/05/20201018200729441.png

更多内容参考prismjs官网:https://prismjs.com/

影翼

文章作者

发表回复

textsms
account_circle
email

  • swimly

    有试过使用prismjs的plugins吗,好像怎么都没用

    1月前 回复
    • 影翼博主

      @swimly: 没尝试使用过它的插件,插件的话highlightjs效果更好(当时是在vue3中使用的)

      1月前 回复

jinzh notes

在vite中使用prismjs
前言 Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit dai…
扫描二维码继续阅读
2022-05-05