Markdown 样式展示

所有 Markdown 扩展语法的实时渲染效果展示

# Markdown 样式展示 本页面展示 GEO Wiki Pro 支持的所有 Markdown 语法及其渲染效果。每种语法都附带源码,方便参考。 --- ## 🖥️ GEO Wiki Pro 界面预览 以下是 GEO Wiki Pro 的实际界面截图: ![GEO Wiki Pro 首页界面](/media/showcase/1782103630647-3dt4y6.png) **界面特点:** - 🎨 现代化 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. 图片 ![GEO Wiki 界面示例](/media/showcase/1782103630647-3dt4y6.png) --- ## 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) — 完整用户手册