Markdown各标签使用用法

1、标题

注:标签和文本之间要有一个空格

一级标题

二级标题

三级标题

# 一级标题 
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题 

2、列表

无序列表
  • 文本1
  • 文本2
  • 文本3
有序列表
  1. 文本1
  2. 文本2
  3. 文本3
#####无序列表
- 文本1
- 文本2
- 文本3
#####有序列表
1. 文本1
3. 文本2
2. 文本3

3、引用

在文字开头添加一个大鱼号加空格就行了

4、粗体和斜体

用一个 星号 包含一段文本就是斜体,用两个 星号 包含一段文本就是粗体的语法。

5、代码引用

需要引用代码时,如果引用的语句只有一段,不分行,可以用'将语句包起来。如果引用的语句为多行,可以将'''三个单引号置于这段代码的首行和末行。

'
'''

6、表格

TablesAreCool
col 3 isright-aligned$1600
col 2 iscentered$12
zebra stripesare neat$1
dogbirdcat
foofoofoo
barbarbar
bazbazbaz
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

dog | bird | cat
----|------|----
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz

7、首行缩进和tab回车

       第一行内容
第二行内容

       

 第一行内容
第二行内容

 

8、修改字体颜色

彩虹的颜色:
红 \color{#FF0000}{红} 橙 \color{#FF7D00}{橙} 黄 \color{#FF0000}{黄} 绿 \color{#00FF00}{绿} 绿 蓝 \color{#0000FF}{蓝} 靛 \color{#00FFFF}{靛} 紫 \color{#FF00FF}{紫}
对应的代码:

$\color{#FF0000}{}$ $\color{#FF7D00}{}$ $\color{#FF0000}{}$ $\color{#00FF00}{绿}$  $\color{#0000FF}{}$ $\color{#00FFFF}{}$ $\color{#FF00FF}{}$ 

$\color{#FF0000}{红}$

分别将对应的颜色名改成要更改颜色的字体就可以了。
对应的RGB颜色标号是:

红:25500 #FF0000
橙: 255,125,0 #FF7D00
黄:2552550 #FFFF00
绿:02550 #00FF00
蓝:00255 #0000FF
靛: 0,255,255 #00FFFF
紫: 255,0,255 #FF00FF

更多颜色RGB转换工具:https://www.sioe.cn/yingyong/yanse-rgb-16/

### 如何使用 `think` 标签进行 Markdown 渲染 为了实现自定义标签(如 `think` 标签)的渲染,通常需要借助一些工具库来扩展标准 Markdown 的解析能力。以下是具体的方法: #### 工具准备 要支持自定义标签的渲染,可以采用 **rehype-raw** 插件[^5]。此插件允许保留原始 HTML 节点而不被移除或转义,从而能够处理像 `<think>` 这样的自定义标签。 安装所需的依赖项如下: ```bash yarn add rehype-raw remark-rehype unified marked-highlight highlight.js github-markdown-css ``` 这些包的作用分别是: - `rehype-raw`: 支持自定义 HTML 标签。 - `remark-rehype`: 将 Markdown 转换为 HTML。 - `unified`: 提供统一接口用于处理 Markdown 和其他格式。 - `marked-highlight`, `highlight.js`: 实现代码块高亮功能。 - `github-markdown-css`: 设置 Markdown 的样式。 #### 处理流程 整个过程分为以下几个部分:加载 Markdown 数据 -> 使用 `rehype-raw` 扩展解析器 -> 定制化渲染逻辑 -> 输出最终 HTML 结果。 ##### 示例代码 下面是一个完整的示例代码片段展示如何配置并应用 `think` 标签的渲染逻辑: ```javascript import { unified } from 'unified'; import remarkParse from 'remark-parse'; import remarkRehype from 'remark-rehype'; import rehypeRaw from 'rehype-raw'; // 关键插件 import rehypeStringify from 'rehype-stringify'; // 初始化处理器链路 const processor = unified() .use(remarkParse) .use(remarkRehype, { allowDangerousHtml: true }) // 启用危险HTML选项 .use(rehypeRaw) // 添加 raw 插件以支持自定义标签 .use(rehypeStringify); // 输入包含 think 标签Markdown 文本 const inputMarkdown = ` <think> 这是我的思考内容... </think> `; processor.process(inputMarkdown).then((file) => { console.log(String(file)); // 输出最终渲染后的 HTML 字符串 }); ``` 上述代码会将 `<think>` 标签原样保留下来,并将其作为合法节点参与后续渲染阶段。 #### 自定义 CSS 样式 为了让 `<think>` 标签更直观地显示出来,可以通过为其指定特定的 CSS 类名或者直接嵌入内联样式表单。例如,在项目中引入以下样式规则即可让该区域更加醒目: ```css .think-block { border-left: 4px solid #03a9f4; background-color: #e7f8ff; padding: 1em; margin-bottom: 1em; } ``` 接着修改 JavaScript 部分中的模板字符串形式,使其自动附加此类名称: ```html <think class="think-block"> 这是我的思考内容... </think> ``` 这样就可以轻松定制外观效果了! --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rsun04551

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值