From 7e7ba3c4f91b054f076a8e8bc6febfc3644e6cc9 Mon Sep 17 00:00:00 2001 From: Libin YANG Date: Sun, 1 Sep 2024 06:40:25 +0800 Subject: [PATCH] chore: update default content (#378) --------- Co-authored-by: YangFong --- src/assets/example/markdown.md | 456 ++++++++++----------------------- 1 file changed, 141 insertions(+), 315 deletions(-) diff --git a/src/assets/example/markdown.md b/src/assets/example/markdown.md index da7e21d..b547522 100644 --- a/src/assets/example/markdown.md +++ b/src/assets/example/markdown.md @@ -1,88 +1,168 @@ -# 微信 Markdown 编辑器 @doocs/md +# 探索 Markdown 的奇妙世界 -## 项目介绍 +欢迎来到 Markdown 的奇妙世界！无论你是写作爱好者、开发者、博主，还是想要简单记录点什么的人，Markdown 都能成为你新的好伙伴。它不仅让写作变得简单明了，还能轻松地将内容转化为漂亮的网页格式。今天，我们将全面探讨 Markdown 的基础和进阶语法，让你在这个过程中充分享受写作的乐趣！ -Markdown 文档自动即时渲染为微信图文，让你不再为微信文章排版而发愁！只要你会基本的 Markdown 语法，就能做出一篇样式简洁而又美观大方的微信图文。 +Markdown 是一种轻量级标记语言，用于格式化纯文本。它以简单、直观的语法而著称，可以快速地生成 HTML。Markdown 是写作与代码的完美结合，既简单又强大。 +## Markdown 基础语法 -## 功能特性 +### 1. 标题：让你的内容层次分明 -- [x] 支持自定义 CSS 样式 -- [x] 支持 Markdown 所有基础语法、数学公式、Mermaid 图表 -- [x] 支持浅色、深色两种编辑器外观 -- [x] 支持 Alt + Shift + F 快速格式化文档 -- [x] 支持色盘取色，快速替换文章整体色调 -- [x] 支持多图上传，可自定义配置图床 -- [x] 支持自定义上传逻辑 -- [x] 支持在编辑框右键弹出功能选项卡 -- [x] 支持批量转换本地图片为线上图片 +用 `#` 号来创建标题。标题从 `#` 开始，我们最多支持 4 个 `#` 号，对应 4 级标题。 -![demo1](https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/demo1.gif) - -![demo2](https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/demo2.gif) - -![demo3](https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/demo3.gif) - -![demo4](https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/demo4.gif) - -## 如何开发和部署 - -```sh -# 安装依赖 -npm i - -# 启动开发模式 -npm start - -# 部署在 /md 目录 -npm run build -# 访问 http://127.0.0.1:9000/md - -# 部署在根目录 -npm run build:h5-netlify -# 访问 http://127.0.0.1:9000/ +```markdown +# 一级标题 +## 二级标题 +### 三级标题 +#### 四级标题 ``` -## 快速搭建私有服务 +以上代码将渲染出一组层次分明的标题，使你的文章井井有条。 -### 方式 1. 使用 npm cli +> 标准 Markdown 支持 1 ~ 6 级标题，此编辑器也不例外，不过我们只准备了四个级别样式，同时也是不推荐文章超过四级标题。 -通过我们的 npm cli 你可以轻易搭建属于自己的微信 Markdown 编辑器。 +### 2. 段落与换行：自然流畅 -```sh -# 安装 -npm i -g @doocs/md-cli +Markdown 中的段落就是一行接一行的文本。要创建新段落，只需在两行文本之间空一行。 -# 启动 -md-cli +### 3. 字体样式：强调你的文字 -# 访问 -open http://127.0.0.1:8800/md/ +- **粗体**：用两个星号或下划线包裹文字，如 `**粗体**` 或 `__粗体__`。 +- *斜体*：用一个星号或下划线包裹文字，如 `*斜体*` 或 `_斜体_`。 +- ~~删除线~~：用两个波浪线包裹文字，如 `~~删除线~~`。 -# 启动并指定端口 -md-cli port=8899 +这些简单的标记可以让你的内容更有层次感和重点突出。 -# 访问 -open http://127.0.0.1:8899/md/ +### 4. 列表：整洁有序 + +- **无序列表**：用 `-`、`*` 或 `+` 加空格开始一行。 +- **有序列表**：使用数字加点号（`1.`、`2.`）开始一行。 + +在列表中嵌套其他内容？只需缩进即可实现嵌套效果。 + +- 无序列表项 1 + 1. 嵌套有序列表项 1 + 2. 嵌套有序列表项 2 +- 无序列表项 2 + +1. 有序列表项 1 +2. 有序列表项 2 + +### 5. 链接与图片：丰富内容 + +- **链接**：用方括号和圆括号创建链接 `[显示文本](链接地址)`。 +- **图片**：和链接类似，只需在前面加上 `!`，如 `![描述文本](图片链接)`。 + +[访问 Google](https://www.google.com) + +![Markdown Logo](https://markdown-here.com/img/icon256.png) + +轻松实现富媒体内容展示！ + +> 因微信公众号平台不支持除公众号文章以外的链接，故其他平台的链接，会呈现链接色泽但不能点击。 + +> 对于这些链接请注意明文书写，或点击左上角「格式->微信外链接转底部引用」开启引用，这样就可以在底部观察到链接指向。 + +### 6. 引用：引用名言或引人深思的句子 + +使用 `>` 来创建引用，只需在文本前面加上它。多层引用？在前一层 `>` 后再加一个就行。 + +> 这是一个引用 +>> 这是一个嵌套引用 + +这让你的引用更加富有层次感。 + +### 7. 代码块：展示你的代码 + +- **行内代码**：用反引号包裹，如 `code`。 +- **代码块**：用三个反引号包裹，并指定语言，如： + +```js +console.log("Hello, Markdown!"); ``` -md-cli 支持以下命令行参数： +语法高亮让你的代码更易读。 -- `port` 指定端口号，默认 8800，如果被占用会随机使用一个新端口。 -- `spaceId` dcloud 服务空间配置 -- `clientSecret` dcloud 服务空间配置 +### 8. 分割线：分割内容 -### 方式 2. 使用 Docker 镜像 +用三个或更多的 `-`、`*` 或 `_` 来创建分割线。 -如果你是 Docker 用户，也可以直接使用一条命令，启动完全属于你的、私有化运行的实例。 +--- -```sh -docker run -d -p 8080:80 doocs/md:latest +为你的内容添加视觉分隔。 + +### 9. 表格：清晰展示数据 + +Markdown 支持简单的表格，用 `|` 和 `-` 分隔单元格和表头。 + +| 名称 | 年龄 | 职业 | +| ------ | ---- | ------ | +| 小明 | 25 | 开发者 | +| 小红 | 24 | 设计师 | + +这样的表格让数据展示更为清爽！ + +> 手动编写标记太麻烦？我们提供了便捷方式。左上方点击「编辑->插入表格」，即可快速实现表格渲染。 + +## Markdown 进阶技巧 + +### 1. LaTeX 公式：完美展示数学表达式 + +Markdown 允许嵌入 LaTeX 语法展示数学公式： + +- **行内公式**：用 `$` 包裹公式，如 $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} +$$ + +这是展示复杂数学表达的利器！ + +### 2. Mermaid 流程图：可视化流程 + +Mermaid 是强大的可视化工具，可以在 Markdown 中创建流程图、时序图等。 + +```mermaid +graph TD; + A-->B; + A-->C; + B-->D; + C-->D; ``` -容器运行起来之后，打开浏览器，访问 http://localhost:8080 即可。 +```mermaid +pie + title Key elements in Product X + "Calcium" : 42.96 + "Potassium" : 50.05 + "Magnesium" : 10.01 + "Iron" : 5 +``` -关于本项目 Docker 镜像的更多详细信息，可以关注 https://github.com/doocs/docker-md +```mermaid +pie + title 为什么总是宅在家里？ + "喜欢宅" : 45 + "天气太热" : 70 + "穷" : 500 + "没人约" : 95 +``` + +这种方式不仅能直观展示流程，还能提升文档的专业性。 + +> 更多用法，参见：[Mermaid User Guide](https://mermaid.js.org/intro/getting-started.html)。 + +## 结语 + +Markdown 是一种简单、强大且易于掌握的标记语言，通过学习基础和进阶语法，你可以快速创作内容并有效传达信息。无论是技术文档、个人博客还是项目说明，Markdown 都是你的得力助手。希望这篇文章能够带你全面了解 Markdown 的潜力，让你的写作更加丰富多彩！ + +现在，拿起 Markdown 编辑器，开始创作吧！探索 Markdown 的世界，你会发现它远比想象中更精彩！ #### 推荐阅读 @@ -98,257 +178,3 @@ docker run -d -p 8080:80 doocs/md:latest
- - - - ----- - -# Markdown 语法教程 - -Markdown 是一种轻量级标记语言，常用于撰写格式简单的文本文件，如文档、博客、和 README 文件。它通过简单的语法将普通文本转换为格式化的 HTML 文档。下面是 Markdown 的基本语法介绍。 - -## 标题 - -Markdown 使用 `#` 来表示标题。标题等级从 1 到 4，对应 HTML 的 `

` 到 `

` 标签。 - -```markdown -# 一级标题 -## 二级标题 -### 三级标题 -#### 四级标题 -``` - -效果： - -# 一级标题 -## 二级标题 -### 三级标题 -#### 四级标题 - -## 段落和换行 - -普通文本直接书写即可形成段落。段落之间空一行即可。使用两个或多个空格加回车来实现换行。 - -```markdown -这是第一段文字。 - -这是第二段文字。 -这是同一段中的换行。 -``` - -效果： - -这是第一段文字。 - -这是第二段文字。 -这是同一段中的换行。 - -## 字体样式 - -- **加粗**：使用 `**` 或 `__` 包裹文本。 -- *斜体*：使用 `*` 或 `_` 包裹文本。 -- ~~删除线~~：使用 `~~` 包裹文本。 - -```markdown -**加粗** -*斜体* -~~删除线~~ -``` - -效果： - -**加粗** -*斜体* -~~删除线~~ - -## 列表 - -### 无序列表 - -使用 `-`、`+` 或 `*` 加空格来创建无序列表。 - -```markdown -- 项目一 -- 项目二 - - 子项目 -- 项目三 -``` - -效果： - -- 项目一 -- 项目二 - - 子项目 -- 项目三 - -### 有序列表 - -使用数字加点来创建有序列表。 - -```markdown -1. 项目一 -2. 项目二 - 1. 子项目 -3. 项目三 -``` - -效果： - -1. 项目一 -2. 项目二 - 1. 子项目 -3. 项目三 - -## 链接 - -### 行内链接 - -使用 `[显示文本](链接地址)` 创建行内链接。 - -```markdown -[百度](https://www.baidu.com) -``` - -效果： - -[百度](https://www.baidu.com) - -## 图片 - -使用 `![替代文本](图片地址)` 插入图片。 - -```markdown -![Markdown Logo](https://markdown-here.com/img/icon256.png) -``` - -效果： - -![Markdown Logo](https://markdown-here.com/img/icon256.png) - -## 代码 - -### 行内代码 - -使用反引号 `` ` `` 包裹行内代码。 - -```markdown -使用 `print('Hello World')` 来输出文本。 -``` - -效果： - -使用 `print('Hello World')` 来输出文本。 - -### 代码块 - -使用三个反引号 ``` 包裹代码块，可以指定语言来高亮代码。 - -```markdown -```python -def hello(): - print("Hello, World!") -``` -``` - -效果： - -```python -def hello(): - print("Hello, World!") -``` - -## 流程图 - - -```mermaid -pie - title Key elements in Product X - "Calcium" : 42.96 - "Potassium" : 50.05 - "Magnesium" : 10.01 - "Iron" : 5 -``` - -```mermaid -classDiagram -Class01 <|-- AveryLongClass : Cool -Class03 *-- Class04 -Class05 o-- Class06 -Class07 .. Class08 -Class09 --> C2 : Where am i? -Class09 --* C3 -Class09 --|> Class07 -Class07 : equals() -Class07 : Object[] elementData -Class01 : size() -Class01 : int chimp -Class01 : int gorilla -Class08 <--> C2: Cool label -``` - - -```mermaid -pie - title Key elements in Product X - "Calcium" : 42.96 - "Potassium" : 50.05 - "Magnesium" : 10.01 - "Iron" : 5 -``` - - -```mermaid -pie - title 为什么总是宅在家里？ - "喜欢宅" : 45 - "天气太热" : 70 - "穷" : 500 - "关你屁事" : 95 -``` - -## 表格 - -使用 `|` 分隔列，使用 `-` 分隔表头和内容。 - -```markdown -| 名称 | 年龄 | 城市 | -|--------|------|--------| -| 小明 | 20 | 北京 | -| 小红 | 22 | 上海 | -``` - -效果： - -| 名称 | 年龄 | 城市 | -|--------|------|--------| -| 小明 | 20 | 北京 | -| 小红 | 22 | 上海 | - -## 引用 - -使用 `>` 创建引用。 - -```markdown -> 这是一段引用文本。 -``` - -效果： - -> 这是一段引用文本。 - -## 分割线 - -使用三个或更多的 `-`、`*`、`_` 创建分割线。 - -```markdown ---- -``` - -效果： - ---- - -### 结束语 - -Markdown 简洁易学，适合用于各种简单的文本格式需求。如果想要深入了解更多语法，推荐查阅 [Markdown 官方文档](https://daringfireball.net/projects/markdown/)。