# @digitalocean/do-markdownit 中文文档

规范地址：https://npmcn.com/package/%40digitalocean/do-markdownit/

版本：1\.18\.0
npm 元数据更新时间：2026-10-12T19:54:10.647Z
中文译文更新时间：2026-11-12T09:13:21.276Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40digitalocean/do-markdownit
原文对照：https://npmcn.com/package/%40digitalocean/do-markdownit/?lang=original
项目主页：https://github.com/digitalocean/do-markdownit#readme
源码仓库：https://github.com/digitalocean/do-markdownit

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：402 kB，134 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：markdown-it \>=12\.0\.0
- 首次发布：2022-03-10T20:47:17.517Z
- 最新版本发布：2026-10-12T19:54:10.464Z
- 近 30 天下载量：7290（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：38（近 12 个月 2 个）

## 中文简介

用于数字海洋社区的Markdown-It插件.

## 安装

```sh
npm install @digitalocean/do-markdownit
```

也可以使用：`pnpm add @digitalocean/do-markdownit`、`yarn add @digitalocean/do-markdownit`、`bun add @digitalocean/do-markdownit`

## README

# 做标记

用于数字海洋社区的Markdown-It插件.

这个插件是我们横跨 [数字海洋社区](https://www.digitalocean.com/community) 站点以扩展标准 具有额外功能的 Markdown 功能,例如自动代码语法加亮, 视频嵌入,还有更多.

您可以在操作中看到这个插件, 并在我们身上试用 [标记下沙盒页面](https://www.digitalocean.com/community/markdown)。 。 。 .

## 开始

安装 Markdown- It 和插件 :

```shell
npm install markdown-it @digitalocean/do-markdownit
```

提供Markdown- It 和插件的证明, 并制作一些 Markdown :

```js
const md = require('markdown-it')({}).use(require('@digitalocean/do-markdownit'), {});

md.render('# Hello, world!\n\n<$>[info]do-markdownit is loaded!<$>');
```

## 插件特性选项( O)

do-markdownit由一组单独的插件组成,如果 需要,而且许多人有可以设定的具体选项。 所有插件都是默认启用的, 除了 limit tokens .

### 突出显示

在所有Markdown上添加对突出标记的支持,包括内部代码.

文本加亮的语法是 `<^>`. e.g. (中文(简体) ). `<^>hello world<^>`。 。 。 . 此语法被作为正则内含语法对待,类似于粗体或斜体. 然而,在代码内使用时,开口和收尾标记必须在同一行上.

**示例标记下输入 :**

````
<^>test<^>

```
hello
world
<^>test<^>
```
````

**示例 HTML 输出 :**

```
<p><mark>test</mark></p>

<pre><code>hello
world
<mark>test</mark>
</code></pre>
```

**选项 :**

传递此插件的选项为 `highlight` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 用户提醒( m)

为提及用户添加支持,使用QQ符号. 将引用包入到用户的链接中.

默认情况下,任何字符在之后不是空格或新行 `@` 符号将被视为一种提及.

**示例标记下输入 :**

```
Hello @test
```

**示例 HTML 输出 :**

```
<p>Hello <a href="/users/test">@test</a></p>
```

**选项 :**

传递此插件的选项为 `user_mention` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `pattern` (单位:千美元)`RexExp`,可选: 匹配用户引用的图案, 应用到字符串后 `@` 符号.
-   `path` (单位:千美元)`function(string): string`,可选):用于获取用户引用的 URL 路径的函数.

### html 评论

从Markdown中删除所有 HTML 注释.

这把 HTML 注释当作Markdown 语法,所以期望它们要么是内置的,要么是完整的块. 从内线开始然后跨出块的注释将不会被删除 .

默认情况下,去除是松散的,这意味着它不需要明确找到一个注释的结尾来去除. 如果没有找到收尾标记,则假定行尾或块. 此行为可被禁用 `strict` 设置,需要查找注释的结尾.

**示例标记下输入 :**

```
Hello <!-- comment --> world
```

**示例 HTML 输出 :**

```
<p>Hello  world</p>
```

**选项 :**

传递此插件的选项为 `html_comment` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `strict` (单位:千美元)`boolean`默认为 `false`:如果必须明确找到评论的结尾.

### 图像标题( c)

将有标题文本的 Singleton 图像包装在图中,并附带已渲染的标题 .

**示例标记下输入 :**

```
![alt text](test.png "title text")

![alt text](test.png "title text _with Markdown_")
```

**示例 HTML 输出 :**

```
<figure><img src="test.png" alt="alt text"><figcaption>title text</figcaption></figure>

<figure><img src="test.png" alt="alt text"><figcaption>title text <em>with Markdown</em></figcaption></figure>
```

**选项 :**

传递此插件的选项为 `image_caption` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 表格

在Markdown " tables " 周围添加包装元素,以更好地控制溢出.

没有添加新的语法 。 这只把正常的Markdown包起来 `| a |` 带有a的表格 `div` 默认 类别 `table-wrapper`。 。 。 .

**示例标记下输入 :**

```
| a |
|---|
```

**示例 HTML 输出 :**

```
<div class="table-wrapper">
    <table>
        <thead>
            <tr>
                <th>a</th>
            </tr>
        </thead>
    </table>
</div>
```

**选项 :**

传递此插件的选项为 `table_wrapper` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `className` (单位:千美元)`string`默认为 `'table-wrapper'`: 用于桌子包装的类.

### 可折叠( h)

将特定标题围成详细标签, 使内容相容

如果提供一系列标题标签,则所有这些标签和相关内容都将被包裹在一个细节标签中,以标题为摘要.

支持嵌入多段相撞的相接部分.

**示例标记下输入 :**

```
# H1 header
Test row
```

**示例 HTML 输出 :**

```
<details class="collapsible">
    <summary>
        <h1>H1 header</h1>
    </summary>
    <p>Test row</p>
</details>
```

**选项 :**

传递此插件的选项为 `collapsible_heading` 财产的财产 `do-markdownit` 插件选项 . 此插件默认已禁用, 通过一个对象来启用 .

-   `levels` (单位:千美元)`number[]`默认为 `[ 1, 2, 3, 4, 5, 6 ]`: 要包装的标题标签列表( 前 : `2`) (中文(简体) ).
-   `open` (单位:千美元)`boolean`默认为 `true`:旗子表示所包裹的部分是否默认应当被扩展.
-   `className` (单位:千美元)`string`默认为 `'collapsible'`: 在已倒塌的部分中使用的类名.

### 点名

添加对调用嵌入于Markdown中的支持, 作为块语法 .

基本语法是 `<$>[<class>]<text><$>`. e.g. (中文(简体) ). `<$>[hello]world<$>`。 。 。 . 课会必须放在方括号内 开课后必须马上来 `<$>`。 。 。 . 文本中允许有新行,其他的Markdown语法(区块和内行)也是如此.

Callouts也可以在其中设置标签. 标签应采用格式 `[label <text>]`。 。 。 . 标签必须在打开后的第一个新线上 `<$>`。 。 。 . 标签不能包含任何新行,但会支持内置的Markdown语法.

**示例标记下输入 :**

```
<$>[info]
test
<$>

<$>[info]
[label hello]
world
<$>
```

**示例 HTML 输出 :**

```
<div class="callout info">
<p>test</p>
</div>

<div class="callout info">
<p class="callout-label">hello</p>
<p>world</p>
</div>
```

**选项 :**

传递此插件的选项为 `callout` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `allowedClasses` (单位:千美元)`string[]`,可选: 允许的大小写敏感类列表 。 如果不是数组,则允许所有类.
-   `extraClasses` (单位:千美元)`string[]`默认为 `['callout']`: 附加类列表,与给定的类一起申请到一个叫号div.
-   `labelClass` (单位:千美元)`string`默认为 `'callout-label'`: 分类用于标签.

### rsvp 按钮

在 Markdown 中添加对 RSVP 按钮的支持,作为内置语法.

基本语法是 `[rsvp_button <marketo id>]`. e.g. (中文(简体) ). `[rsvp_button 12345]`。 。 。 . 可选的是,可以在id后双引号中为按钮设置标题. 举个例子. `[rsvp_button 12345 "My Button"]`。 。 。 . 按钮标题限制为50个字符,可以包含空格.

按钮默认已禁用, 并且没有任何事件听众 . 完成后,您应该绑定自己的事件听众并启用按钮.

您可以通过查找 DOM 中的所有按钮 `data-js` 设置为属性 `rsvp-button`。 。 。 . 市场形式 将设定为 `data-form-id` 属性.

**示例标记下输入 :**

```
[rsvp_button 12345 "button title"]
```

**示例 HTML 输出 :**

```
<p><button data-js="rsvp-button" data-form-id="12345" disabled="disabled" class="rsvp">button title</button></p>
```

**选项 :**

传递此插件的选项为 `rsvp_button` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `className` (单位:千美元)`string`默认为 `'rsvp'`: 用于按钮的类.

### 终端按钮

在Markdown中添加终端按钮的支持,作为块语法.

基本语法是 `[terminal <image name>]`. e.g. (中文(简体) ). `[terminal ubuntu:focal]`。 。 。 . 在图像名称后可以提供可选按钮标题. 举个例子. `[terminal ubuntu:focal Start Terminal]`。 。 。 .

按钮默认已禁用, 并且没有任何事件听众 . 完成后,您应该绑定自己的事件听众并启用按钮.

您可以通过查找 DOM 中的所有按钮 `data-js` 设置为属性 `terminal`。 。 。 . 图像名称将设定为 `data-docker-image` 属性.

**示例标记下输入 :**

```
[terminal ubuntu:focal button title]
```

**示例 HTML 输出 :**

```
<button data-js="terminal" data-docker-image="ubuntu:focal" disabled="disabled" class="terminal">
    button title
</button>
```

**选项 :**

传递此插件的选项为 `terminal_button` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 栏

添加对 Markdown 中的列的支持, 作为块语法 .

要声明一栏,请用 `[column` 在电话之前,和 `]` 在最后一条新线. 两列或多列必须相接相接才能被解析为一组列.

**示例标记下输入 :**

```
[column
Content for the first column
]
[column
Content for the second column
]
```

**示例 HTML 输出 :**

```
<div class="columns">
<div class="column">
<p>Content for the first column</p>
</div>
<div class="column">
<p>Content for the second column</p>
</div>
</div>
```

**选项 :**

传递此插件的选项为 `columns` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `outerClassName` (单位:千美元)`string`默认为 `'columns'`: 用于外列容器的类.
-   `innerClassName` (单位:千美元)`string`默认为 `'column'`: 用于内柱容器的类.

### 细节

在Markdown中添加对可扩展细节的支持,作为块语法.

要创建可扩展的细节部分, 请使用 `[details` 然后是总结. 扩充部分的内容应先行提供,后行结束 `]` 在一条新线.

**示例标记下输入 :**

```
[details This is hidden content
Content for inside the expanded section
]

[details open This section is *open* by default
Content for inside the expanded section
]
```

**示例 HTML 输出 :**

```
<details>
<summary>This is hidden content</summary>
<p>Content for inside the expanded section</p>
</details>

<details open>
<summary>This section is <em>open</em> by default</summary>
<p>Content for inside the expanded section</p>
</details>
```

**选项 :**

传递此插件的选项为 `details` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 阴影

添加对支持 [阴影](https://www.digitalocean.com/community/tools/glob) 嵌入于Markdown,作为块语法.

基本语法是 `[glob <pattern> <strings>]`. e.g. (中文(简体) ). `[glob *.js a.js b.js c.css]`。 。 。 . 在图案后,可以单行提供字符串,也可以由新行分别提供. 如果包含一条新线,则将整条一行视为图案,包括任何空格.

**示例标记下输入 :**

```
[glob *.js /]

[glob * test.js
/a
/b]
```

**示例 HTML 输出 :**

```
<div class="tool-embed" data-glob-tool-embed data-glob-string="*.js" data-glob-test-0="/">
    <a href="https://www.digitalocean.com/community/tools/glob?glob=*.js&tests=%2F" target="_blank">
        Explore <code>*.js</code> as a glob string in our glob testing tool
    </a>
</div>

<div class="tool-embed" data-glob-tool-embed data-glob-string="* test.js" data-glob-test-0="/a" data-glob-test-1="/b">
    <a href="https://www.digitalocean.com/community/tools/glob?glob=*+test.js&tests=%2Fa&tests=%2Fb" target="_blank">
        Explore <code>* test.js</code> as a glob string in our glob testing tool
    </a>
</div>
<script async defer src="https://do-community.github.io/glob-tool-embed/bundle.js" type="text/javascript" onload="window.GlobToolEmbeds()"></script>
```

**选项 :**

传递此插件的选项为 `glob` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 数字

添加对支持 [DNS 查询](https://www.digitalocean.com/community/tools/dns) 嵌入于Markdown,作为块语法.

基本语法是 `[dns <domain>]`. e.g. (中文(简体) ). `[dns digitalocean.com]`。 。 。 . 在域后,可以添加一个或多个空间分隔的DNS记录类型. 默认类型是 `A`。 。 。 .

**示例标记下输入 :**

```
[dns digitalocean.com]

[dns digitalocean.com A AAAA]
```

**示例 HTML 输出 :**

```
<div class="tool-embed" data-dns-tool-embed data-dns-domain="digitalocean.com" data-dns-types="A">
    <a href="https://www.digitalocean.com/community/tools/dns?domain=digitalocean.com" target="_blank">
        Perform a full DNS lookup for digitalocean.com
    </a>
</div>

<div class="tool-embed" data-dns-tool-embed data-dns-domain="digitalocean.com" data-dns-types="A,AAAA">
    <a href="https://www.digitalocean.com/community/tools/dns?domain=digitalocean.com" target="_blank">
        Perform a full DNS lookup for digitalocean.com
    </a>
</div>
<script async defer src="https://do-community.github.io/dns-tool-embed/bundle.js" type="text/javascript" onload="window.DNSToolEmbeds()"></script>
```

**选项 :**

传递此插件的选项为 `dns` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 剖腹产

添加对支持 [阿西诺玛](http://asciinema.org/) 嵌入于Markdown,作为块语法.

基本语法是 `[asciinema <id>]`. e.g. (中文(简体) ). `[asciinema 325730]`。 。 。 . 可选择使用 `[asciinema <id> [cols] [rows]]`. e.g. (中文(简体) ). `[asciinema 325730 100 50]`。 。 。 . Cols的默认值为80,而行为24.

**示例标记下输入 :**

```
[asciinema 325730]
```

**示例 HTML 输出 :**

```
<script src="https://asciinema.org/a/325730.js" id="asciicast-325730" async data-cols="80" data-rows="24"></script>
<noscript>
    <a href="https://asciinema.org/a/325730" target="_blank">View asciinema recording</a>
</noscript>
```

**选项 :**

传递此插件的选项为 `asciinema` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 代码

添加对支持 [代码Pen](https://codepen.io/) 嵌入于Markdown,作为块语法.

基本语法是 `[codepen <user> <hash>]`. e.g. (中文(简体) ). `[codepen AlbertFeynman gjpgjN]`。 。 。 . 在用户和散列后,可以添加各种相隔空间的旗帜(以任意组合/顺序):

-   添加 `lazy` 设置 CodePen 嵌入到用户与之互动之前不运行.
-   添加 `light` 或者说 `dark` 设置 CodePen 嵌入主题(默认为 `light`) (中文(简体) ).
-   添加 `html`, (中文(简体) ), `css`,或 `js` 设置嵌入的 CodePen 默认标签.
-   添加 `result` 设置 CodePen 嵌入到结果标签(默认,可与其他标签合并).
-   添加 `editable` 设置代码Pen嵌入以允许代码被编辑(需要嵌入的用户为Pro).
-   添加任意一组数字设置嵌入层的高度(以像素计).

如果选中两个或多个标签( 不包括 `result`, (中文(简体) ), `html` 将优先,然后 `css`,则 `js`。 。 。 . 如果 `result` 选项卡被选中,可以与其他标签合并生成分页视图.

如果两者兼有 `light` 财务报告和审定财务报表 `dark` 被选中, `dark` 将更倾向于.

**示例标记下输入 :**

```
[codepen AlbertFeynman gjpgjN]

[codepen AlbertFeynman gjpgjN lazy dark 512 html]
```

**示例 HTML 输出 :**

```
<p class="codepen" data-height="256" data-theme-id="light" data-default-tab="result" data-user="AlbertFeynman" data-slug-hash="gjpgjN" style="height: 256px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
    <span>See the Pen <a href="https://codepen.io/AlbertFeynman/pen/gjpgjN">gjpgjN by AlbertFeynman</a> (<a href="https://codepen.io/AlbertFeynman">@AlbertFeynman</a>) on <a href='https://codepen.io'>CodePen</a>.</span>
</p>

<p class="codepen" data-height="512" data-theme-id="dark" data-default-tab="html" data-user="AlbertFeynman" data-slug-hash="gjpgjN" data-preview="true" style="height: 512px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
    <span>See the Pen <a href="https://codepen.io/AlbertFeynman/pen/gjpgjN">gjpgjN by AlbertFeynman</a> (<a href="https://codepen.io/AlbertFeynman">@AlbertFeynman</a>) on <a href='https://codepen.io'>CodePen</a>.</span>
</p>
<script async defer src="https://static.codepen.io/assets/embed/ei.js" type="text/javascript"></script>
```

**选项 :**

传递此插件的选项为 `codepen` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 错误

添加对支持 [滑动](https://glitch.com/) 嵌入于Markdown,作为块语法.

基本语法是 `[glitch <slug>]`. e.g. (中文(简体) ). `[glitch hello-digitalocean]`。 。 。 . 在弹出后,可以添加一些空间分隔的旗帜(以任意组合/顺序):

-   添加 `noattr` 告诉 Glitch 不显示项目的作者.
-   添加 `code` 设置 Gliitch 嵌入以默认显示工程代码.
-   添加 `notree` 设置 Glitch 嵌入以默认崩溃文件树.
-   添加 `path=` 之后是设置 Gliitch 嵌入以默认显示特定文件的文件路径 .
-   添加 `highlights=` 之后是一条以逗号分隔的行号列表,以告诉格利奇去突出这些行.
-   添加任意一组数字设置嵌入层的高度(以像素计).

**示例标记下输入 :**

```
[glitch hello-digitalocean]

[glitch hello-digitalocean code 512 notree path=src/app.jsx]
```

**示例 HTML 输出 :**

```
<div class="glitch-embed-wrap" style="height: 256px; width: 100%;">
    <iframe src="https://glitch.com/embed/#!/embed/hello-digitalocean?previewSize=100" title="hello-digitalocean on Glitch" allow="geolocation; microphone; camera; midi; encrypted-media; xr-spatial-tracking; fullscreen" allowFullScreen style="height: 100%; width: 100%; border: 0;">
        <a href="https://glitch.com/edit/#!/hello-digitalocean" target="_blank">View hello-digitalocean on Glitch</a>
    </iframe>
</div>

<div class="glitch-embed-wrap" style="height: 512px; width: 100%;">
    <iframe src="https://glitch.com/embed/#!/embed/hello-digitalocean?previewSize=0&sidebarCollapsed=true&path=src%2Fapp.jsx" title="hello-digitalocean on Glitch" allow="geolocation; microphone; camera; midi; encrypted-media; xr-spatial-tracking; fullscreen" allowFullScreen style="height: 100%; width: 100%; border: 0;">
        <a href="https://glitch.com/edit/#!/hello-digitalocean" target="_blank">View hello-digitalocean on Glitch</a>
    </iframe>
</div>
```

**选项 :**

传递此插件的选项为 `glitch` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 动画

添加对支持 [罐头用](https://caniuse.com/) 嵌入于Markdown,作为块语法.

用途 [https://caniuse.bitsofco.de/ (英语)](https://caniuse.bitsofco.de/) 以提供来自 CanIUse 数据的交互式嵌入.

基本语法是 `[caniuse <feature>]`. e.g. (中文(简体) ). `[caniuse css-grid]`。 。 。 . 在弹出后,可以添加一些空间分隔的旗帜(以任意组合/顺序):

-   添加 `past=` 之后是数字来控制要包含多少之前的浏览器版本(默认是 1, 支持 0-5) .
-   添加 `future=` 之后是数字来控制要包含多少之前的浏览器版本(默认为 1, 支持 0-3) .
-   添加 `accessible` 设置用于 CanIUs 嵌入的默认颜色方案,使之成为可用的颜色.

**示例标记下输入 :**

```
[caniuse css-grid]

[caniuse css-grid past=5 future=3 accessible]
```

**示例 HTML 输出 :**

```
<p class="ciu_embed" data-feature="css-grid" data-periods="future_1,current,past_1" data-accessible-colours="false">
    <picture>
        <source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-grid.webp" />
        <source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-grid.png" />
        <img src="https://caniuse.bitsofco.de/image/css-grid.jpg" alt="Data on support for the css-grid feature across the major browsers from caniuse.com" />
    </picture>
</p>

<p class="ciu_embed" data-periods="future_3,future_2,future_1,current,past_1,past_2,past_3,past_4,past_5" data-accessible-colours="true">
    <picture>
        <source type="image/webp" srcset="https://caniuse.bitsofco.de/image/ambient-light.webp" />
        <source type="image/png" srcset="https://caniuse.bitsofco.de/image/ambient-light.png" />
        <img src="https://caniuse.bitsofco.de/image/ambient-light.jpg" alt="Data on support for the ambient-light feature across the major browsers from caniuse.com" />
    </picture>
</p>
<script async defer src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed@v1.3.0/public/caniuse-embed.min.js" type="text/javascript"></script>
```

**选项 :**

传递此插件的选项为 `caniuse` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 区域

添加对支持 [YouTube (英语)](http://youtube.com/) 嵌入于Markdown,作为块语法.

基本语法是 `[youtube <id>]`. e.g. (中文(简体) ). `[youtube iom_nhYQIYk]`。 。 。 . 高度和宽度可以选择使用 `[youtube <id> [height] [width]]`. e.g. (中文(简体) ). `[youtube iom_nhYQIYk 380 560]`。 。 。 . 高度的默认值为270,宽度为480.

**示例标记下输入 :**

```
[youtube iom_nhYQIYk]
```

**示例 HTML 输出 :**

```
<iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="270" width="480" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
    <a href="https://www.youtube.com/watch?v=iom_nhYQIYk" target="_blank">View YouTube video</a>
</iframe>
```

**选项 :**

传递此插件的选项为 `youtube` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 阴道

添加对支持 [维斯蒂亚](https://wistia.com/) 嵌入于Markdown,作为块语法.

基本语法是 `[wistia <id>]`. e.g. (中文(简体) ). `[wistia 7ld71zbvi6]`。 。 。 . 高度和宽度可以选择使用 `[wistia <id> [height] [width]]`. e.g. (中文(简体) ). `[wistia 7ld71zbvi6 380 560]`。 。 。 . 高度的默认值为270,宽度为480.

**示例标记下输入 :**

```
[wistia 7ld71zbvi6]
```

**示例 HTML 输出 :**

```
<iframe src="http://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="270" width="480" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
    <a href="http://fast.wistia.net/embed/iframe/7ld71zbvi6" target="_blank">View Wistia video</a>
</iframe>
```

**选项 :**

传递此插件的选项为 `wistia` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 维米奥

添加对支持 [维莫](https://vimeo.com/) 嵌入于Markdown,作为块语法.

基本语法是 `[vimeo <url>]`. e.g. (中文(简体) ). `[vimeo https://player.vimeo.com/video/329272793]`。 。 。 . 高度和宽度可以选择使用 `[vimeo <url> [height] [width]]`. e.g. (中文(简体) ). `[vimeo https://player.vimeo.com/video/329272793 380 560]`。 。 。 . 高度的默认值为270,宽度为480.

**示例标记下输入 :**

```
[vimeo https://player.vimeo.com/video/329272793]
```

**示例 HTML 输出 :**

```
<iframe src="https://player.vimeo.com/video/329272793" class="vimeo" height="270" width="480" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen>
    <a href="https://player.vimeo.com/video/329272793" target="_blank">View vimeo video</a>
</iframe>
```

**选项 :**

传递此插件的选项为 `vimeo` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 推特上说

添加对支持 [页:1](https://twitter.com/) 嵌入于Markdown,作为块语法.

基本语法是 `[twitter <tweet>]`。 。 。 . 举个例子. `[twitter https://twitter.com/MattIPv4/status/1576415168426573825]`。 。 。 . 输入可以使用其中之一 `twitter.com` 或者说 `x.com` 选项. 在微博后,可以添加各种相隔空间的旗帜(任何组合/顺序):

-   添加 `light` 或者说 `dark` 设置纸牌主题(默认为 `light`) (中文(简体) ).
-   添加 `left`, (中文(简体) ), `center`,或 `right` 设置嵌入式对齐(默认为 `left`) (中文(简体) ).
-   添加任意一组位数来设置嵌入体的宽度(以像素表示,在250到550之间,默认为550).

如果选择两个或多个对齐, `left` 将优先,然后 `center`,则 `right`。 。 。 .

如果两者兼有 `light` 财务报告和审定财务报表 `dark` 被选中, `dark` 将更倾向于.

如果选择250-550范围之外的宽度,将使用被夹住的值.

**示例标记下输入 :**

```
[twitter https://twitter.com/MattIPv4/status/1576415168426573825]

[twitter https://x.com/MattIPv4/status/1576415168426573825 left 400 dark]
```

**示例 HTML 输出 :**

```
<div class="twitter">
    <blockquote class="twitter-tweet" data-dnt="true" data-width="550" data-theme="light">
        <a href="https://twitter.com/MattIPv4/status/1576415168426573825">View tweet by @MattIPv4</a>
    </blockquote>
</div>

<div class="twitter" align="left">
    <blockquote class="twitter-tweet" data-dnt="true" data-width="400" data-theme="dark">
        <a href="https://twitter.com/MattIPv4/status/1576415168426573825">View tweet by @MattIPv4</a>
    </blockquote>
</div>
<script async defer src="https://platform.twitter.com/widgets.js" type="text/javascript"></script>
```

**选项 :**

传递此插件的选项为 `twitter` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 内存

添加对支持 [内存](https://instagram.com/) 嵌入于Markdown,作为块语法.

基本语法是 `[instagram <post>]`. e.g. (中文(简体) ). `[instagram https://www.instagram.com/p/CkQuv3_LRgS]`。 。 。 . 贴出后,可以添加各种相隔空间的旗帜(以任意组合/顺序):

-   添加 `caption` 在帖子下加入标题.
-   添加 `left`, (中文(简体) ), `center`,或 `right` 设置嵌入式对齐(默认为 `left`) (中文(简体) ).
-   添加任意一组位数来设置嵌入层的宽度(以像素表示,在326到550之间,默认为由Instagram的嵌入层.js所设定的326).

如果选择两个或多个对齐, `left` 将优先,然后 `center`,则 `right`。 。 。 .

如果选择了326-550范围之外的宽度,将使用被夹住的值.

**示例标记下输入 :**

```
[instagram https://www.instagram.com/p/CkQuv3_LRgS]

[instagram https://www.instagram.com/p/CkQuv3_LRgS left caption 400]
```

**示例 HTML 输出 :**

```
<div class="instagram">
    <blockquote class="instagram-media"
        data-instgrm-permalink="https://www.instagram.com/p/CkQuv3_LRgS"
        data-instgrm-version="14">
            <a href="https://instagram.com/p/CkQuv3_LRgS">View post</a>
    </blockquote>
</div>

<div class="instagram" align="left">
    <blockquote class="instagram-media"
        style="width: 400px;"
        data-instgrm-permalink="https://www.instagram.com/p/CkQuv3_LRgS"
        data-instgrm-version="14"
        data-instgrm-captioned>
            <a href="https://instagram.com/p/CkQuv3_LRgS">View post</a>
    </blockquote>
</div>
<script async defer src="https://www.instagram.com/embed.js" type="text/javascript" onload="window.instgrm && window.instgrm.Embeds.process()"></script>
```

**选项 :**

传递此插件的选项为 `instagram` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 幻灯片放映

在 Markdown 中添加对幻灯片放映的支持, 作为块语法 .

基本语法是 `[slideshow <url1> <url2> <...urls>]`例如, `[slideshow https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png https://assets.digitalocean.com/banners/nodejs.png]`。 。 。 . 高度和宽度可以选择使用 `[slideshow <url1> <url2> <...urls> [height] [width]]`例如, `[slideshow https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png https://assets.digitalocean.com/banners/nodejs.png 380 560]`。 。 。 . 高度的默认值为270,宽度为480.

**示例标记下输入 :**

```
[slideshow https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png https://assets.digitalocean.com/banners/nodejs.png]
```

**示例 HTML 输出 :**

```
<div class="slideshow" style="height: 270px; width: 480px;">
    <div class="action left" onclick="(() => this.parentNode.getElementsByClassName('slides')[0].scrollLeft -= 480)()">&#8249;</div>
    <div class="action right" onclick="(() => this.parentNode.getElementsByClassName('slides')[0].scrollLeft += 480)()">&#8250;</div>
    <div class="slides"><img src="https://assets.digitalocean.com/banners/python.png" alt="Slide #1" /><img src="https://assets.digitalocean.com/banners/javascript.png" alt="Slide #2" /><img src="https://assets.digitalocean.com/banners/nodejs.png" alt="Slide #3" /></div>
</div>
```

**选项 :**

传递此插件的选项为 `slideshow` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 比较

在Markdown中添加对图像比较的支持,作为块语法.

基本语法是 `[compare <url1> <url2>]`例如, `[compare https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png]`。 。 。 . 高度和宽度可以选择使用 `[compare <url1> <url2> [height] [width]]`例如, `[compare https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png 500 560]`。 。 。 . 高度的默认值为270,宽度为480.

**示例标记下输入 :**

```
[compare https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png]
```

**示例 HTML 输出 :**

```
<div class="image-compare" style="--value:50%; height: 270px; width: 480px;">
    <img class="image-left" src="https://assets.digitalocean.com/banners/python.png" alt="Image left"/>
    <img class="image-right" src="https://assets.digitalocean.com/banners/javascript.png" alt="Image right"/>
    <input type="range" class="control" min="0" max="100" value="50" oninput="this.parentNode.style.setProperty('--value', `${this.value}%`)" />
    <svg class="control-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504.3 273.6c4.9-4.5 7.7-10.9 7.7-17.6s-2.8-13-7.7-17.6l-112-104c-7-6.5-17.2-8.2-25.9-4.4s-14.4 12.5-14.4 22l0 56-192 0 0-56c0-9.5-5.7-18.2-14.4-22s-18.9-2.1-25.9 4.4l-112 104C2.8 243 0 249.3 0 256s2.8 13 7.7 17.6l112 104c7 6.5 17.2 8.2 25.9 4.4s14.4-12.5 14.4-22l0-56 192 0 0 56c0 9.5 5.7 18.2 14.4 22s18.9 2.1 25.9-4.4l112-104z"/></svg>
</div>
```

**选项 :**

传递此插件的选项为 `compare` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 下划线

在所有Markdown上添加下划线标记的支持 .

下划线文本的语法是 `__`. e.g. (中文(简体) ). `__hello world__`。 。 。 . 这取代了语法的默认行为,该语法是粗体. 此语法被作为正则内含语法对待,类似于粗体或斜体.

**示例标记下输入 :**

```
__test__
```

**示例 HTML 输出 :**

```
<p><u>test</u></p>
```

**选项 :**

传递此插件的选项为 `underline` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 栅栏 标签

在栅栏开始时添加标签标记支持, 如果有工具栏或标签定义, 则在栅栏前翻译为标签 diiv .

标记必须在栅栏起步处,不过在标记之前可以使用方括号进行其他元数据标记.

**示例标记下输入 :**

````
```
[label test]
hello
world
```
````

**示例 HTML 输出 :**

```
<div class="code-label" title="test">test</div>
<pre><code>hello
world
</code></pre>
```

**选项 :**

传递此插件的选项为 `fence_label` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `className` (单位:千美元)`string`默认为 `'code-label'`: 标签div中使用的类名.

### 栅栏 二级 标签

在栅栏起始处添加辅助标签标记支持,被翻译为栅栏内分出标签.

标记必须在栅栏起步处,不过在标记之前可以使用方括号进行其他元数据标记.

**示例标记下输入 :**

````
```
[secondary_label test]
hello
world
```
````

**示例 HTML 输出 :**

```
<pre><code><div class="secondary-code-label" title="test">test</div>hello
world
</code></pre>
```

**选项 :**

传递此插件的选项为 `fence_secondary_label` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `className` (单位:千美元)`string`默认为 `'secondary-code-label'`: 标签div中使用的类名.

### 栅栏 环境

在栅栏开始时添加对环境标记的支持,翻译为类.

标记必须在栅栏起步处,不过在标记之前可以使用方括号进行其他元数据标记.

**示例标记下输入 :**

````
```
[environment test]
hello
world
```
````

**示例 HTML 输出 :**

```
<pre><code class="environment-test">hello
world
</code></pre>
```

**选项 :**

传递此插件的选项为 `fence_environment` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `allowedEnvironments` (单位:千美元)`string[]`,可选):允许的大小写敏感环境列表. 如果不是数组,则允许所有环境 .
-   `extraClasses` (单位:千美元)`string`默认为 `''`: 使用环境时要设置的额外类的字符串.

### 栅栏( p)

添加对栅栏编码块上每行设置前缀的支持 .

前缀被设定为打开后立即提供的"info"的一部分.

自定义前缀可以设置为:

-   在信息中添加"行 数字"旗. 这将设定每行的前缀为递增行号.
    
-   将“ 命令” 旗添加到信息中 . 这将设定每行的前缀为"$"字符. 这也会将"bash"旗添加到信息中,用于语言突出化.
    
-   在信息中添加“ 超级用户” 旗帜 . 这将设定每行的前缀为"#"字符. 这也会将"bash"旗添加到信息中,用于语言突出化.
    
-   在信息中添加“ custom prefix ()” 旗帜 . `<prefix>` 可以是不包含空格的任何字符串。 使用 `\s` 以表示空格. 这也会将"bash"旗添加到信息中,用于语言突出化.
    

**示例标记下输入 :**

````
```custom_prefix(test)
hello
world
```
````

**示例 HTML 输出 :**

```
<pre><code class="prefixed custom_prefix language-bash"><ol><li data-prefix="test">hello
</li><li data-prefix="test">world
</li></ol>
</code></pre>
```

**选项 :**

传递此插件的选项为 `fence_prefix` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `delimiter` (单位:千美元)`string`默认为 `','`: 弦来分栏信息.

### 边框( p)

将所有属性从栅栏码块的开口“代码”标记移到“预先”标记.

**示例标记下输入 :**

````
```js
hello
world
```
````

**示例 HTML 输出 :**

```
<pre class="language-js"><code>hello
world
</code></pre>
```

**选项 :**

传递此插件的选项为 `fence_pre_attrs` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

_此插件没有可用的选项 ._

### 栅栏( c)

在栅栏中过滤代码上的分类和预标记.

**示例标记下输入 :**

````
```test
hello
world
```

```bad
hello
world
```
````

**示例 HTML 输出 :**

```
<pre><code class="language-test">hello
world
</code></pre>

<pre><code class="">hello
world
</code></pre>
```

**选项 :**

传递此插件的选项为 `fence_classes` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `allowedClasses` (单位:千美元)`string[]`,可选: 允许的大小写敏感类列表 。 如果不是数组,则允许所有类.

### 标题( d)

对所有已提供的标题应用 ID 并生成一系列标题 .

标题在通过下列途径渲染后可供查阅: `md.headings`。 。 。 . 数组中的每个项目都是具有以下属性的对象:

-   `slug`:给标题的"弹簧"(例如. `my-heading`) (中文(简体) ).
-   `content`:标题的原始Markdown内容(例如. `My **Heading**`) (中文(简体) ).
-   `text`:标题的平面文字内容(如. `My Heading`) (中文(简体) ).
-   `rendered`: 标题已渲染出 HTML 内容( 如 . `My <strong>Heading</strong>`) (中文(简体) ).
-   `level`:标题级别(如. `1`) (中文(简体) ).

**示例标记下输入 :**

```
# Hello World!
```

**示例 HTML 输出 :**

```
<h1 id="hello-world"><a class="hash-anchor" href="#hello-world" aria-hidden="true"></a>Hello World!</h1>
```

**选项 :**

传递此插件的选项为 `heading_id` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `sluggify` (单位:千美元)`function(string): string`,可选):自定义函数将标题内容转换为 sattle Id.
-   `hashLink` 设定此属性为 `false` 以禁用此特性.
    -   `maxLevel` (单位:千美元)`number`默认为 `3`: 最大标题级别生成散列链接用于.
    -   `class` (单位:千美元)`string`默认为 `hash-anchor`:在锚标签上使用的类名.
    -   `position` (单位:千美元)`'before'|'after'`默认为 `before`:锚标记相对于标题的位置.
    -   `linkHeading` (单位:千美元)`boolean`默认为 `true`:是否将标题文本与散列链接链接.
    -   `clipboard` (单位:千美元)`boolean`默认为 `true`: 是否点击时将散列链接写入剪贴板 .

### 图像设置( s)

添加对图像上定义设置的支持, 如大小和对齐 .

这的语法是 `{ width=<width> height=<height> align=<alignment> }`,在图像标记的末尾. 举个例子. `![alt](test.png "title"){ width=100 height=200 align=left }`。 。 。 . 所有设置都是可选的,命令无关紧要.

默认情况下,宽度和高度可以是平数(`100`),像素(`100px`)或百分比(百分比)`100%`) (中文(简体) ). 其他单位可以通过通过 `sizeUnits` 选项.

对齐可以不设,这样可以将图像居中,也可以设置到其中之一 `left` 或者说 `right`。 。 。 .

**示例标记下输入 :**

```
![alt](test.png "title"){ width=100 height=200 align=left }
```

**示例 HTML 输出 :**

```
<p><img src="test.png" alt="alt" title="title" width="100" height="200" align="left"></p>
```

**选项 :**

传递此插件的选项为 `image_settings` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `sizeUnits` (单位:千美元)`string[]`默认为 `['', 'px', '%']`:允许图像大小单位.

### 链接属性( a)

在 Markdown 内容中对所有链接应用自定义属性 .

如果提供了对象,则所提供的属性会与已存在的属性合并.

如果提供了一个函数,现有的属性会传递给它, 并用返回值替换(未合并)现有属性.

**选项 :**

传递此插件的选项为 `link_attributes` 财产的财产 `do-markdownit` 插件选项 . 此插件默认已禁用, 通过一个对象来启用 .

-   `attributes` (单位:千美元)`Object<string, string>|function(Object<string, string>): Object<string, string>`: 用于生成链接属性的对象或函数.

### 棱镜

将 PrismJS 语法加亮应用到有栅栏的代码块上,基于栅栏信息中的语言设置.

这加载自定义的 PrismJS 插件,以确保代码块内任何已存在的 HTML 标记都保留下来 . 此插件类似于默认 `keep-markup` 插件,但在非浏览环境中工作.

**示例标记下输入 :**

````
```nginx
server {
    try_files test =404;
}
```
````

**示例 HTML 输出 :**

```
<pre class="language-nginx"><code class="language-nginx"><span class="token directive"><span class="token keyword">server</span></span> <span class="token punctuation">{</span>
    <span class="token directive"><span class="token keyword">try_files</span> test =404</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
```

**选项 :**

传递此插件的选项为 `prismjs` 财产的财产 `do-markdownit` 插件选项 . 设定此属性为 `false` 以禁用此插件.

-   `delimiter` (单位:千美元)`string`默认为 `','`: 弦来分栏信息.
-   `logging` (单位:千美元)`boolean`默认为 `false`: 是否将错误记录到控制台 .

### 限制( t)

在符号流中过滤并转换符号.

**选项 :**

传递此插件的选项为 `limit_tokens` 财产的财产 `do-markdownit` 插件选项 . 此插件默认已禁用, 通过一个对象来启用 .

-   `allowedTokens` (单位:千美元)`string[]`: Markdown 符号列表,该列表应当渲染
-   `transformTokens` (单位:千美元)`Object<string, function(Token): Token>`: 键为Markdown符号而应该被转换的对象. 转换是基于预期一个函数的值 [标记下符号](https://markdown-it.github.io/markdown-it/#Token) 作为一个参数 并返回已变换的标志.

## 棱镜JS

除了这个插件是Markdown-It外,我们还将PrismJS的修改版作为组成部分 包件的包装和修改,避免污染全球或窗口 带有棱镜实例的镜框。 相反,Prism 的每个插件或组件都会被调用 a 棱镜实例转给它.

```js
const Prism = require('@digitalocean/do-markdownit/vendor/prismjs');

require('@digitalocean/do-markdownit/vendor/prismjs/plugins/toolbar/prism-toolbar')(Prism);
require('@digitalocean/do-markdownit/vendor/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard')(Prism);

Prism.highlightAll();
```

### 减少捆绑大小

棱镜JS是一个大型图书馆,包含一个 _数量_ 语文定义。 默认情况下,我们使用 动态需要允许加载任何语言用于棱晶的语句. 对于捆绑者来说 Webpack,这将产生一个非常大块 包含所有可能的 可使用的语言 -- -- 这些语言都将是一块块,因为它们需要消耗 在插件中同步, 因此无法进行动态同步导入 .

为了减小生成的捆绑的大小,您不妨限制什么语言定义 包含。 您可以通过限制文件来自 `@digitalocean/do-markdownit/vendor/prismjs/components` 包含在捆绑中 -- `prism-core.js` 是唯一的“必需的”文件,所有其他都是语言定义.

我们揭露两个公用设施来帮忙。 首先是 `getDependencies` 方法输入 `util/prism_util.js` 它需要棱镜JS语言,并将返回所有语言依赖性 还需要装入它。 对Webpack用户来说,我们也暴露了 方法输入 `util/prism_webpack.js` 这需要一系列棱镜JS语言来包含和 返回 Webpack 插件,您可以包含该插件以限制捆绑中包含的路径.

```js
const { getDependencies } = require('@digitalocean/do-markdownit/util/prism_util');

console.log(getDependencies('javascript')); // [ 'clike', 'regex', 'markup' ]
console.log(getDependencies('javascript', false)); // [ 'clike', 'markup' ]
```

```js
const restrictWebpack = require('@digitalocean/do-markdownit/util/prism_webpack');

module.exports = {
  // ...
  plugins: [
    restrictWebpack([ 'javascript', 'nginx' ]),
  ],
};
```

### 保留 HTML 插件

除了Prism的修改版本外,这个软件包还包括一个自定义的Prism插件设计 在棱晶突出显示的代码中保留 HTML。 这类似于棱镜默认保存 Markdown插件,但并不依赖在DOM可用的浏览器上下文中运行.

当启用此插件时, 它将处理保存代码中存在的 HTML 棱镜突出它,包括低层 `Prism.highlight` 使用字符串代码的方法. 启用此插件也会确保标准保存 Markdown 插件被禁用, 因此它 不与此插件相冲突 .

```js
const Prism = require('@digitalocean/do-markdownit/vendor/prismjs');

require('@digitalocean/do-markdownit/util/prism_keep_html')(Prism);

Prism.highlight('console.log("<mark>Hello, world!</mark>");', Prism.languages.javascript, 'javascript');
```

## 样式

这个软件包还包括一套SCSS样式表,旨在为我们提供标准样式 digitalOcean社区使用Markdown, 设计此软件包提供的特性 以及标准马克德的造型.

这些内容按构成部分分列,可见于 [`styles`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles) 目录。 有一个 内部还有一个子目录 [Digital Ocean 特定样式](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/digitalocean) (例如: 我们使用的呼喊课).

示例用法:

```scss
.markdown {
    @import "@digitalocean/do-markdownit/styles";
}
```

注意,如果你计划使用这个方式 最终通过Webpack's 要生产 CSS 模块( 如 Next.js SCSS 模块) 的 css-loader , 您可能需要将导入内容包入 使用 `:global` 伪选取器确保内部的分类不出口:

```scss
.markdown {
    :global {
        @import "@digitalocean/do-markdownit/styles";
    }
}
```

如果您将此导入为没有父选择器的上下文, 您需要设置 `$root-text-styles` 改为 `false` 来防止使用 a 的默认文本样式 `& {` 从 正在装入 :

_全球导入样式是不推荐的,因为这些 Markdown 样式可能与其他样式相撞 文档中的各个部分._

```scss
$root-text-styles: false;
@import "@digitalocean/do-markdownit/styles";
```

### SCSS 变量

| 变量 | 默认 | 使用量 | 文件 |
| --- | --- | --- | --- |
| `$callouts-class` _(弦声)_ | `callout` | 用于 `callout` 插件 . | [`_callouts.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_callouts.scss) |
| `$callouts-label-class` _(弦声)_ | `callout-label` | 用于标签的类名 `callout` 插件 . | [`_callouts.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_callouts.scss) |
| `$code-label-class` _(弦声)_ | `code-label` | 用于 `fence_label` 插件 . | [`_code_label.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_code_label.scss) |
| `$code-secondary-label-class` _(弦声)_ | `secondary-code-label` | 用于 `fence_secondary_label` 插件 . | [`_code_secondary_label.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_code_secondary_label.scss) |
| `$collapsible-heading-class` _(弦声)_ | `collapsible` | 用于 `collapsible_heading` 插件 . | [`_collapsible.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_collapsible.scss) |
| `$columns-inner-class` _(弦声)_ | `column` | 用于 `columns` 插件 . | [`_columns.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_columns.scss) |
| `$columns-outer-class` _(弦声)_ | `columns` | 用于 `columns` 插件 . | [`_columns.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_columns.scss) |
| `$hash-anchor-class` _(弦声)_ | `hash-anchor` | 用于 `heading_id` 插件 . | [`_heading-id.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_heading_id.scss) |
| `$rsvp-button-class` _(弦声)_ | `rsvp` | 用于 `rsvp_button` 插件 . | [`_rsvp_button.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_rsvp_button.scss) |
| `$table-wrapper-class` _(弦声)_ | `table-wrapper` | 用于 `table_wrapper` 插件 . | [`_table_wrapper.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_table_wrapper.scss) |
| `$terminal-button-class` _(弦声)_ | `terminal` | 用于 `terminal_button` 插件 . | [`_terminal_button.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_terminal_button.scss) |
| `$root-text-styles` _(布尔)_ | `true` | 启用或禁用 `& {` 根文本样式的选择器. | [`_typography.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_typography.scss) |

除了用于控制特定样式的这些变量外,还有: [`_theme.scss`](https://npmcn.com/package/%40digitalocean/do-markdownit/styles/_theme.scss) 包含包使用的所有颜色的文件.

## 捐款

### 发展

要开始与这个寄存器合作,首先在当地克隆. 确保您拥有 正确版本的节点js `.nvmrc` 文件,然后安装依赖 运行后跟踪锁定文件 : `npm ci` 或者说 `npm ci --ignore-scripts && npm run postinstall`。 。 。 .

然后您可以通过运行启动演示服务器 `npm run dev`。这里有一个赤骨的例子 启用了热重装的 Web 包, 提供实时输入, 并使用 此套件中的插件以及 SCSS 样式 .

我们有两个关键目录包含此寄存器中的插件 -- `modifiers` 财务报告和审定财务报表 `rules`。 。 。 .

这个 `modifiers` 目录包含修改现有 Markdown- It 渲染输出的插件 函数, 操纵已生成的 HTML 结果或包装已存在的解析和渲染规则 在核心库.

这个 `rules` 目录包含将网新语法规则添加到 Markdown- It 解析器中的插件, 两者都 内线和屏蔽。 在这里面是 `embeds` 子目录,包含添加我们内容的插件 呼叫嵌入到Markdown的扩展,例如嵌入了CodePen,YouTube视频等.

每个被写入的插件也都应该有为其编写的测试,确保它作为 预期。 除了孤立的测试外, 插件的示例使用应该添加到 `fixtures/full-input.md` 用于测试插件在集成到主软件包时(插件应该) 装入 `index.js`) (中文(简体) ).

这个Repo利用Jest来进行所有测试, 你可以运行完整的套房与 `npm test`。 。 。 .

我们也有 `styles` 目录,包含由软件包提供的 SCSS 文件到样式 此插件提供的所有自定义功能,以及核心Markdown样式.

我们还利用ESLint和Stylelint执行一致的代码样式,以及检查 联合来文文件的评论附有有效的类型和说明。 你可以为两者运行电线 联合来文和常设委员会 `npm run lint`,或使用 `npm run lint:js` 财务报告和审定财务报表 `npm run lint:scss` 页:1.

两个linters也支持自动修复一些问题,这可以用 `npm run lint:fix`, (中文(简体) ), 或通过使用 `npm run lint:fix:js` 财务报告和审定财务报表 `npm run lint:fix:scss` 用于相关文档.

### 拖动请求问题( I)

我们欢迎以拉动请求或问题 -- -- 请求或 在现有插件中添加新特性, 报告或修复错误, 清理代码, 添加更多 测试等.

然而,请记住,这个插件最终是为数码海洋社区而建的, 因此,我们可能无法接受所提出的每一个新特点。 我们建议开放一个 首先,如果你有兴趣提供一个新的功能, 这样我们可以检查它将会在 在将时间投入到该插件的开发之前,该插件的选项.

打开拉出请求时,请确保填写所提供的模板,使其清晰 你的拉力请求正在改变 以及它为什么这样做 包含您如何改变的实例 在拉动请求中行为,通过实例 Markdown 语法以及由此产生的 HTML 是什么.

## 许可证

此插件根据 [Apache 许可证 2.0](https://npmcn.com/package/%40digitalocean/do-markdownit/LICENSE)。 。 。 .

版权2023 DigitalOcean.

## 常见问题

### @digitalocean/do-markdownit 是什么？

用于数字海洋社区的Markdown-It插件\.

### 如何安装 @digitalocean/do-markdownit？

在项目目录运行 npm install @digitalocean/do-markdownit，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：markdown-it（\>=12\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @digitalocean/do-markdownit 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @digitalocean/do-markdownit 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @digitalocean/do-markdownit 可以商用吗？

@digitalocean/do-markdownit 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @digitalocean/do-markdownit 的下载量有多少？

根据 npm 官方下载统计，@digitalocean/do-markdownit 在 2026/10/12 – 2026/11/10 这 30 天内被下载 7,290 次，日均约 243 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @digitalocean/do-markdownit 还在维护吗？

最新版本 1\.18\.0 发布于 2026/10/13（30 天前）；至今共发布 38 个版本，其中过去 12 个月发布了 2 个；首次发布于 2022/03/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

