markdown

[giscus[bot]]

markdown

我的vitpress文档教程

https://vitepress.yiov.top/markdown.html

[mnjun9527]

写的真叫好，markdown 可惜没有找到 markdown 内自定义CSS样式，不知道是否支持

[mnjun9527]

说错了，是在Markdown,代码款的顶部加上 三个小圆点

[mnjun9527]

代码块

[Yiov]

更改成对应的 class 就行了

新建一个 vp-code-group.css 文件

/* .vitepress\theme\style\vp-code-group.css */

/* 代码块tab */
.vp-code-group .tabs {
    padding-top: 30px;
}

/* 代码块tab-顶部小圆点 */
.vp-code-group .tabs::before {
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: ' ';
    height: 12px;
    width: 12px;
    left: 12px;
    margin-top: -20px;
    position: absolute;
}


/* 代码组 */
.vp-code-group {
    color: var(--vp-c-black-soft);
    border-radius: 8px;
    box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
}

最后在 index.css 中引入生效

/* .vitepress\theme\style\index.css */
@import './vp-code-group.css';

具体操作方式看教程：https://vitepress.yiov.top/style.html#%E4%BB%A3%E7%A0%81%E7%BB%84%E9%A3%8E%E6%A0%BC

[mnjun9527]

非常的感谢你，我访问你的网站时，网站打不开了， 我登录GITHUB 发现您的回复 十分感谢您

[mnjun9527]

在您的指点下，摸索到了 这个自定义的方法。 通过F12看CSS 进行改写，十分感谢您的指点。

[mnjun9527]

我发现一个问题，如果在左下角点了退出登录，退出gothub 退出成功以后，你就再也看不到评论区了。

一直显示加载失败。 然后也没有登录的按钮和办法。 后来实在登录不上，我用服务器的windows登录才进来的。 请谨慎测试，最好用小号

[Yiov]

giscus有时候会bug，但是也不多，稳定性和外观上都是很棒的，加载不了挂个梯子有时候就可以了

[Aurorxa]

对于 GitHub 风格的容器，会显示英文，如：NOTE、IMPORTANT 等，虽然我认为还行，但是可能很多人有强迫症就是喜欢中文，那么就可以这么做，在 config.mts 中的 markdown 配置项，将 NOTE 等替换为中文，代码如下：

  markdown: { // markdown 配置
    math: true,
    lineNumbers: true, // 行号显示
    image: {
      // 开启图片懒加载
      lazyLoading: true
    },
    // 组件插入h1标题下
    config: (md) => {
      // 创建 markdown-it 插件
      md.use((md) => {
        const defaultRender = md.render
        md.render = function (...args) {
          const [content, env] = args
          const isHomePage = env.path === '/' || env.relativePath === 'index.md'  // 判断是否是首页

          if (isHomePage) {
            return defaultRender.apply(md, args) // 如果是首页，直接渲染内容
          }
          // 调用原始渲染
          let defaultContent = defaultRender.apply(md, args)
          // 替换内容
          defaultContent = defaultContent.replace(/NOTE/g, '提醒')
                .replace(/TIP/g, '建议')
                .replace(/IMPORTANT/g, '重要')
                .replace(/WARNING/g, '警告')
                replace(/CAUTION/g, '注意')
          // 返回渲染的内容
          return defaultContent
        }
      })
    }
  },

[Yiov]

哈哈哈，强，这个足够花里胡哨

刚开始没有效果结果是Edge浏览器没有渲染，换了个浏览器看到了

[Aurorxa]

我只测试了 Chrome ，不过，Edge 应该也可以的，毕竟目前的 Edge 也是使用 Chrome 的内核！！！

[Yiov]

是的，按道理是一样的，有可能我电脑版本太低了吧，明天再来弄

[Aurorxa]

Firefox 测试可以，你再测测

[Yiov]

嗯嗯，代码没问题的，完全可以，是我电脑的问题，已经解决了

[mnjun9527]

大佬，求救

页面需要插入2个本地视频该怎么办呢? 第二个会出不来这个怎么办呀

[mnjun9527]

使用的是这个命令 当在MD里面放2个视频 第二个就无效了

[mnjun9527]

<video src="/本地视频路径.mp4" controls="controls"></video>

[mnjun9527]

打扰了，是我视频的问题， 抱歉打扰您了

[zxyang3636]

[[toc]] 为什么不显示一级标题呀

[Yiov]

这个得问官方了，它就是不包含一级标题的

[Yiov]

通过查阅 mdit-vue/plugin-toc#level ，得知可以在 config.ts 中这样配置

markdown: {
    // toc显示一级标题
    toc: {level: [1,2,3]},
}

[Bryn-Lee]

HI,VitePress 中如何使mermaid生效啊，使用vitepress-plugin-mermaid插件无法启动项目， 在Typora和obsidian 中都可以显示正常的流程图。

[Bryn-Lee]

这是我的配置

import { defineConfig } from 'vitepress'
import AutoNavPlugin from 'vitepress-auto-nav-sidebar'
import { withMermaid } from 'vitepress-plugin-mermaid'

const { nav, sidebar } = AutoNavPlugin({
  ignoreFolders: ["node_modules", "assets", "public", ".vitepress", "attachments", ".obsidian", "utils"], // 需要排除的一些目录
  ignoreFiles: ['index'], // 需要排除的一些文件
  dirPrefix: '',
  filePrefix: '',
  showNavIcon:false,
  showSideIcon:false,
  isCollapse: true,
  collapsed: false,
  singleLayerNav:false,
  hiddenFilePrefix: '.',
  customParentFolderName: '目录'
})

export default withMermaid(defineConfig({
  markdown: {
    config: (md) => {
      // 创建 markdown-it 插件
      md.use((md) => {
        const defaultRender = md.render
        md.render = function (...args) {

          // 调用原始渲染
          let defaultContent = defaultRender.apply(md, args)
          // 替换内容
          defaultContent = defaultContent
                .replace(/NOTE/g, '提醒')
				.replace(/INFO/g, '信息')
				.replace(/TIP|IMPORTANT/g, '提示')
				.replace(/WARNING|CAUTION/g, '警告')
				.replace(/DANGER/g, '危险')
          // 返回渲染的内容
          return defaultContent
        }
      })
    }
  },
  themeConfig: {
    nav:nav,
    sidebar:sidebar,
	outline: {
      level: [1, 4],
    },
	outlineTitle: '大纲',
	docFooter: { // 自定义上下页名
      prev: '上一篇', next: '下一篇'
    },
    logo: '/logo.svg',
    search: {
      provider: "local",
      options: {
        miniSearch: {
          options: {
            /* ... */
          },
          searchOptions: {
            /* ... */
          },
        },
        translations: {
          button: {
            buttonText: "搜索文档",
            buttonAriaLabel: "搜索文档",
          },
          modal: {
            noResultsText: "没有找到结果",
            resetButtonTitle: "清除搜索条件",
            footer: {
              selectText: "选择",
              navigateText: "切换",
              closeText: "关闭",
            },
          },
        },
      },
    }
  
  }
})
)```

[Aurorxa]

你的仓库是托管在 github 吗，给个链接？

[Bryn-Lee]

https://github.com/leonblack88/vitepress

[Aurorxa]

你的 package.json 文件是这样的：

{
  "devDependencies": {
    "mermaid": "^11.4.1",
    "vitepress": "^1.6.3",
    "vitepress-plugin-mermaid": "^2.0.17"
  },
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress-auto-nav-sidebar": "^0.1.1"
  }
}

只需要将 "mermaid": "^11.4.1" 删除，因为 vitepress-plugin-mermaid 中已经集成了 mermaid 了，即：

{
  "devDependencies": {
    "vitepress": "^1.6.3",
    "vitepress-plugin-mermaid": "^2.0.17"
  },
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress-auto-nav-sidebar": "^0.1.1"
  }
}

[Bryn-Lee]

thx,我重新init项目后，配置后正常了。或许有其他组件冲突

[mnjun9527]

奇怪为啥我的标题锚 中英文都不行 非要设置自定义锚点才行， 只有我的是这样的吗？

[Yiov]

全中文或者全英文，都没问题的，除非你是数字开头

你在设置标题后，手动点击一下标题，看是标题前否存在符号，有些是有下划线的 _ ，要加上去。以网页点击显示为准，而不是vscode等md编辑器

[cgwuli]

大佬好！关于表格我遇到一个问题：markdown表格不能合并单元格但是能渲染表格中的公式（我使用的是mathjax插件，vitepress官网推荐的），而使用HTML写表格的话虽然能合并单元格但是不能渲染公式，我今天试了一天，包括更换各种插件都没有搞定，也许是我的配置写不对，大佬可否帮我试一下？我的需求是用HTML写表格并且能用mathjax渲染表格中的公式，谢谢大佬！

[cgwuli]

另外，大佬可否在首页放一个打赏二维码，白嫖了很多心里有些过意不去 :)

[Yiov]

我记得好像markdown就是不能带入公式的，而且我也没有接触过，很抱歉不能帮到你

[cgwuli]

markdown的表格是可以带入公式的，用mathjax渲染就行，我已经用了很久了。今天是遇到markdown表格排版限制，不得不改用HTML表格，才发现HTML表格的公式不能渲染的问题。不过还是谢谢大佬！