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

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

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

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

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

访问官网

快速使用

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

第1步:安装

ts 复制代码
npm install @lite-tree/vue
// or
yarn add @lite-tree/vue
// or
pnpm add @lite-tree/vue

第2步:注册组件

@lite-tree/vueVitePress中使用有两种方式:

  • 按需引入
  • 全局引入

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

ts 复制代码
// .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参数,如下:

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

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

第3步:使用

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

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

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

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

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

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

渲染效果如下:


说明:

  • 可以看到lite格式非常简洁,只需要通过缩进TAB来代表缩进即可,默认情况下,每4个空格代表一个树层级,一个TAB等于4个空格。
  • 默认情况下,前置-号来表示节点展开状态,+号表示节点关闭状态。

访问官网了解更多细节

推荐

相关推荐
滚雪球~几秒前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语2 分钟前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport3 分钟前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg5 分钟前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww12 分钟前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_7482548813 分钟前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭1 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234521 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成1 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript
噢,我明白了1 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域