HTML 转 Markdown 如此简单

sxkk20082年前知识分享163

前言

现在好的技术文章非常多,每天各种技术群里,各种技术社区,有很多质量非常好的技术文章,比如 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 了。

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

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

相关文章

我在工作中使用 git 的几个技巧

前言Git 是每个程序员的必备技能,良好的 Git 提交习惯,不但可以让代码阅读更清晰,还可以提高我们的我们的工作效率,接下来我将分享我在工作中关于 Git 的使用经验,或许对你有帮助。Git 工作流...

AI创作中心助力行业发展:引领绿色生活的创新力量

AI创作中心助力行业发展:引领绿色生活的创新力量

  近年来,人工智能(AI)技术的快速发展为各行各业带来了巨大的改变与机遇。在这个数字化时代,AI创作中心成为引领绿色生活发展的创新力量之一。通过AI技术的广泛应用,园艺行业...

如果你会 TailwindCSS 我推荐 VSCODE 安装 这个插件tailwind-snippets 可以快速帮我们来发出一个常用的代码片段,大家可以在 https://www.tailwindsnippets.ml/snippets 查看效果,快速实现我们的 html 页面

tailwind-snippets 预览

部署

Vercel

Next.js 开发商 Vercel 获得最近 1.5 亿美元 D 轮融资。Vercel 注册什么的我就不讲了,建议使用GitHub 登录, 点击new project创建一个项目,这个项目可以从自己的 GitHub 库导入或者选择 Vercel 给的模板,Vercel 给的模板(下图)首先也会导入进自己的 GitHub 库,总之要先把内容导入进 GitHub 库才行。

Vercel 支持的框架

Vercel 为个人用户提供了

  1. 自动 HTTPS/SSL
  2. 带宽 100 GB
  3. 并发构建,每天 10 万次调用
  4. Serverless Function

所以 Vercel 不光支持静态网站也支持 nodejs 动态网站,如果想要其他后端语言

可以选择 heroku

heroku

Heroku 是一个支持多种编程语言的云平台,并且提供了 Heroku PostgresHeroku RedisApache Kafka on Heroku

Heroku 支持的语言

Heroku 虽然提供了比较全面的编程语言和数据库支持,免费用户还支持

  1. 使用 Git 和 Docker 部署
  2. 自定义二级域名
  3. 容器编排
  4. 自动操作系统补丁

但 heroku 对国内用户支持不是很友好,第一点访问国内速度比不上 Vercel, 第二点 163 和 QQ 邮箱都不能注册,想要注册得要其他邮箱, 第三没有免费的 ssl。第四项目源代码只能有 500M。

数据库选择

MongoDB

选择 https://cloud.mongodb.com/

mongodb 首页截图

创建 database 的时候选择 free;

选择免费截图 地域可以选择日本或者新加坡。

接着创建一个用户 创建一个用户 密码是自动生成的,要把密码拷贝下来

接着要创建一个允许链接的 IP 地址

在 mongodb.com 设置允许链接的IP

如何白嫖一个动态网站

前言我们知道,想要搭建一个网站往往需要一下几个步骤:域名注册服务器购买数据库购买或部署网站设计网站开发网站备案网站上线在国内上线一个网站,域名还必须得备案,光是域名备案的话还的几个星期,整个流程下来,...

人工智能机器人发展史 - 探索人类未来的智慧助手与伙伴

人工智能机器人发展史 - 探索人类未来的智慧助手与伙伴

  随着科技的不断进步与创新,人工智能机器人已经成为现实中的一部分。从早期的机械人到如今的智能助手,人工智能机器人在过去几十年间取得了长足的进步。本文将以人工智能机器人发展史...

华为AI音箱:实现人与科技更亲近

华为AI音箱:实现人与科技更亲近

  近年来,随着智能音箱的普及,人机交互的方式发生了翻天覆地的变化。作为智能音箱领域的佼佼者之一,华为AI音箱以其出色的技术与服务,在用户中广受好评。不仅如此,它还为人们带来...

【对话ChatGPT】如何提高网站的访问量?

上周给博客开通的 Google adsense,收益比微信公众号好一些,收益跟访问量成正比,于是我问了 ChatGPT 这个问题。如何提高网站访问量?以下是一些提高网站访问量的方法:优化 SEO:搜索...

发表评论    

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