整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

你用过哪些好用的HTML转markdown工具?

为一名开发者,很多时候都需要写下自己的学习内容、debug过程或者所思所感,方便以后快速回忆和巩固,也便于分享给其他人,谈起写点东西,对于开发者来说最方便的无疑是markdown了,其简洁高效的语法可以让我们在较短的时间内写出具有美观格式的文章。很多时候我们也需要将现有的非markdown书写的笔记转成markdown,此时就需要一个好的工具了。那么,作为开发者的你都用过哪些工具呢?这里我分享一些自己用过的或正在用的工具给大家吧。

1.bejson

网站是Html/MarkDown互转工具-BeJSON.com,效果如下:


经过小编测试,该网站的转换效率较高,即便是几千字的文章,也能在点击转换按钮的瞬间完成转换,同时支持markdown与HTML的互相转换,效率都是较高的。

现在演示如下 :

可以看到,效率还是很高的,除此之外,还有很多其他工具也可以使用。

2.hello world

这是一个刚出现的平台,地址是HelloWorld - 专业开发者社区,是作为一个技术交流平台的工具出现的,平台首页是HelloWorld - 专业开发者社区。整个转换界面很清新简洁,如下:


可以看到,整个界面的底色是蓝色,给人一种清新舒适的感觉。同时提供了两种转换的方式:

  • 直接提供链接
  • 转换HTML代码

第一种功能是一般工具网站没有的,现在对两种情况进行测试:

可以看到,两种方式的转换效果都还是不错的,也支持将转换得到的markdown保存到本地。

从上面的页面中也可以看到,hello world官方给出了html2md工具的开源地址,是「链接」,提到了包含的技术栈:

  • vue 前端三剑客之一,主张最少,具有高度灵活性的渐进式框架
  • nuxt 通过利用 Vue.js 和 Node.js最佳实践来构建高性能应用程序
  • express 基于 Node.js 平台,快速、开放、极简的 Web 开发框架
  • element-ui 宇宙第一 Vue 第三方组件库,有不服?
  • js-dom 一款可在 Node 环境下模拟浏览器的 API 的库
  • turndown 使用 JavaScript 将 HTML 转换为 Markdown
  • axios 易用、简洁且高效的 http库,支持浏览器和 Node 环境。
  • mavon-editor 一款基于 Vue 的 markdown 编辑器,支持所见即所得
  • sass 强大的 Css 预处理器之一

工具的架构主要如下:


主要是为自己有需要的小伙伴提供参考,可以在 开源代码的基础上进行定制,得到自己所需要的转换工具,也算是比较良心了,有需要的小伙伴可以自己去试试啊,或者可以点击程序员博客发文利器-html2md更新指南去了解更多内容吧。

3.sitdown

与前面过两个网站不同的是,这个平台只提供了一个demo,地址为SitDown (mdnice.com),页面示意如下:


可以看到,这个项目提供了对微信、从SDN和掘金等的支持,可以将多种形式的文章转为markdown。但是这个项目并未上线,更像是提供了一个开发指南和实现思路供需要的开发者进行参考。但是我们还是可以使用这个demo来进行转换的。

现在进行测试:

可以看到,转换效果和速度还是可以的,只不过还不支持对链接进行转换。当然,我们也可以进行进一步的封装,以达到我们需要的效果。

好了,今天的分享就到这里,不知道小伙伴们喜欢哪一个工具呢?都去试试吧。有自己用得比较顺手的工具也可以在评论区分享、让大家一起来体验下啊[鼓掌]

、成品效果

2、源码:利用 网页抬头、标题标签、段落标签、水平线、换行、字体加粗

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!--网页抬头-->

<title>中央气象局</title>

</head>

<body>

<!--大标题-->

<h2>中央气象台发布暴雨蓝色预警 北京地区局部地区有大雨</h2>

<p>

<!-- 二标题 -->

<h5>2021-08-07 21:00 来源:中国新闻网</h5>

<hr>

<!-- 三标题 -->

<h4>(原标题:中央气象台发布暴雨蓝色预警)</h4>

<!-- 四标题 -->

<h4>中新网8月07日电 中央气象台8月07日发布暴雨蓝色预警!</h4>

<!--正文 ↓-->

<p>

<strong>北京市气象台7日6时发布北京地区天气预报:</strong>今天白天晴间多云,北转南风二三级,

<em>最高气温33℃;夜间晴转多云,</em>南转北风一二级,最低气温23℃。今日是立秋节气。

双休日气温较高,湿度大,体感闷热,户外注意防暑降温勤补水。<ins>地质灾害风险较高,

请避免前往河道、山区游玩。</ins>周日夜间将有雷阵雨天气,请及时关注临近预报。

</body>

</html>


务人士在讨论工作

引言

在前端开发的世界里,提供用户友好的交互体验始终是我们的追求。其中一个经常被忽视却极其实用的功能就是让用户能够轻松地复制网页上的内容到他们的剪贴板。这种能力在各种场景下都能派上用场,比如让用户复制代码片段、优惠券代码、链接等等。本文将探讨如何使用JavaScript实现这一功能,以及在不同浏览器和设备上的最佳实践。

技术概述

复制内容到剪贴板的传统方法是使用document.execCommand('copy'),但这种方法已经被废弃,因为存在安全性和跨浏览器兼容性的问题。现在推荐的方法是使用navigator.clipboardAPI,这是一个现代的、安全的API,用于读取和写入用户的剪贴板数据。

核心特性和优势

  • 安全性: navigator.clipboardAPI只允许在用户交互(如点击事件)中使用,防止恶意脚本自动复制内容。
  • 跨平台: 支持最新版本的主流浏览器,包括Chrome、Firefox、Safari和Edge。
  • 异步: API是异步的,使用Promise来处理操作结果。

代码示例

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Content copied to clipboard');
  } catch (err) {
    console.error('Failed to copy to clipboard:', err);
  }
}

技术细节

navigator.clipboardAPI的核心方法是writeText()readText()writeText()接受一个字符串参数并将它写入剪贴板,而readText()则返回一个Promise,解析后为剪贴板上的文本。

分析技术特性和难点

尽管navigator.clipboardAPI提供了强大的功能,但它也有一些限制:

  • 权限: API需要运行在HTTPS环境下才能使用,除非在本地文件系统中运行。
  • 异步操作: 使用Promise意味着我们需要处理异步逻辑,对于不熟悉异步编程的新手来说可能是个挑战。

实战应用

假设你正在构建一个代码分享平台,用户可以在这里查看和复制代码片段。你可以使用navigator.clipboard.writeText()来实现一个“复制”按钮。

代码示例

<button id="copy-button">Copy Code</button>
<pre id="code-snippet">console.log('Hello, World!');</pre>

<script>
  document.getElementById('copy-button').addEventListener('click', async () => {
    const codeSnippet = document.getElementById('code-snippet').textContent;
    await navigator.clipboard.writeText(codeSnippet);
    alert('Code copied to clipboard!');
  });
</script>

优化与改进

在实际应用中,可能需要考虑一些额外的优化措施,比如增加用户反馈、处理API不支持的情况以及提高性能。

代码示例

async function copyToClipboard(text) {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    await navigator.clipboard.writeText(text);
    console.log('Content copied to clipboard');
  } else {
    // Fallback for browsers that don't support the Clipboard API
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    try {
      document.execCommand('copy');
      console.log('Content copied using execCommand');
    } catch (err) {
      console.error('Failed to copy to clipboard:', err);
    }
    document.body.removeChild(textarea);
  }
}

常见问题

问题: 在不支持navigator.clipboardAPI的旧浏览器中怎么办?

解决方案: 使用document.execCommand('copy')作为回退方案,尽管它已被废弃,但在某些情况下仍能提供基本功能。

总结与展望

复制内容到剪贴板的能力是前端开发中一个看似微小却非常实用的功能。通过使用navigator.clipboardAPI,我们可以安全、高效地实现这一目标。随着浏览器对现代API的支持不断增强,我们可以期待更多类似的功能来提升用户体验。在未来,我们可能会看到更多原生的API来简化开发者的工作,同时也为用户提供更安全、更流畅的互联网体验。掌握这些API不仅能够提升你的开发技能,还能让你的网站或应用程序在竞争中脱颖而出。