HTML 转 Markdown 如此简单

sxkk20082年前知识分享171

前言

现在好的技术文章非常多,每天各种技术群里,各种技术社区,有很多质量非常好的技术文章,比如 CSDN,掘金、微信公众号等, 于是我们就收藏了,收藏等于学会。

可是问题来了,我们收藏到哪呢? CSDN 有了弹窗广告,掘金之前好的文章居然被删除了,其实最好的方式是将文章保存为 markdown,保存到自己的知识库中,或者可以上传自己的 github。

如何将文章将保存为 markdown ?

下面推荐 2 个工具非常好用可以将直接将 HTML 转为 markdown,大家可以收藏使用

s17085102232022

其实 devtool.tech 里面的每个工具都挺好用的。

HTML 转 markdown 是如何实现?

其实有个包 turndown 可以直接将 html 转为 markdown,并且可以在浏览器和 nodejs 中执行

安装

npm

npm install turndown

浏览器

<script src="https://unpkg.com/turndown/dist/turndown.js">script>

使用

var TurndownService = require('turndown')

var turndownService = new TurndownService()
var markdown = turndownService.turndown('

Hello world!

'
)

直接将 html 字符串传入就可以了,返回 markdown 字符串

turndown 还支持配置规则, 比如

保留标签

turndownService.keep(['del', 'ins'])
turndownService.turndown('

Hello worldWorld

'
)
// 'Hello worldWorld'

移除标签

turndownService.remove('del')
turndownService.turndown('

Hello worldWorld

'
)
// 'Hello World'

插件

turndown 还支持插件的使用,官方就提供了 turndown-plugin-gfm,意思是 GitHub Flavored Markdown 功能是特点有:

  • strikethrough 支持 , , 和 标签,也就是删除线

  • tables 支持表格

  • taskListItems 支持任务列表,也就是 checkbox 任务

使用代码

var TurndownService = require('turndown')
var turndownPluginGfm = require('turndown-plugin-gfm')

var gfm = turndownPluginGfm.gfm
var turndownService = new TurndownService()
turndownService.use(gfm)
var markdown = turndownService.turndown('Hello world!')

一般都要加上这个插件

开发一个类似的工具

其实使用 turndown 已经完成类似的功能,为了美观,我们可以给代码加上代码编辑器 codemirror

新的 codemirror6 完全重写,采用了插件化的形式,代码量更小,我用的技术栈是 react, 社区封装了一个好用的库 rodemirror

使用代码示例

import { useMemo, useState } from 'react'
import CodeMirror from 'rodemirror'
import { basicSetup } from '@codemirror/basic-setup'
import { oneDark } from '@codemirror/theme-one-dark'
import { javascript } from '@codemirror/lang-javascript'
import { markdown as langMarkdown } from '@codemirror/lang-markdown'

const Editor = () => {
  const extensions = useMemo(() => [basicSetup, oneDark, javascript(), langMarkdown()], [])

  const defaultValue = "console.log('Hello world!')"
  // remove if you do not need the value
  const [value, setValue] = useState(defaultValue)

  return (
    <CodeMirror
      value={defaultValue}
      onUpdate={(v) => {
        if (v.docChanged) {
          setValue(v.state.doc.toString())
        }
      }}
      extensions={extensions}
    />
  )
}

export default Editor

lang-javascript 下的包是让 CodeMirror 支持语法高亮。接下来就是配合 react 常规写法。效果如下

image.png

小结

image.png

一个简易版的 html 转 markdown 编辑器就实现了,大家可以手动尝试实现一下。本文未涉及这些工具的内部实现原理,后续若遇到问题需要深入研究。

小技巧

常规的做法,是使用 chreome 控制台选中 article 标签就可以直接复制 html 了,但有时候如果 html 不规范,可能转换失败。

有时候有些文章 文章并不是在一个标签中,比如 medium.com 中的文章就不在一个标签中,这个时候,拷贝 HTML 就麻烦了。

还有个问题

Word 中的文档要转成 markdown 怎么办呢 ?

其实我们可以通过直接选中文本然后支持粘贴到 typora 中,然后就直接转成 markdown 了。

所以说了这么多,这个工具我没开发 😊。

以上就是本文全部内容,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

相关文章

行业应用探索:人工智能在医疗领域的创新应用

行业应用探索:人工智能在医疗领域的创新应用

  人工智能作为一种最先进的技术,正日益赋予各行业更高效、更精准的能力。其中,医疗领域作为人工智能的重要应用领域之一,通过结合医学专业知识和机器学习算法,正在推动...

AI如何复制图层中心

AI如何复制图层中心

  图层中心复制是一项常用的设计技巧,它可以在设计过程中提供更高效的操作方式。随着人工智能技术的发展,现在我们可以通过AI来实现图层中心的复制。  首先,AI可以通过分析图层...

AI绘画入门:让机器帮你完成艺术创作

AI绘画入门:让机器帮你完成艺术创作

  在数字化时代,人们对于美学和艺术的需求越来越多,而AI技术的兴起为我们的艺术创作提供了更多可能性。AI绘画技术便成为了探索艺术创作的一条新途径。本文将介绍AI绘画的入门技...

链科学:新兴学科助力数字经济时代的发展

链科学:新兴学科助力数字经济时代的发展

  在当代信息爆炸的时代背景下,链科学作为一门新兴的学科,正在逐渐引起人们的重视和关注。作为一种新型的科学方法论,链科学通过对各种复杂网络的研究与分析,揭示了网络结构与功能、...

人工智能改变教学方式:人工智能教学平台

人工智能改变教学方式:人工智能教学平台

  随着科技的日新月异,人工智能正逐渐渗透到我们的生活中的各个领域。教育领域也不例外。人工智能教学平台的出现,为教学方式带来了革命性的改变。  首人工智能教学平台提供了个性化...

油库智能化-AI技术助力数字化转型

油库智能化-AI技术助力数字化转型

  随着数字化转型的推进,越来越多企业开始尝试引入AI技术,优化工作流程、提高效率。油库这一行业同样不例外。当前,油库智能化正处于蓬勃发展的阶段,AI技术也逐渐成为推动油库数...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。