Markdown 是一种轻量级标记语言，常用于格式化文本。它易于阅读和编写，并且可以转换为有效的 HTML 文档。以下是 Markdown 的基本语法：
基本用法
1. 标题
使用 # 来表示标题，# 的数量表示标题的级别。
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
2. 段落和换行
段落由一个或多个连续的文本行组成，段落之间需要空一行。
这是第一段。
这是第二段。
要在 Markdown 中换行，可以在行尾添加两个空格，或者使用 <br> 标签。
这是第一行
这是第二行
3. 强调
使用 * 或 _ 来表示斜体，使用 ** 或 __ 来表示粗体。
*斜体* 或 _斜体_
**粗体** 或 __粗体__
4. 列表
无序列表
使用 -、* 或 + 来表示无序列表。
- 项目1
- 项目2
- 子项目2.1
- 子项目2.2
有序列表
使用数字加点来表示有序列表。
1. 第一项
2. 第二项
1. 子项2.1
2. 子项2.2
5. 内嵌 HTML
Markdown 支持内嵌 HTML 标签。
<p style="color:red;">这是红色的文字。</p>
6. 转义字符
使用 `` 来转义特殊字符。
*这不是斜体*
7. 注释
Markdown 本身不支持注释，但可以使用 HTML 注释。
markdown
复制
<!-- 这是一个注释 -->
8. 内嵌链接
使用 [文本][id] 和 [id]: URL 来创建内嵌链接。
[Google][1]
[1]: https://www.google.com
使用方法
前端显示主要是不用自己定义样式，根据返回的数据内容直接渲染，markdown直接就解析
安装：
安装库 npm install ngx-markdown marked
配置：
在 app.module.ts 中导入模块：、
import { MarkdownModule } from 'ngx-markdown';
@NgModule({
imports: [
MarkdownModule.forRoot()
]
})
export class AppModule { }
1. 基本语法
在组件模板中直接使用 Markdown 内容：、
<div [innerHTML]="markdownContent | markdown"></div>
2. 主要属性
-
[data]: 接收 markdown 文本内容
-
[src]: 从 URL 加载 markdown 内容
-
[inline]="true": 内联模式渲染
-
[emoji]="true": 启用 emoji 支持
-
[katex]="true": 启用数学公式支持
3. 事件绑定
<markdown
(ready)="onReady()"
(error)="onError($event)"
(load)="onLoad($event)">
</markdown>
4.结合其他插件使用
1、使用 marked 库将 Markdown 转换为 HTML
安装 marked：
npm install marked
代码示例：
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { marked } from 'marked';
@Component({
selector: 'app-markdown',
template: `<div [innerHTML]="htmlContent"></div>`
})
export class MarkdownComponent implements OnInit {
htmlContent: string = '';
constructor(private http: HttpClient) { }
ngOnInit(): void {
this.http.get('assets/docs/README.md', { responseType: 'text' })
.subscribe(data => {
this.htmlContent = marked(data); // 将 Markdown 转换为 HTML
});
}
}
2、动态绑定 Markdown 内容
如果你需要动态绑定 Markdown 内容，可以使用 ngx-markdown 或 marked 库。
示例：
import { Component } from '@angular/core';
import { marked } from 'marked';
@Component({
selector: 'app-markdown',
template: `<div [innerHTML]="htmlContent"></div>`
})
export class MarkdownComponent {
markdownContent = `
# Hello, Markdown!
- Item 1
- Item 2
**Bold Text**
`;
htmlContent: string = marked(this.markdownContent); // 转换为 HTML
}
使用场景
Markdown 是一种轻量级标记语言，因其简洁易用的语法和广泛的支持，被广泛应用于各种场景。以下是 Markdown 的主要使用场景：
1. 文档编写
- 技术文档：Markdown 常用于编写 API 文档、开发手册、README 文件等。例如，GitHub 上的项目文档通常使用 Markdown 编写。
- 项目说明：开源项目的
README.md文件通常使用 Markdown 格式，方便开发者快速了解项目。 - 知识库：许多知识库工具（如 GitBook、Notion、Confluence）支持 Markdown，便于团队协作和知识管理。
2. 博客和文章撰写
- 静态网站生成：许多静态网站生成器（如 Jekyll、Hugo、Hexo）支持 Markdown，用户可以用 Markdown 编写内容，然后生成静态网页。
- 博客平台：一些博客平台（如 WordPress、Ghost、Medium）支持 Markdown 语法，方便作者快速排版。
- 技术文章：开发者常用 Markdown 编写技术教程、博客文章，因为其语法简单且支持代码高亮。
3. 笔记和知识管理
- 笔记工具：许多笔记工具（如 Obsidian、Typora、Notion、Bear）支持 Markdown，用户可以用 Markdown 快速记录和整理笔记。
- 个人知识库：Markdown 文件易于存储和管理，适合用于构建个人知识库。
- 任务管理：Markdown 支持任务列表语法（
- [ ]），可以用于创建待办事项和任务清单。
4. 协作与版本控制
- Git 和 GitHub：Markdown 是 GitHub 上的标准文档格式，用于编写
README.md、CHANGELOG.md等文件。 - 团队协作：Markdown 文件易于通过 Git 进行版本控制，适合团队协作编写文档。
- 代码注释：开发者可以在代码注释中使用 Markdown 语法，方便生成文档。
5. 邮件和消息排版
- 邮件排版：一些邮件客户端支持 Markdown 语法，可以用 Markdown 快速排版邮件内容。
- 聊天工具：部分聊天工具（如 Slack、Discord）支持 Markdown 语法，方便用户格式化消息。
6. 教育与学习
- 教学材料：教师可以用 Markdown 编写课程大纲、讲义和作业说明。
- 学习笔记：学生可以用 Markdown 记录学习笔记，方便整理和复习。
- 在线课程：许多在线教育平台支持 Markdown，用于编写课程内容。
7. 数据科学与报告
- Jupyter Notebook：Jupyter Notebook 支持 Markdown 语法，用于编写文档说明和数据分析报告。
- 研究报告：研究人员可以用 Markdown 编写研究报告，结合代码和图表生成动态文档。
8. 简历与个人简介
- 简历编写：Markdown 可以用于编写简洁的简历，支持转换为 PDF 或 HTML 格式。
- 个人主页：开发者常用 Markdown 编写个人主页或项目介绍。
9. 自动化文档生成
- API 文档：工具如 Swagger、Docusaurus 支持 Markdown，用于生成 API 文档。
- 静态站点生成：Markdown 文件可以作为静态站点的内容源，结合模板生成网页。
10. 跨平台兼容性
- 多平台支持：Markdown 文件可以在不同平台（Windows、macOS、Linux）上打开和编辑。
- 格式转换：Markdown 可以轻松转换为 HTML、PDF、Word 等格式，适合跨平台分享。
11. 轻量级网页开发
- 简单网页：Markdown 可以直接用于编写简单的网页内容，结合 CSS 实现快速开发。
- 文档站点：许多文档站点（如 VuePress、Docusaurus）使用 Markdown 作为内容源。
12. 社交媒体与内容创作
- 社交媒体：部分社交媒体平台支持 Markdown 语法，方便用户格式化内容。
- 内容创作：Markdown 适合快速编写和发布内容，减少排版时间。
