外观
代码树
约 534 字大约 2 分钟
2025-12-23
在markdown中, 使用::: code-tree容器, 可以显示一个带有文件树的代码块区域.
相比于代码块分组, 代码树可以更加清晰地展示代码文件的组织结构, 以及文件的依赖关系.
code-tree 容器
::: code-tree title="项目名称" height="400px" entry="filepath"
```lang title="filepath" :active
<!-- code content-->
```
```lang title="filepath"
<!-- code content-->
```
<!-- 更多代码块 -->
:::使用::: code-tree容器包裹多个代码块.
- 在
::: code-tree后使用title="Project Name"声明代码树的标题. - 在
::: code-tree后使用height="400px"声明代码树的高度. - 在
::: code-tree后使用entry="filepath"声明默认展开的文件路径. - 在代码块
``` lang后使用title="filepath"声明当前代码块的文件路径. - 如果在
::: code-tree未声明entry="filepath", 可以在代码块``` lang后使用:active声明当前代码块为展开状态. - 如果未指定展开的文件路径, 默认展开第一个文件
::: code-tree title="Vue App" height="400px" entry="src/main.js"
```vue title="src/components/HelloWorld.vue"
<template>
<div class="hello">
<h1>Hello World</h1>
</div>
</template>
```
```vue title="src/App.vue"
<template>
<div id="app">
<h3>vuepress-theme-plume</h3>
<HelloWorld />
</div>
</template>
```
```ts title="src/main.js"
import { createApp } from "vue"
import App from "./App.vue"
createApp(App).mount("#app")
```
```json title="package.json"
{
"name": "Vue App",
"scripts": {
"dev": "vite"
}
}
```
:::Vue App
src
components
HelloWorld.vue
App.vue
main.js
package.json
src/components/HelloWorld.vue
<template>
<div class="hello">
<h1>Hello World</h1>
</div>
</template>src/App.vue
<template>
<div id="app">
<h3>vuepress-theme-plume</h3>
<HelloWorld />
</div>
</template>src/main.js
import { createApp } from "vue"
import App from "./App.vue"
createApp(App).mount("#app")package.json
{
"name": "Vue App",
"scripts": {
"dev": "vite"
}
}从目录导入 code-tree
主题支持通过以下语法从目录导入code-tree
<!-- 简单导入 -->
@[code-tree](dir_path)
<!-- 添加的配置 -->
@[code-tree title="Project Name" height="400px" entry="filepath"](dir_path)- dir_path: 当传入绝对路径, 即以
/开头时, 从文档站点的源目录开始查找. 当传入相对路径时, 即以.开头时, 表示相对于当前 markdown 文件. - title: 代码树标题, 可选, 默认为空.
- height: 代码树高度, 可选, 默认为空.
- entry: 默认展开的文件路径, 可选, 默认为第一个文件.
版权所有
版权归属：洱海