Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

html-to-md

stonehank42.4kMIT0.8.8TypeScript support: included

A JS library for convert HTML<String> to markdown<String>, gzip 10kb

html2md, html2markdown, htmlToMarkdown, parseHtml, markdown, html

readme

一个用于转换HTMLMarkdown的工具。English


Build Status npm codecov npm bundle size

特点

  • 快速,小巧,无任何依赖,gzip 10kb

  • 支持nodeJS,参数(html 文本)为字符串

  • 200+单元测试和模块测试,覆盖率97%

注意:只有有效规范的 HTML 文本才能准确显示结果,如<p>abc<<i>abc</>等都是无效文本

效果

live-demo

为什么做这个工具

最初的动机是希望将leetcode-cn上的题目和自己的解答搬到github, 但是获取的介绍都是html格式文本,因此有了将html转换为markdown的需求。

找了几个工具,结果并不是很合胃口,有的不支持nodejs,有的并不能很好的转换,最终决定自己写一个来用。

刚开始只是写了一个比较简单的,但已经能够处理我的需求。

但后来偶尔一次使用,面对更复杂的html格式,就会出现混乱,这个库也就是一个重构版, 当然,它可能还存在很多bug没有发现,但希望能在后续不断完善,如果有发现bug,请提issuePR,我会第一时间进行处理。

使用说明

安装

npm -i html-to-md

使用
const html2md = require('html-to-md')
// or if you're using ES6
import html2md from 'html-to-md'

console.log(
  html2md('<strong><em>strong and italic</em></strong>', options, force)
)
// ***strong and italic***

参数(可选):

options:

名称 数据类型 默认值 说明
skipTags Array
[
  'div',
  'html',
  'body',
  'nav',
  'section',
  'footer',
  'main',
  'aside',
  'article',
  'header'
]
需要忽略的标签名
emptyTags Array [] 不仅忽略它本身,它内部所有标签名全部忽略
ignoreTags Array
[
  '',
  'style',
  'head',
  '!doctype',
  'form',
  'svg',
  'noscript',
  'script',
  'meta'
]
忽视标签及其内部所有内容
aliasTags Object
{
  figure :'p',
  figcaption:'p',
  dl:'p', 
  dd:'p', 
  dt:'p'
}
为标签定义一个别名(通常作用于一些不常用标签)
renderCustomTags   Boolean
|'SKIP'
|'EMPTY'
|'IGNORE'
true 定义是否渲染自定义标签(非HTML标签),
  • true:渲染
  • false | SKIP:添加至skipTags
  • EMPTY:添加至emptyTags
  • IGNORE:添加至ignoreTags
tagListener Function (tagName: String, props: TagListenerProps): TagListenerReturnProps => props 自定义当前标签部分属性配置

优先权:skipTags > emptyTags > ignoreTags > aliasTags

例:

html2md('<><b><i>abc</i></b></>', { ignoreTags: [''] })
// ''

html2md('<><b><i>abc</i></b></>', { skipTags: [''] })
// ***abc***

html2md('<><b><i>abc</i></b></>', { emptyTags: [''] })
// abc

html2md('<><b><i>abc</i></b></>', {
  skipTags: [''],
  aliasTags: { b: 'ul', i: 'li' },
})
// *  abc

html2md('<test><b><i>abc</i></b></test>', { renderCustomTags: 'SKIP' })
// ***abc***

force(Boolean)(默认 false)

说明
true 表示强制使用自定义配置
false 对自定义配置使用Object.assign操作

例:

// 默认 skipTags 为 ['div','html','body']

// 配置一:
html2md('<div><b><i>abc</i></b></div>', { skipTags: ['b'] }, false)
// skipTags 为 ['div','html','body','b']

// 配置二:
html2md('<div><b><i>abc</i></b></div>', { skipTags: ['b'] }, true)
// 经过配置后 skipTags 为 ['b']

TagListenerProps

key 说明
parentTag 父标签名,没有则为 null
prevTagName 上一个标签名,没有则为 null
nextTagName 下一个标签名,没有则为 null
isFirstSubTag 是否当前父标签内部的第一个子标签
attrs 当前标签的 attributes,以 object 集合方式,例如 { src, href ... }
innerHTML 内部 HTML 字符串
match 当前的 HTML 对应 Markdown 的匹配符号
language? 当前标签语言,只在 pre 标签中出现
isSelfClosing 是否自闭和标签

TagListenerReturnProps

key 说明
attrs 当前标签的 attributes,以 object 集合方式,例如 { src, href ... }
match 返回一个新的自定义匹配符号
language? 返回自定义 pre 标签的 language

支持标签

  • a
  • b
  • blockquote
  • code
  • del
  • em
  • h1~h6
  • hr
  • i
  • img
  • input
  • li
  • ol
  • p
  • pre
  • s
  • strong
  • table
  • tbody
  • td
  • th
  • thead
  • tr
  • ul

changelog

0.8.8

0.8.7

0.8.6

0.8.5

0.8.4

  • Clean console output

0.8.3

  • Change Tag and SelfCloseTag class property name content to innerHTML
  • fix #60
  • fix quote in tag attribute can not be detected correctly
  • fix | escapes in table
  • ADD: tagListener to custom some props of tag

    (tagName, props: TagListenerProps): TagListenerReturnProps => TagListenerReturnProps`

0.8.0

  • add eslint and premitter
  • sourcecode use es module
  • convert to typescript

0.7.0

  • add renderCustomTags in options

0.6.1

  • add title in a tag
  • add input options in demo page

0.6.0

  • fix undefined language in pre tag

0.5.9

  • fix p tag add an extra gap when inside text node.
  • update get language function define in pre tag.

0.5.8

0.5.7

  1. fixed: keep format in coding block(#44)
  2. reset config before start

0.5.4 - 0.5.6

0.5.2 - 0.5.3

0.5.1

  • Support attr:align in table
  • Add UMD to support browser #41

0.5.0

Refactor

  • Less space
  • Change some default configs
  • Add typings for typescript #34

0.4.4

  • Fixed issue #33, use \s instead of ' ' in tags attribute detect.

0.4.3

  • Speed up parse string

0.4.2

  • Remove window

0.4.1

  • Remove throw Error, add some errors test
  • Add empty table detect, add test case

0.4.0

  • Remove the first \n in some tags
  • Escape some character in some tag, like <b>* abc</b>
  • Fix render issues when <br> in <li>
  • Fix render issues when have `(single or multiple) in <code> or <pre>
  • Ignore extra tags if already have code tag inside pre

0.3.9

  • Output some raw unvalid content, like < in the tag contents.

0.3.8

  • Fix when render as raw HTML, remove all the wrap.

0.3.7

  • Fixed some tags inside th, td will cause wrap.Consider <td><div>ABC</div></td>
  • Add some tags should render as raw HTML inside a table.Consider <td><ul><li>1</li></ul></td>

0.3.6

  • Add aliasTags.
  • Remove console in production.

0.3.5

  • Remove console.

0.3.4

  • Add 'dl,dd,dt' inside default skipTags.
  • Fixed some no used space.

0.3.3

  • Add 'html' and 'body' inside default skipTags.
  • Add force options, it can totally overwrite the customize options object.
  • Fix some redundant empty line.
0.3.2
  • Fixed bugs that cause text after heading tags will not line feed.
0.3.1
  • created CHANGELOG.md, support english readme
  • add options, can set the tags resolve strategy
  • add div to default value of options:skipTags
  • skipTags will check if need '\n'
0.3.0
  • add support for tag<input type="checkbox" />
  • fixed the bug when <code>language is markdown
  • fixed the bug when <p> nest in <li>
  • fixed some nest tag render bug
  • merge tht common use code