编写Markdown时如何爽爽地渲染树？

在使用VitePress/Dumi等静态网站生成时，一般均支持直接在Markdown中渲染显示Vue/React组件，这给个网站非常丰富极致的表现力，我们在创建静态网站时开心的使用各种Vue/React组件，但是在输出树结构时，实际场景中存在几个问题：

现有的树组件一般均属于某个UI套件的一部分，比较重
树组件的数据一般使用JSON进行描述，冗余很多，对于在网站输出场景比较交麻烦.

因此，隆重推荐LiteTree这个适用于React/Vue的树组件，专用MarkDown场景准备，具有：

轻量小巧，无任何外部依赖
采用Lite格式描述树，采用类似YAML的缩进来表示层级，数据简洁
支持标识，样式定制，注释，图标等丰富的表现形式

访问官网

快速使用

LiteTree包含@lite-tree/react和@lite-tree/vue两个版本，分别在React和Vue中使用,两者的使用方式基本相同。下面以VitePress为例进行说明。

第1步：安装

npm install @lite-tree/vue
// or
yarn add @lite-tree/vue
// or
pnpm add @lite-tree/vue

第2步：注册组件

@lite-tree/vue在VitePress中使用有两种方式：

按需引入
全局引入

一般建议将LiteTree注册为全局组件，以便在任何地方都可以使用。

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'
import { LiteTree } from '@lite-tree/vue'/** @type {import('vitepress').Theme} */
export default {extends: DefaultTheme,enhanceApp({ app }) {// 注册自定义全局组件app.component('LiteTree'，LiteTree)}
}

接下需要在.vitepress/config.mts中配置Vue参数，如下：

// .vitepress/config.mts
export default defineConfig({// ...vue:{template: {                      compilerOptions: {whitespace: 'preserve'      // [!code ++]}}}
})

重点:设置whitespace: 'preserve'是为了保留Markdown中的空格，以便LiteTree可以正确解析lite格式的树数据。

第3步：使用

由于上面将LiteTree注册为全局组件，因此接下来在任何markdown文件都可以直接使用<LiteTree>组件。

lite-tree支持使用json和lite两种格式来声明树数据。

lite是一种使用缩进来代表层级的简化格式，每4个空格代表一个树层级，适合在Markdown文档中使用。

下面是一个简单的例子(使用4个空格代表树的一个层缩进)：

<LiteTree>
- A公司行政中心总裁办              //   {color:red}important人力资源部财务部              //+行政部              //+法务部审计部              //-信息中心            //-+ 市场中心市场部销售部客服部品牌部市场策划部市场营销部研发中心移动研发部(java,python,go)    //!平台研发部测试部              //*运维部              //*产品部设计部
</LiteTree>

可以看到lite格式比起json或ul/li格式更加简洁，适合在Markdown文档中使用。

渲染效果如下：

在这里插入图片描述