插件
最近更新:2024-7-29
Markdown高亮
默认使用内置插件 Prism.js 来为 Markdown 代码块启用高亮
而我,因为使用的 vscode 是 shiki ,我就安装它演示一下
pnpm add -D @vuepress/plugin-shiki@next
yarn add -D @vuepress/plugin-shiki@next
npm i -D @vuepress/plugin-shiki@next
import { shikiPlugin } from '@vuepress/plugin-shiki'
export default defineUserConfig ({
plugins: [
//markdown代码高亮配置
shikiPlugin({
langs: ['ts', 'json', 'vue', 'md', 'bash', 'diff'],
}),
],
})
可以根据自己喜好 更换主题
import { shikiPlugin } from '@vuepress/plugin-shiki'
export default defineUserConfig ({
plugins: [
//markdown代码高亮配置
shikiPlugin({
langs: ['ts', 'json', 'vue', 'md', 'bash', 'diff'],
theme:'one-dark-pro', //主题
// 双主题
// themes: {
// light: 'one-light',
// dark: 'one-dark-pro',
// },
}),
],
})
行高亮和行号显示和默认的使用方式一样,但是shiki还有其他功能
import { shikiPlugin } from '@vuepress/plugin-shiki'
export default defineUserConfig ({
plugins: [
//markdown代码高亮配置
shikiPlugin({
notationDiff:true, //启用差异标记
notationFocus:true , //启用聚焦标记
notationHighlight:true, //启用高亮标记
notationErrorLevel:true, //启用错误标记
notationWordHighlight:true, //启用词高亮标记
}),
],
})
输入:
```ts
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('Focused') // [!code focus]
console.log('Highlighted') // [!code highlight]
console.warn('Warning') // [!code warning]
console.error('Error') // [!code error]
// [!code word:Hello]
const message = 'Hello World'
console.log(message) // prints Hello World
```
输出:
console.log('hewwo')
console.log('hello')
console.log('Focused')
console.log('Highlighted')
console.warn('Warning')
console.error('Error')
const message = 'Hello World'
console.log(message) // prints Hello World
谷歌分析
利用插件 google-analytics ,来查看网站访问量
pnpm add -D @vuepress/plugin-google-analytics@next
yarn add -D @vuepress/plugin-google-analytics@next
npm i -D @vuepress/plugin-google-analytics@next
import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'
export default defineUserConfig ({
plugins: [
googleAnalyticsPlugin({
id: 'G-XXXXXXXXXX', //跟踪ID
}),
],
})
谷歌分析官网:https://analytics.google.com/
点 开始衡量
说明
没有账号的注册账号,要翻墙哦
信息随便填,后面都可以改
创建完成,点网站,输入你自己的网站
衡量ID就是跟踪ID,我们填入 config.ts
如果不想要了,在账户设置里删除账户
说明
删除了在回收站里,要35天后永久删除
复制代码块
默认主题在移动端没有添加这个功能,可以使用 官方插件:copy-code
pnpm add -D @vuepress/plugin-copy-code@next
yarn add -D @vuepress/plugin-copy-code@next
npm i -D @vuepress/plugin-copy-code@next
import { copyCodePlugin } from '@vuepress/plugin-copy-code'
export default defineUserConfig ({
plugins: [
//===== copy-code配置 =====//
copyCodePlugin({
showInMobile: true, //是否显示在移动端
}),
],
})
warning plugin @vuepress/plugin-copy-code has been used multiple times, only the last one will take effect
官方虽然内置了,但是没有启用移动端,只能安装后配置
只是提醒你已经安装过了,不影响你使用