Markdown 样式展示
所有 Markdown 扩展语法的实时渲染效果展示
# Markdown 样式展示
本页面展示 GEO Wiki Pro 支持的所有 Markdown 语法及其渲染效果。每种语法都附带源码,方便参考。
---
## 🖥️ GEO Wiki Pro 界面预览
以下是 GEO Wiki Pro 的实际界面截图:

**界面特点:**
- 🎨 现代化 UI 设计,支持暗黑模式
- 📂 左侧分类导航,快速切换
- 🔍 全局搜索,即时检索
- 🌐 中英日三语切换
- 🤖 AI 友好,一键复制 llms.txt
---
## 1. 提示框(Callouts)
::: note
**蓝色提示框** — 补充说明信息,帮助读者理解上下文。
:::
::: tip
**绿色提示框** — 有用的技巧和最佳实践。
:::
::: warning
**黄色提示框** — 重要注意事项,请仔细阅读。
:::
::: danger
**红色提示框** — 关键安全信息,忽略可能导致严重后果。
:::
---
## 2. 代码块
### 基础代码块
```bash
# 安装 GEO Wiki CLI
npm install -g geowiki-cli
# 登录
geo login --url https://geowiki.pro --token geo_xxxxx
# 列出文档
geo doc list --lang zh --json
```
```javascript
// Vue 3 组合式 API
import { ref, computed } from "vue";
const count = ref(0);
const doubled = computed(() => count.value * 2);
```
```python
# Python 示例
import requests
response = requests.get("https://geowiki.pro/api/v1/docs")
docs = response.json()["data"]
for doc in docs:
print(f"{doc['slug']}: {doc['title']}")
```
### 标签页代码块
```bash // [Bash]
# 一行命令创建文档
geo doc create --title "Hello" --content "# Hello World" --slug hello --lang zh
```
```python // [Python]
import requests
requests.post("https://geowiki.pro/api/v1/admin/docs", json={
"title": "Hello",
"slug": "hello",
"content": "# Hello World"
})
```
```javascript // [JavaScript]
fetch("/api/v1/admin/docs", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title: "Hello", slug: "hello" })
});
```
---
## 3. 表格
### 基础表格
| 功能 | 说明 | 状态 |
|------|------|------|
| 文档管理 | CRUD + 批量操作 | ✅ 已完成 |
| 多语言 | 中/英/日三语 | ✅ 已完成 |
| AI 优化 | GEO + SEO | ✅ 已完成 |
| 暗黑模式 | 全站支持 | ✅ 已完成 |
### 对齐方式
| 左对齐 | 居中 | 右对齐 |
|:-------|:----:|-------:|
| 文本 | 文本 | 文本 |
| 较长的内容 | 居中显示 | 100 |
---
## 4. Mermaid 图表
### 流程图
```mermaid
graph TD
A[用户访问] --> B{已登录?}
B -->|是| C[显示文档]
B -->|否| D[跳转登录]
D --> E[输入账号密码]
E --> F{验证成功?}
F -->|是| C
F -->|否| G[显示错误]
G --> E
```
### 时序图
```mermaid
sequenceDiagram
participant U as 用户
participant F as 前端
participant A as API
participant D as 文件系统
U->>F: 点击"保存"
F->>A: POST /api/v1/admin/docs
A->>D: 写入 .md 文件
D-->>A: 写入成功
A-->>F: { success: true }
F-->>U: 显示"保存成功"
```
### 甘特图
```mermaid
gantt
title GEO Wiki v1.0.4 开发计划
dateFormat YYYY-MM-DD
section 后端
分页修复 :done, 2026-06-20, 1d
异步 fs :done, 2026-06-21, 1d
缓存优化 :done, 2026-06-22, 1d
section 前端
暗黑模式 :done, 2026-06-20, 2d
可访问性 :done, 2026-06-21, 1d
性能优化 :done, 2026-06-22, 1d
section 发布
npm 包 :done, 2026-06-22, 1d
文档更新 :done, 2026-06-22, 1d
```
---
## 5. ECharts 图表
### 柱状图
```echarts
{
"title": { "text": "月度文档增长", "left": "center" },
"tooltip": { "trigger": "axis" },
"xAxis": { "type": "category", "data": ["1月", "2月", "3月", "4月", "5月", "6月"] },
"yAxis": { "type": "value", "name": "文档数" },
"series": [
{ "name": "新增文档", "type": "bar", "data": [5, 8, 12, 15, 20, 30], "itemStyle": { "color": "#2563EB" } }
]
}
```
### 折线图
```echarts
{
"title": { "text": "访问量趋势", "left": "center" },
"tooltip": { "trigger": "axis" },
"xAxis": { "type": "category", "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] },
"yAxis": { "type": "value", "name": "PV" },
"series": [
{ "name": "页面浏览", "type": "line", "data": [120, 200, 150, 80, 70, 110, 130], "smooth": true, "areaStyle": { "opacity": 0.3 } }
]
}
```
### 饼图
```echarts
{
"title": { "text": "流量来源分布", "left": "center" },
"tooltip": { "trigger": "item" },
"legend": { "orient": "vertical", "left": "left" },
"series": [{
"name": "来源",
"type": "pie",
"radius": "50%",
"data": [
{ "value": 335, "name": "直接访问" },
{ "value": 310, "name": "搜索引擎" },
{ "value": 234, "name": "AI 引擎" },
{ "value": 148, "name": "社交媒体" }
],
"emphasis": { "itemStyle": { "shadowBlur": 10, "shadowOffsetX": 0, "shadowColor": "rgba(0, 0, 0, 0.5)" } }
}]
}
```
---
## 6. 网格布局
### 双列网格
:::grid{cols=2}
**左列内容**
- 功能一:文档管理
- 功能二:多语言支持
- 功能三:AI 优化
**右列内容**
- 功能四:SEO 优化
- 功能五:暗黑模式
- 功能六:可访问性
:::
### 三列卡片网格
:::grid{cols=3 style=card}
**🚀 快速部署**
支持 Docker、宝塔面板、NAS 等多种部署方式,5 分钟完成上线。
**🤖 AI 友好**
自动优化 llms.txt、Schema 结构化数据,让 AI 引擎主动引用您的内容。
**🌍 多语言**
内置中英日三语支持,一套系统服务全球客户。
:::
---
## 7. 数学公式
行内公式:质能方程 $E=mc^2$,欧拉公式 $e^{i\pi}+1=0$。
块级公式:
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
$$
\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$
---
## 8. 脚注
GEO Wiki Pro 是一款 AI 优化的知识库系统[^1],专为企业打造[^2]。
[^1]: 支持 ChatGPT、Gemini、Perplexity 等主流 AI 引擎。
[^2]: 提供私有化部署、定制开发、技术培训等企业服务。
---
## 9. FAQ 块
:::faq
**Q: GEO Wiki Pro 是免费的吗?**
A: GEO Wiki Pro 是付费产品,提供多种授权方案。欢迎联系 [email protected] 咨询。
**Q: 支持哪些部署方式?**
A: 支持 Docker、宝塔面板、NAS、云服务器等多种部署方式。详见[部署指南](/docs/docker-deployment)。
**Q: 如何让 AI 引擎引用我的内容?**
A: GEO Wiki Pro 内置 GEO 优化,自动生成 llms.txt、Schema 结构化数据。只需正常发布内容,系统会自动优化。
**Q: 支持多少种语言?**
A: 目前支持中文、英文、日文三种语言,后续会扩展更多语言。
:::
---
## 10. 3D 模型
:::model[电机模型示例](/media/sample.step)
:::
---
## 11. 文件下载
[用户手册 PDF](/media/user-manual.pdf)
---
## 12. 图片

---
## 13. 文本格式
- **粗体文本**
- *斜体文本*
- ~~删除线文本~~
- ==高亮文本==
- `行内代码`
- [链接文本](/docs/markdown-guide)
---
## 14. 列表
### 无序列表
- 第一项
- 第二项
- 子项目 A
- 子项目 B
- 第三项
### 有序列表
1. 步骤一:安装 CLI
2. 步骤二:登录服务器
3. 步骤三:创建文档
### 任务列表
- [x] 安装 GEO Wiki Pro
- [x] 配置分类和标签
- [ ] 撰写第一篇文档
- [ ] 发布并分享
---
## 15. 引用
> "GEO Wiki Pro 帮助我们将分散的知识资产统一管理,客户可以自助查询常见问题,大大减轻了客服团队的压力。"
>
> — 店管家运营总监
---
## 相关文档
- [Markdown 写作指南](/docs/markdown-guide) — 完整语法参考
- [CLI 命令参考](/docs/cli-reference) — 命令行操作指南
- [GEO Wiki Pro 使用说明书](/docs/geo-wiki-pro-user-manual) — 完整用户手册