记vuepress2.0中优雅的小技巧

柳儿
458 阅读3分钟

继上篇文章基础上，记录一些再vuepress中如何更加优雅的编写markdown，其实好好看官方文档，会发现有很多实用的插件，以及更加优雅的markdown语法，能够大大减轻cv工程。

markdown常用语法

  • 斜体 ： *斜体*

  • 加粗 ：**加粗**

  • 标题h1-h6: 用#空格

  • 链接 ： [链接](http://a.com)

  • 图片: ![图片转存失败，建议将图片保存下来直接上传 Image(http://url/a.png)]()

  • 引用: > 引用

  • 水平分割线 ： ---

  • 行内代码 ：单斜引号``
  • 块级代码： 三个单斜引号回车
// 内容

vuepress中markdown扩展用法

VuePress 会使用 markdown-it在新窗口打开 来解析 Markdown 内容，因此可以借助于 markdown-it 插件来实现 语法扩展在新窗口打开 。

文章内链接跳转

你可以使用连接语法，路径可以使用相对路径指向项目中其他文件路径，也可以使用绝对路径或者URL显示完整的连接路径

<!-- 相对路径 -->
[首页](../README.md)  
[配置参考](../reference/config.md)  
[快速上手](./getting-started.md)  
<!-- 绝对路径 -->
[指南](/zh/guide/README.md)  
[配置参考 > markdown.links](/zh/reference/config.md#links)  
<!-- URL -->
[GitHub](https://github.com)

目录自动生成

如果你想要把当前页面的目录添加到 Markdown 内容中，你可以使用 [[toc]] 语法。 她会自动将页面中的1-6级标题作为目录显示，可以通过配置指定要现实的标题等级

[[toc]]

如果需要自定义，可在 .vuepress/config.ts文件中添加markdown相关配置


export default defineUserConfig({
    markdown:{
        toc: {
          level: [3], // 默认是[2,3] 默认显示2级和3级标题
          containerClass: "toc-container", // 指定目录的容器样式，支持自定义样式修改
          listTag: 'ul' ,// 目录得目标标签可选参数 'ul' | 'ol'
          format?: (str: string) => str, // 格式化显示的目录
          // ... 更多的配置可以参考类型文件的说明
        }
    }
})

导入代码

有时候我们在写文档的时候需要显示案例，同时希望案例对应的代码能够在线查看的方式展现应该怎么做呢？如下效果

image.png

  • 首先在项目中创建案例的组件代码 ./vuepress/components/Demo.vue
  • 组件注册（这步可以查看上一篇文章《vuepress2.0搭建踩过的坑》）
  • 编写markdown如下

  <Demo></Demo>

  <details>
    <summary class="markdown-code">code</summary>

   <!-- ```vue
   <template>
	  <div class="demo">
	  </div>
	</template>
	<script lang="ts" setup>
	const props = defineProps({
	  header: String,
	})
	</script>
   ```--> // 此处注释要求掉，由于显示问题这里加上了注释
  </details>

这样就需要重复写一次案例的代码了，有没有更简单的方法？

当然，vuepress中提供了导入代码的方式。是不是更简单了


  <Demo/>

  <details>
    <summary class="markdown-code">code</summary>

  @[code](@src/Demo.vue)
  </details>

导入代码

基本用法

  • 从文件中导入代码块：
<!-- 最简单的语法 -->
@[code](../foo.js)
  • 导入这个文件的一部分：
<!-- 仅导入第 1 行至第 10 行 -->
@[code{1-10}](../foo.js)
  • 显示指定代码语言，不指定会根据文件扩展名进行推断：
<!-- 指定代码语言 -->
@[code js](../foo.js)
  • 高亮指定行代码
<!-- 行高亮 -->
@[code js{2,4-5}](../foo.js)

下面是一个复杂的例子：

  • 导入 '../foo.js' 文件的第 3 行至第 10 行
  • 指定语言为 'js'
  • 对导入代码的第 3 行进行高亮，即 '../foo.js' 文件的第 5 行
  • 禁用行号
@[code{3-10} js{3}:no-line-numbers](../foo.js)

路径别名配置

import { getDirname, path } from '@vuepress/utils'

const __dirname = getDirname(import.meta.url)

export default {
  markdown: {
    importCode: {
      handleImportPath: (str) => 
      str.replace(/^@src/, path.resolve(__dirname, './components'))
    }
  }
}

<!-- 会被解析至 'components/foo.js' -->
@[code](@src/foo.js)

代码块分组

:::: code-group
  ::: code-group-item html
  @[code{1-49}](@src/Form/Basic.vue)
  :::

  ::: code-group-item typescript
  @[code{50-97}](@src/Form/Basic.vue)
  :::
  ::::

会被解析成:

image.png

avatar
文章
阅读
粉丝