MarkDown-使用

MarkDown使用

下面将为大家介绍markdown的简单使用方法

  • Markdown 的标题
    markdown标题有两种格式,分别是 # 与 = 、- ,如下图:

    注:使用 # 号可表示 1-6 级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推。
    在这里插入图片描述
    标题格式

  • 段落
    Markdown 段落没有特殊的格式,直接编写文字就好,段落的换行是使用两个以上空格加上回车。

在这里插入图片描述

  • 分隔线
    你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:

在这里插入图片描述
在这里插入图片描述

  • 删除线
    只需要在文字的两端加上两个波浪线 ~~ 即可:
    在这里插入图片描述

  • 下划线
    下划线可以通过 HTML 的 < u > 标签来实现:

在这里插入图片描述

  • 脚注

在这里插入图片描述

  • Markdown 列表
    Markdown 支持有序列表和无序列表。
    无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记,这些标记后面要添加一个空格,然后再填写内容:
  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项

在这里插入图片描述

有序列表使用数字并加上 . 号来表示,如:

  1. 第一项
  2. 第二项
  3. 第三项

在这里插入图片描述

列表嵌套:

  1. 第一项:
    • 第一项嵌套的第一个元素
    • 第一项嵌套的第二个元素
  2. 第二项:
    • 第二项嵌套的第一个元素
    • 第二项嵌套的第二个元素

在这里插入图片描述

### 使用 markdown-it 库进行 Markdown 渲染 `markdown-it` 是一个用于解析和渲染 Markdown 的 JavaScript 库,具有高度可扩展性和灵活性。以下是关于如何使用 `markdown-it` 进行 Markdown 文件渲染的相关说明。 #### 安装 markdown-it 可以通过 npm 或者直接引入 CDN 来安装 `markdown-it`。如果是在 Node.js 环境下运行,则推荐通过 npm 安装: ```bash npm install markdown-it ``` 如果是浏览器端开发,可以直接通过 `<script>` 标签加载来自 CDN 的资源[^1]: ```html <script src="https://cdn.bootcdn.net/ajax/libs/markdown-it/13.0.2/markdown-it.min.js"></script> ``` #### 基本用法 在初始化之后,可以创建一个新的 `MarkdownIt` 实例并调用其方法来转换 Markdown 文本为 HTML。 ```javascript // 创建 markdown-it 实例 const md = window.markdownit(); // 将 Markdown 转换为 HTML const result = md.render('# Hello, world!\n\nThis is a **test**.'); console.log(result); ``` 上述代码会输出如下 HTML 字符串: ```html <h1>Hello, world!</h1> <p>This is a <strong>test</strong>.</p> ``` #### 配置选项 `markdown-it` 支持多种配置项以满足不同的需求。例如设置 HTML 插入允许与否、链接目标属性等。以下是一个带有自定义配置的例子: ```javascript const md = window.markdownit({ html: true, // 启用 HTML 标记 (默认 false) linkify: true // 自动识别 URL 和 email 地址 (默认 false) }); const result = md.render('Visit https://example.com or send an email to test@example.com'); console.log(result); ``` 此段代码将会把纯文本中的 URL 和电子邮件地址自动转化为超链接形式。 #### 扩展功能 除了基本的功能外,还可以利用插件增强 `markdown-it` 功能,比如支持表格、脚注等功能。下面是如何添加表格支持的一个例子: ```javascript // 加载 table 插件 window.markdownit.use(window.markdownitTable); // 初始化实例 const md = window.markdownit(); md.set({ breaks: true }); // 渲染带表格的 Markdown const result = md.render('| Column A | Column B |\n| --- | --- |\n| Row 1A | Row 1B |\n| Row 2A | Row 2B |'); console.log(result); ``` 这将生成一张简单的 HTML 表格。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值