mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
chore: update default content (#378)
--------- Co-authored-by: YangFong <yangfong2022@qq.com>
This commit is contained in:
parent
379b53edba
commit
7e7ba3c4f9
@ -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] 支持 <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd> 快速格式化文档
|
||||
- [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
|
||||
<center>
|
||||
<img src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/1648303220922-7e14aefa-816e-44c1-8604-ade709ca1c69.png" style="width: 100px;">
|
||||
</center>
|
||||
|
||||
|
||||
|
||||
|
||||
----
|
||||
|
||||
# Markdown 语法教程
|
||||
|
||||
Markdown 是一种轻量级标记语言,常用于撰写格式简单的文本文件,如文档、博客、和 README 文件。它通过简单的语法将普通文本转换为格式化的 HTML 文档。下面是 Markdown 的基本语法介绍。
|
||||
|
||||
## 标题
|
||||
|
||||
Markdown 使用 `#` 来表示标题。标题等级从 1 到 4,对应 HTML 的 `<h1>` 到 `<h4>` 标签。
|
||||
|
||||
```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/)。
|
||||
|
Loading…
Reference in New Issue
Block a user