MD 升数
一个最小化的Markdown解析器,用于基本格式化.
导言
这个库提供了快速而简单的Markdown parser,零依赖性. 对那些需要处理基本的Markdown语法的人来说是完美的,而不需要一个全能的Markdown parser的管理费.
特征
- 🪶 轻量级: 零依赖,低于5KB克齐普.
- 🌐 跨环境: 在Node.js和浏览器中工作.
- ✍️ 最小数 : 仅支持 斜体, (中文(简体) ), 粗体, (中文(简体) ),
击穿, (中文(简体) ),inline code, (中文(简体) ), 链接图片 段落, 标题、引文、列表、代码块和水平规则. - 🛠 弹性 : 随你怎么说 从HTML到JSX.
这个图书馆是给谁的?
如果你正在研究一个需要将Markdown渲染成短文本的项目,比如标题,字幕,和描述,但是你不需要一个全功能的Markdown parser,这个库是适合你的.
安装
我们建议使用 国家预防机制 安装软件包:
npm install @croct/md-lite
或者,你可以使用 雅伦数字 :
yarn add @croct/md-lite
基本用途
以下章节显示如何使用此库来解析和渲染Markdown.
解析标记
要将 Markdown 字符串分析成 AST,请使用 parse 函数 :
import {parse} from '@croct/md-lite';
const markdown = '**Hello**, [World](https://example.com)';
const ast = parse(markdown);
这个 parse 函数返回树状结构,称为 抽象语法树 (AST) (英语).
您可以找到完整的 AST 定义 这里。 。 。 .
每个节点 source 是它所解析的输入的正文,包含标记.
更深于100级的结点被读作文字,这样任何输入都无法将堆栈耗尽.
解析块
默认情况下,解析器只读入内置格式和段落,这些段落像标题一样,适合短文本.
同时读取块,如 普通马克 打开 blocks 选项 :
import {parse} from '@croct/md-lite';
const ast = parse('# Title\n\n- One\n- Two', {blocks: true});
上面写着:
- 标题,从
# Heading改为###### Heading,或加下划线的段落===或者说--- - 引文,每行开头
> - 列表,以
-, (中文(简体) ),*,或+,或后面有数字.或者说), (中文(简体) ), 由缩入而成,每个项目需要多少段落 - 代码块,由三个或三个以上的回击或平板栅栏,带有可选语言
- 水平规则,比如
---, (中文(简体) ),***,或___
列表很紧, 除非空白行将其项目或项目块分开. 严格清单项目的案文不包含在段落中,因此,它使得 作为紧凑的列表, 而每个块在一个松散的列表是.
渲染马克下
将AST变成任何你想要的,使用 render 函数.
它接受作为输入的 Markdown 字符串或 AST :
import {render} from '@croct/md-lite';
// Passing a string as input is equivalent to calling `parse` first
const markdown = '**Hello**, [World](https://example.com)';
const html = render(markdown, {
fragment: node => node.children.join(''),
text: node => node.content,
bold: node => `<b>${node.children}</b>`,
italic: node => `<i>${node.children}</i>`,
strike: node => `<s>${node.children}</s>`,
code: node => `<code>${node.content}</code>`,
link: node => `<a href="${node.href}">${node.children}</a>`,
image: node => `<img src="${node.src}" alt="${node.alt}">`,
paragraph: node => `<p>${node.children.join('')}</p>`,
heading: node => `<h${node.level}>${node.children}</h${node.level}>`,
quote: node => `<blockquote>${node.children.join('')}</blockquote>`,
orderedList: node => `<ol start="${node.start}">${node.items.join('')}</ol>`,
unorderedList: node => `<ul>${node.items.join('')}</ul>`,
listItem: node => `<li>${node.children.join('')}</li>`,
codeBlock: node => `<pre><code>${node.content}</code></pre>`,
rule: () => '<hr>',
});
以下是如何将上面的Markdown字符串变成JSX的例子:
import {render} from '@croct/md-lite';
// Passing a string as input is equivalent to calling `parse` first
const markdown = '**Hello**, [World](https://example.com)';
const jsx = render(markdown, {
fragment: node => node.children,
text: node => node.content,
bold: node => <b key={node.index}>{node.children}</b>,
italic: node => <i key={node.index}>{node.children}</i>,
strike: node => <s key={node.index}>{node.children}</s>,
code: node => <code key={node.index}>{node.content}</code>,
link: node => <a key={node.index} href={node.href}>{node.children}</a>,
image: node => <img key={node.index} src={node.src} alt={node.alt} />,
paragraph: node => <p key={node.index}>{node.children}</p>,
heading: node => {
const Heading = `h${node.level}` as const;
return <Heading key={node.index}>{node.children}</Heading>;
},
quote: node => <blockquote key={node.index}>{node.children}</blockquote>,
orderedList: node => <ol key={node.index} start={node.start}>{node.items}</ol>,
unorderedList: node => <ul key={node.index}>{node.items}</ul>,
listItem: node => <li key={node.index}>{node.children}</li>,
codeBlock: node => <pre key={node.index}><code>{node.content}</code></pre>,
rule: node => <hr key={node.index} />,
});
处理不支持的特性
在某些情况下,你可能想故意从你的 使马克倒地。 例如,如果你的平台不支持图像渲染, ou可以简单地返回原始源文本,而不是试图显示图像.
import {render, unescape} from '@croct/md-lite';
render(markdown, {
// ... other render functions
image: node => unescape(node.source),
});
此代码片段将简单地返回图像节点的原始源代码 而不是试图把它变成一个形象。 你可以调整这个方法 通过定义适当的渲染处理任何其他不支持的特性 操作并访问AST的相关数据.
要从字符串中制取块, 将相同的选项传递到 render一样 render(markdown, renderer, {blocks: true})。 。 。 .
区块的渲染功能是可选的。 一个街区没有,像名单一样
何时 unorderedList 未给出,作为源文本的一款,
如果区块没有解析,则采用内在格式.
捐款
对一揽子计划的贡献总是受到欢迎的!
测试
在运行测试套件之前,开发依赖必须安装:
npm install
然后,运行所有测试:
npm run test
运行以下命令以对照样式指南检查代码 :
npm run lint
大楼
在建设项目之前,必须安装附属设施:
npm install
然后,为了建造这个项目:
npm run build
许可证
版权所有:2015-2023 Croct Limited, All Rights Reserved. 互联网档案馆的存檔,存档日期2014-12-22.
本文所载的所有资料均为并仍然是克罗克有限公司的财产。 本文所载的知识、设计和技术概念是Croct Limiteds专有的,可能由美国和外国专利、正在处理的专利所涵盖,并受贸易秘密或版权法的保护。 严格禁止传播这种信息或复制这种材料,除非事先得到克罗克特有限公司的书面许可.