新的文档渲染样式
重新构建了渲染组件,优化了样式.
2025-08-10重新对文档的样式进行了优化
- 周日在家闭关重写了十几个渲染组件。
- 纯古法手工敲代码,兼容 Markdown 语法.部分 css 样式由 GPT-5 生成.
- 大部分组件对主题进行了响应式处理,会根据主题进行不同的样式渲染
1. 标题：让你的内容层次分明
用 #号来创建标题。标题从 # 开始，# 的数量表示标题的级别。
以上代码将渲染出一组层次分明的标题，使你的内容井井有条。并且可以根据标题进行快速导航!
2. 流程图与公式渲染：
```mermaid[流程图语句.md]
graph TD
A[Local Coolify 实例] --> B[生产服务器]
A --> D[编译服务器]
B --> B1[生产环境]
D --> B
```mermaid[饼图语句.md]
pie
title 为什么总是宅在家里？
"喜欢宅" : 45
"天气太热" : 70
"穷" : 500
"没人约" : 95
- 单行公式：用
$包裹公式，如 - 块级公式：用
$$包裹公式，如：
- 列表内块公式
- **单行公式**：用 `$` 包裹公式，如 $E = mc^2$
- **块级公式**：用 `$$` 包裹公式，如：
$$
\begin{aligned}
d_{i, j} &\leftarrow d_{i, j} + 1 \\
d_{i, y + 1} &\leftarrow d_{i, y + 1} - 1 \\
d_{x + 1, j} &\leftarrow d_{x + 1, j} - 1 \\
d_{x + 1, y + 1} &\leftarrow d_{x + 1, y + 1} + 1
\end{aligned}
$$
- 列表内块公式
$$
\chi^2 = \sum \frac{(|O - E| - 0.5)^2}{E}
$$
3. 代码块与代码树：展示你的代码
- 行内代码：用反引号包裹，如
code。 - 代码块：用三个反引号包裹，并指定语言，如：
hello.vue
console.log("Hello, Estel Docs!");
- 代码树：用
::code-tree包裹，并指定默认值，如：
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro'],
future: {
compatibilityVersion: 4
},
css: ['~/assets/main.css']
});
代码树可以用来展示简单的项目文件结构.但并不适合过于复杂的项目.
4. 字体样式：强调你的文字
- 粗体：用两个星号或下划线包裹文字，如
**粗体**或__粗体__。 - 斜体：用一个星号或下划线包裹文字，如
*斜体*或_斜体_。 删除线：用两个波浪线包裹文字，如~~删除线~~。
这些简单的标记可以让你的内容更有层次感和重点突出。
5. 列表：整洁有序
- 无序列表：用
-、*或+加空格开始一行。 - 有序列表：使用数字加点号（
1.、2.）开始一行。
在列表中嵌套其他内容？只需缩进即可实现嵌套效果。
- 无序列表项 1
- 嵌套有序列表项 1
- 嵌套有序列表项 2
- 无序列表项 2
- 有序列表项 1
- 有序列表项 2
6. 链接与图片：丰富内容
- 链接：用方括号和圆括号创建链接
[显示文本](链接地址)。 - 图片：和链接类似，只需在前面加上
!，如。
7. 引用：引用名言或引人深思的句子
使用 > 来创建引用，只需在文本前面加上它。多层引用？在前一层 > 后再加一个就行。
这是一个引用
这是一个嵌套引用
这让你的引用更加富有层次感。
语法高亮让你的代码更易读。
8. 分割线：分割内容
用三个或更多的 -、* 或 _ 来创建分割线。
为你的内容添加视觉分隔。
9. 表格：清晰展示数据
Markdown 支持简单的表格，用 `|` 和 `-` 分隔单元格和表头。
| 项目名称 | 演示网址 | 仓库地址 |
| ------------------------------------------- | ---------------------- | ------------ |
| Estel Docs | [lijue.net](https://lijue.net) | [Github](https://github.com/estel-li/estel-docs) |
| Estel Docs | [lijue.net](https://lijue.net) | [GitEE](https://gitee.com/estel-li/estel-docs) |
| Estel Docs | [lijue.net](https://lijue.net) | [Gitee(国内)](https://gitee.com/estel-li/estel-docs) |
这样的表格让数据展示更为清爽！
结语
- 还有更多的组件等待你发现.