vitepress postRender修改markdown内容

vitepress 动态修改markdown内容
vitepress 统一修改markdown内容

编译时修改markdown或html内容

参考：https://vitepress.dev/zh/reference/site-config#postrender

打开 .vitepress/config.ts

import { defineConfig } from 'vitepress'

import { Nav } from './nav'
import { Sidebar } from './sidebar'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "爱反垃圾堆",
  description: "😮‍💨⛵️🌶︎🐔✅",
  titleTemplate: ':title 🌱 fir8.com',
  lang: 'zh-CN',
  lastUpdated: true,

  themeConfig: {
    siteTitle: '爱反垃圾堆',
    outlineTitle: '内容导航',
    returnToTopLabel: '回到顶部',
    sidebarMenuLabel: '章节目录',
    darkModeSwitchLabel: '主题模式',
    lastUpdatedText: '更新时间',
    docFooter: {
      prev: '上一篇',
      next: '下一篇'
    },

    nav: Nav,

    sidebar: Sidebar,
  
  },
  // 参考：https://vitepress.dev/zh/reference/site-config#postrender
  async postRender(context) {
    // 修改markdown内容的， hello world 替换为红色的 你好，世界
    context.content = context.content.replace(/hello world/g, '<span style="color: red;">你好，世界</span>')
    // 查看.vitepress/dist/ 下的html文件，发现已经替换了
  }
})

vitepress 动态修改markdown内容

test.md

<div ref="novel">999999123988888889898</div>

<script setup>
import { ref, watch } from 'vue'

const novel = ref(null)
console.log(novel.value)


watch(novel, () => {toColor(novel)})

const toColor = (novel) => {
  // 匹配98，修改颜色为红色
  const innerHTML = novel.value.innerHTML.replace(/98/g, (match) => {
    return `<span style="color: red">${match}</span>`
  })
  novel.value.innerHTML = innerHTML
}

</script>