如何将Markdown文章轻松地搬运到微信公众号并完美地呈现代码内容

devopsec 等级 557 0 0

相信有很多童鞋跟我一样,热衷于用Markdown来编写文章。由于其简单的语法和清晰的渲染效果,受到广大码农朋友们的推崇。但是,当我们想维护起自己的公众号时,公众号编辑器往往让我们费劲了脑汁。本人尝试了各种工具,比如:秀米一些在线提供多种不同样式的编辑器。虽然这些编辑器都能够完成编辑任务,但是效果并不理想。与我们所追求的简洁、清晰风格总是格格不入,尤其是对于代码的展示非常的不友好。所以,这里给大家推荐一个本站的在线工具,可以帮助大家快速地把Markdown文章转换成微信公众号支持的漂亮格式。

首先奉上本文即将介绍的工具地址:https://md.openwrite.cn/

最新版本https://md.openwrite.cn/

全新的用户体验,已远优于下面的介绍,建议直接进入体验!

使用方法

该工具的使用非常非常简单,点击http://blog.didispace.com/tools/online-markdown/打开在线编辑器之后,左侧为编辑器、右侧为预览区。

我们只需要将我们编辑的Markdown文档原始内容复制进去,右侧的预览区就会自动渲染出非常友好的页面结果。如下图可见,标题、正文、代码等都得到了非常好的呈现:

如何将Markdown文章轻松地搬运到微信公众号并完美地呈现代码内容

接着,我们要做的就是把这些内容发布到微信公众号中,过程也非常简单,只需要点击“复制”按钮,右键页面,选择“复制”。再打开微信公众号的图文编辑,在编辑框中完成黏贴,我们可以看到之前在编辑工具中的结果样式也被一同被复制过来了:

如何将Markdown文章轻松地搬运到微信公众号并完美地呈现代码内容

通过上面的方法发布的文章将获得如之前所见的、非常友好的排版格式。同时,对于代码的展示也非常的清晰,不会出现杂乱无章的换行,同时对于代码的高清也处理得当。即使在窄屏的手机端,代码格式也不会被积压变形,读者可以通过左右滑动的方式来查看完整的代码内容:

如何将Markdown文章轻松地搬运到微信公众号并完美地呈现代码内容

到这里,一篇文章的搬运工作就完成了,是不是很简单呢?如果你也和我一样,有很多markdown的文章需要做迁移,不如来尝试一下这个在线工具吧!

关于

该工具是一个开源项目:https://github.com/dyc87112/online-markdown ,欢迎大家给予Star和Follow支持!!!

该工具改编自胡子哥哥的开源项目:https://github.com/barretlee/online-markdown ,增加了一些改动,比如:编辑栏与预览栏的左右布局。

之后计划增加更多的样式设置,也欢迎大家提出宝贵的意见。

本文转自 https://blog.csdn.net/dyc87112/article/details/77417572,如有侵权,请联系删除。

收藏
评论区

相关推荐

【Typora】Typora 完全使用详解
<font color"FF0000"Matrix 精选</font Matrix(https://sspai.com/matrix) 是少数派的写作社区
一个免费的开源的html转markdown语法的工具
一个免费的开源的html转markdown语法的工具 大家好,我是待兔,今天为大家分享一个由 www.helloworld.net 网站开发并开源的一个非常好用的工具 html2md 现在好的技术文章确实多,每天各种技术群里,各种技术社区,有很多质量非常好的技术文章,于是我们就收藏了,可是问题来了,我们收藏到哪呢? 怎么收藏呢? 1. 微信群里发的文
如何将Markdown文章轻松地搬运到微信公众号并完美地呈现代码内容
相信有很多童鞋跟我一样,热衷于用Markdown来编写文章。由于其简单的语法和清晰的渲染效果,受到广大码农朋友们的推崇。但是,当我们想维护起自己的公众号时,公众号编辑器往往让我们费劲了脑汁。本人尝试了各种工具,比如:秀米一些在线提供多种不同样式的编辑器。虽然这些编辑器都能够完成编辑任务,但是效果并不理想。与我们所追求的简洁、清晰风格总是格格不入,尤其是对于代
微信小程序验证身份证号
验证身份证号格式,笔记 var that this that.optional()是验证是否为空方法 idcard(idCard) { var regIdCard that.optional(idCard) || /^19d{5}(18|19|(23d))d{2}((019)|(10|1
微信小程序验证邮箱,验证手机号
笔记类 var that this that.optional()是验证是否为空方法 / 验证邮箱格式 / email(value) { return that.optional(value) || /^azAZ09.$%&'\/?^_{|}@azAZ
服务号跳转微信小程序的坑
服务号跳转微信小程序一直报错 {"errcode":40165,"errmsg":"invalid weapp pagepath hint: 8yDcBa01023942"}
微标题信公众号文章,阅读数,点赞数历史文章抓取
微标题信公众号文章,阅读数,点赞数历史文章抓取 需求 最近在做舆情与微信文章相关的数据抓取,发现微信公众号有些难点很难克服。市面上流行的数据抓取思路要么被腾讯封杀,要么操作难度大。 解决方案 搜狗微信 无法采集历史,而且搜索也不按时间排序。获取的数据的价值不高,仅仅可以通过他获取公众号的biz。 微信公众平台 微信公
PHP 微信公众号消息加解密
公众号配置根据提示设置即可:【图中信息均为无意义数据,仅供参考。注意服务器地址需可接收 GET/POST 两种请求】 AESKey 直接点一下随机生成即可,Token 可以生成一个 UUID 再把 UUID 进行 MD5 一次即可。 接收关注事件消息示例 请求参数校验这一步根据项目情况,可供参考:(Lumen 框架)php$valida
Markdown基础语法学习
Markdown学习 标题 三级标题 : +空格+标题 四级标题: +空格+标题 一级、二级以此类推(最多六级) 字体样式hello world &nbsp;&nbsp;斜体:&nbsp; hello world (注意星号和单词之间是没有空格的,下同)hello world&nbsp;&nbsp;加粗:&nbsp;&nbsp; hello wor
SimpleMarkDown编辑器离线版以及桌面应用版上线
之前,我们开发了。今天,我们又推出了离线版和桌面应用版。 主要功能:1. 页面简约; 2. 实时保存; 3. 一键清空内容; 4. 支持微信公众号、知乎、稀土掘金、CSDN等多个平台; 5. 可复制HTMl格式文本; 6. 可复制MarkDown格式文本; 7. 可下载为MarkDown文件;
我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器(开源)
前言之前,一直想开发一款属于自己的Markdown编辑器,主要是自己平常写文章可以更加灵活操作,另外扩宽自己的视野也是非常不错的选择啊!所以在周末就决定玩耍一番。首先我调研了很多线上热门的md编辑器,都很优秀。不为超过他们,主要自己用着舒服点。这篇文章主要是记录下我是如何从0到1是完成一款还算拿得出手的Markdown编辑器。完成项目一览调研Markdown
手写一个仿微信登录的nodejs程序
前言首先,我们看一下微信开放文档中的一张图:上面的一幅图中清楚地介绍了微信登录整个过程,下面对图上所示进行总结:一、二维码的获得1. 用户打开登录网页后,登录网页后台根据微信OAuth2.0协议向微信开发平台请求授权登录,并传递事先在微信开发平台中审核通过的AppID和AppSecrect等参数; 2. 微信开发平台对AppID等参数进行验证,并向
markdwon常用语法
什么是markdwon?Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。Markdown 编写的文档后缀为 .md, .markdow
Vue引入mavon-editor插件实现markdown功能
Vue引入mavoneditor插件实现markdown功能说明 mavoneditor是一款基于Vue的markdown编辑器,因为当前项目是采用Nuxt,所以这里所展示的教程是针对Nuxt引入mavoneditor插件,如果你只是采用了Vue,没有用Nuxt框架,那么你可以看mavoneditor官方文档,有详细说明,其实它们只有在引入mavonedit
NDK 开发实战 - 微信公众号二维码检测
关于二维码识别,我们一般都是用的 或者 ,但它们的识别率其实不是很高,有些情况下是失灵的,比如下面这两张图:使用开源库 扫描以上两张二维码,有一张死活不识别。使用微信是可以的,大家可以用支付宝试试(不行),那碰到这种情况到底该怎么办呢?哈哈,这次终于有用武之地了,我们琢磨着来优化一把。我们在微信公众号都用过这么一个功能,长按一张图片,如果该图片包含有二