乐趣区

关于markdown:将Markdown字符串转成HTML

jiezi
简介

应用以下插件，顺次实现：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 后，跟失常文字一样是没有色彩、关键字高亮等款式的，此插件即可解决代码款式问题。
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!');
  • markdown-it 源码
  • markdown-it 插件下载
  • Live Demo：查看 markdown 字符串变 HTML 的成果
  • markdown-it 中文文档
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('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')

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

# 将 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 && 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(`
    <li>Item 1</li>
    <li>Item 2</li>
  `)}
</ul>
  • html-react-parser 插件下载
  • html-react-parser 源码
markdown-it-anchor

性能：作为 markdown-it 的插件应用，帮忙 markdown-it 解析后的 HTML，加上锚点(<h/> 标签减少 id 属性)，再配合上 markdown-it-toc-done-right 插件，就能够为 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})
  • markdown-it-anchor 插件下载
  • markdown-it-anchor 源码
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
  • uslug 插件下载
  • uslug 源码
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} );
  • markdown-it-toc-done-right 插件下载
  • markdown-it-toc-done-right 源码
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('<span>Hello World!</span>').value

#2. 应用确定代码语言格局高亮
html = hljs.highlight('<h1>Hello World!</h1>', {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"

# 理论展现款式能够看上面官网给出的款式链接
  • 官网
  • 官网 – 使用手册
  • 官网 – 款式成果展现
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
  • markdown-it-multimd-table 插件下载
  • markdown-it-multimd-table 源码
参考文档
  • 将 Markdown 字符串转成 HTML
退出移动版