Vue3(Vite) 通过 prism.js 实现代码高亮并实现Mac风格

超级小的大杯柠檬水

发布于 2023-05-10 08:46:25

1.9K0

发布于 2023-05-10 08:46:25

文章被收录于专栏：CYCY

prismjs漂亮的代码语法高亮插件

极致易用：引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！
天生伶俐：语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。
轻如鸿毛：代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。
快如闪电：如果可能，支持通过 Web Workers 实现并行。
轻松扩展：定义新语言或扩展现有语法，或者新增功能都非常简单。
丰富样式：所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。

完成效果

安装

npm i prismjs -S

# vite
npm install vite-plugin-prismjs -D

配置vite.config.ts(js)

plugins扩展

line-numbers显示行数
show-language显示语言
copy-to-clipboard显示语言
'inline-color'在代码中显示颜色块

import { prismjsPlugin } from 'vite-plugin-prismjs'
export default defineConfig({
	plugins: [
	    prismjsPlugin({
	        languages: 'all', // 语言
	        plugins: ['line-numbers','show-language','copy-to-clipboard','inline-color'],
	        theme: 'okaidia',// 主题
	        css: true,
	    })
	]
})

使用

设置语言只需要在class="language-语言"即可

<template>
<pre><code class="language-python line-numbers">print("Hello world")</code></pre>
</template>
<script setup>
import { onMounted, onUpdated } from "vue";
import Prism from "prismjs";
onUpdated(() => {
    Prism.highlightAll(); //修改内容后重新渲染
});
onMounted(() => {
    Prism.highlightAll(); //切换菜单重新渲染
})
</script>

Mac风格

通过修改全局pre的样式完成（可以在公告样式中写）

问题：这里虽然完成了效果，但是感觉代码不太理想通过before 和after 选择器之后还差一个点，就在选择了code标签添加befor

pre {
    overflow: hidden !important;
    code{ 
        display: inline-block;
        padding-bottom: 20px;
        position: relative;
        top: 20px;
    }
    &::before {
        content: "";
        position: absolute;
        background: red;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        top: 10px;
        left: 15px;
        transform: translate(-50%);
    }
    &::after {
        content: "";
        position: absolute;
        background: sandybrown;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        top: 10px;
        left: 30px;
        transform: translate(-50%);
    }
    code:first-child{
        &::after{
            content: "";
            position: absolute;
            background: limegreen;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            top: -24px;
            left: -7px;
            transform: translate(-50%);
        }
    }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-05-07，如有侵权请联系 cloudcommunity@tencent.com 删除

mac