markdown-nice使用教程

markdown-nice 使用教程

一.参考地址

https://madewith.cn/439

二.简介及使用教程

Markdown Nice是一个支持自定义样式的在线微信Markdown排版工具,使用React、antd、markdown-it等技术开发。

特点

  • 支持自定义样式的 Markdown 编辑器
  • 支持微信公众号排版
  • 支持知乎、稀土掘金、博客园和 CSDN 等一系列平台
  • 内容和自定义样式浏览器中实时保存
  • 支持上传图片、脚注、公式

三.安装

下载源码到本地

git clone https://github.com/mdnice/markdown-nice.git myproject
cd myproject

安装依赖

npm i 

运行调试

npm run start

构建打包

npm run build

storybook测试

npm run storybook

四.示例

image.png

`

四.示例

[外链图片转存中…(img-XFzL1K4L-1654406308472)]

image.png

### 使用 markdown-it 库进行 Markdown 渲染 `markdown-it` 是一个用于解析和渲染 MarkdownJavaScript 库,具有高度可扩展性和灵活性。以下是关于如何使用 `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、付费专栏及课程。

余额充值