将Markdown字符串转成HTML

白色玫瑰 程序猿

时间: 2023-07-11 阅读: 1 字数:11610

markdown html
{}
简介 使用以下插件，依次实现：markdown字符串转HTML、自动生成目录(toc)、代码高亮等功能。 markdown-it：将markdown字符串转换成HTML...markdown-it-toc-done-right：帮markdown自动生成目录(TOC)，依赖上面插件ma
简介

使用以下插件，依次实现：markdown字符串转HTML、自动生成目录(toc)、代码高亮等功能。

markdown-it：将markdown字符串转换成HTML字符串； html-react-parser：将上面HTML字符串转换成React，用在Node.js的web项目中展示最终排版； markdown-it-anchor：给HTML增加锚点，配合插件即可生成文档的目录(TOC)； markdown-it-toc-done-right：帮markdown自动生成目录(TOC)，依赖上面插件markdown-it-anchor； uslug：上面生成的目录(TOC)，有时候跳转会失败，原因就是markdown-it-anchor生成锚点id 与 markdown-it-toc-done-right 生成的herf 不匹配导致，uslug可解决此问题； 分割线<hr/>无法显示：最终HTML页面无法显示分割线，原因是<hr/>没有高度导致，用css设置高度hr{ height: 1px;}即可显示。 highlight.js：markdown中代码解析成HTML后，跟正常文字一样是没有颜色、关键字高亮等样式的，此插件即可解决代码样式问题。
<hr>

markdown-it

功能：把markdown字符串转换为HTML字符串.

# 安装
npm i markdown-it

# 使用
// node.js, "classic" way:
var MarkdownIt = require('markdown-it'), md = new MarkdownIt();
var result = md.render('# markdown-it rulezz!');

// node.js, the same, but with sugar:
var md = require('markdown-it')();
var result = md.render('# markdown-it rulezz!');

<a href="https://github.com/markdown-it/markdown-it">markdown-it 源码 </a> <a href="https://www.npmjs.com/package/markdown-it">markdown-it 插件下载</a> <a href="https://markdown-it.github.io/">Live Demo：查看markdown字符串变HTML的效果</a> <a href="https://markdown-it.docschina.org/">markdown-it 中文文档</a>
<hr>

html-react-parser

功能：将HTML字符串转成React元素。

1、安装
# npm安装
npm install html-react-parser --save

# yarn安装
yarn add html-react-parser

# CDN安装
<!-- HTMLReactParser depends on React -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>
<script>
  window.HTMLReactParser(/* string */);
</script>
2、使用
# 将HTML字符串转换为HTML
const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

# 将HTML字符串转换为HTML并替换其中属性
parse('
<br id="remove">
', {
  replace: ({ attribs }) => attribs &amp;&amp; attribs.id === 'remove' &amp;&amp; <></>
});

# 将HTML字符串转换为HTML并替换其中标签<main/>为<div/>
import parse, { attributesToProps } from 'html-react-parser';

const html = `<main class="prettify" style="background: #fff; text-align: center;" />`;
const options = {
  replace: domNode => {
   if (domNode.attribs &amp;&amp; domNode.name === 'main') {
     const props = attributesToProps(domNode.attribs);
     return <div {...props} />;
   }
  }
};
parse(html, options);
// 替换后结果：
<div class="prettify" style="background:#fff;text-align:center"></div>
3、注意事项
# 确保有父容器，否则会出错
<ul>
  {parse(`
   Item 1   Item 2  `)}
</ul>

<a href="https://www.npmjs.com/package/html-react-parser">html-react-parser插件下载</a>

<a href="https://github.com/remarkablemark/html-react-parser#readme">html-react-parser源码</a>

<hr>

markdown-it-anchor

功能：作为markdown-it的插件使用，帮助markdown-it解析后的HTML，加上锚点(标签增加id属性)，再配合上<a href="https://www.npmjs.com/package/markdown-it-toc-done-right">markdown-it-toc-done-right</a>插件，就可以为markdown自动生成目录(TOC)。

1、安装
# 安装
npm i markdown-it-anchor

# 使用
const md = require('markdown-it')()
  .use(require('markdown-it-anchor'), opts)
2、使用注意
# 用uslug插件，解决锚点id中，「%XX」这种不可读的字符。
$ npm i -S uslug

const uslug = require('uslug')
const uslugify = s => uslug(s)

const md = require('markdown-it')()
const anchor = require('markdown-it-anchor', {
    slugify: uslugify
})

<a href="https://www.npmjs.com/search?q=markdown-it-anchor">markdown-it-anchor 插件下载</a> <a href="https://github.com/valeriangalliat/markdown-it-anchor/blob/master/README-zh_CN.md">markdown-it-anchor 源码</a>
<hr>

uslug

功能：为string生成一个slugify(唯一字符串，去掉或转换不可读、不支持的字符).

1、安装
npm install uslug
2、使用
# 调用方法
uslug(string, options)

# 参数说明
string是待传入的字符串；options有三个值可以设置：
1、allowedChars:  可以指定字符串保持原样，不转换，缺省值：'-_~'.
2、lower: 布尔值，是否强制转换为小写？缺省为true
3、spaces: 布尔值，是否允许空格？缺省为false.

# 使用案例
uslug('Быстрее и лучше!') // 'быстрее-и-лучше'
uslug('汉语/漢語') // '汉语漢語'

uslug('Y U NO', { lower: false })) // 'Y-U-NO'
uslug('Y U NO', { spaces: true })) // 'y u no'
uslug('Y-U|NO', { allowedChars: '|' })) // 'yu|no'
3、可以配合其他插件使用
# 配合 markdown-it-anchor 插件生成slugify
# 配合 markdown-it-toc-done-right 插件生成slugify

<a href="https://www.npmjs.com/package/uslug">uslug 插件下载</a> <a href="https://github.com/jeremys/uslug#readme">uslug源码</a>
<hr>

markdown-it-toc-done-right

功能：为markdown字符串转HTML过程中，生成目录(TOC)，依赖插件：markdown-it-anchor

1、安装
$ npm i -S markdown-it-toc-done-right markdown-it-anchor
2、使用
# node.js 使用案例
var md = require("markdown-it")({
    html: false,
    xhtmlOut: true,
    typographer: true
}).use( require("markdown-it-anchor"), { permalink: true, permalinkBefore: true, permalinkSymbol: '§' } )
  .use( require("markdown-it-toc-done-right") );

var result = md.render("# markdown-it rulezz!\n\n${toc}\n## with markdown-it-toc-done-right rulezz even more!");

# 另外一种使用方案
// browser without AMD, added to "window" on script load
// Note, there is no dash in "markdownit".
var md = window.markdownit({
    html: false,
    xhtmlOut: true,
    typographer: true
}).use( window.markdownItAnchor, { permalink: true, permalinkBefore: true, permalinkSymbol: '§' } )
  .use( window.markdownItTocDoneRight );

var result = md.render("# markdown-it rulezz!\n\n${toc}\n## with markdown-it-toc-done-right rulezz even more!");
3、注意事项
# 使用过程中，引入uslug插件，这样可以使得markdown-it-anchor生成锚id，跟markdown-it-toc-done-right生成的href能够完全一致，不至于因为名称不同导致锚点跳转失败。
var md = require("markdown-it")({
    html: false,
    xhtmlOut: true,
    typographer: true
}).use( require("markdown-it-anchor"), { permalink: true, permalinkBefore: true, permalinkSymbol: '§', { slugify: uslugify} } )
  .use( require("markdown-it-toc-done-right"), { slugify: uslugify } );

<a href="https://www.npmjs.com/package/markdown-it-toc-done-right">markdown-it-toc-done-right 插件下载</a>

<a href="https://github.com/nagaozen/markdown-it-toc-done-right#readme">markdown-it-toc-done-right 源码</a>

<hr>

highlight.js

功能：让markdown中代码，显示不同的字体样式(彩色、关键字高亮等).

1、安装
# 环境要求
Node.js >= 12.x
npm >= 6.x

# npm安装
npm install highlight.js

# yarn安装
yarn add highlight.js
2、加载并调用
#1.自动识别代码语言，并使用对应语言格式高亮
const hljs = require('./highlight.js');
const highlightedCode = hljs.highlightAuto('Hello World!').value

#2.使用确定代码语言格式高亮
html = hljs.highlight('
# Hello World!
', {language: 'xml'}).value

#3.对各个代码元素模块，自定义格式
// first, find all the div.code blocks
document.querySelectorAll('div.code').forEach(el => {
  // then highlight each
  hljs.highlightElement(el);
});
3、选择样式，呈现最后效果
# 在此路径「/node_modules/highlight.js/styles」，找到喜欢的css，复制文件到项目中，使用时加载
import "../components/shades-of-purple.css"

# 实际展示样式可以看下面官方给出的样式链接

<a href="https://highlightjs.org/">官网</a>

<a href="https://highlightjs.org/usage/">官方 - 使用手册</a>

<a href="https://highlightjs.org/static/demo/">官方 - 样式效果展示</a>

<hr>

markdown-it-multimd-table
1、安装
npm i markdown-it-multimd-table
2、使用案例一
// defaults
var md = require('markdown-it')()
         .use(require('markdown-it-multimd-table'));

// full options list (equivalent to defaults)
var md = require('markdown-it')()
         .use(require('markdown-it-multimd-table'), {
           multiline:  false,
           rowspan:   false,
           headerless: false,
         });

md.render(/*...*/)
3、使用案例二
$ mkdir markdown-it-multimd-table
$ cd markdown-it-multimd-table
$ npm install markdown-it-multimd-table --prefix .
$ vim test.js

   var md = require('markdown-it')()
            .use(require('markdown-it-multimd-table'));

   const exampleTable =
   "|          |        Grouping         || \n" +
   "First Header  | Second Header | Third Header | \n" +
   " ------------ | :-----------: | -----------: | \n" +
   "Content      |        *Long Cell*      || \n" +
   "Content      |   **Cell**   |       Cell | \n" +
   "                                    \n" +
   "New section   |    More     |       Data | \n" +
   "And more     | With an escaped '\\|'      || \n" +
   "[Prototype table]                       \n";

   console.log(md.render(exampleTable));

$ node test.js > test.html
$ firefox test.html

<a href="https://www.npmjs.com/package/markdown-it-multimd-table">markdown-it-multimd-table插件下载</a>

<a href="https://github.com/RedBug312/markdown-it-multimd-table">markdown-it-multimd-table源码</a>

<hr>

参考文档

<a href="https://learn-anything.cn/markdown-html">将Markdown字符串转成HTML</a>

原文地址：https://blog.csdn.net/fanlehai/article/details/121347803?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905624516800184198975%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168905624516800184198975&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-10-121347803-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=markdown

本文章网址:https://www.sjxi.cn/detil/a64fd6f34b00417581f1a0b98189da51

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号