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

devopsec 等级 1033 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,如有侵权,请联系删除。

收藏
评论区

相关推荐

如何将Markdown文章轻松地搬运到微信公众号并完美地呈现代码内容
相信有很多童鞋跟我一样,热衷于用Markdown来编写文章。由于其简单的语法和清晰的渲染效果,受到广大码农朋友们的推崇。但是,当我们想维护起自己的公众号时,公众号编辑器往往让我们费劲了脑汁。本人尝试了各种工具,比如:秀米一些在线提供多种不同样式的编辑器。虽然这些编辑器都能够完成编辑任务,但是效果并不理想。与我们所追求的简洁、清晰风格总是格格不入,尤其是对于代
SimpleMarkDown编辑器离线版以及桌面应用版上线
之前,我们开发了。今天,我们又推出了离线版和桌面应用版。 主要功能:1. 页面简约; 2. 实时保存; 3. 一键清空内容; 4. 支持微信公众号、知乎、稀土掘金、CSDN等多个平台; 5. 可复制HTMl格式文本; 6. 可复制MarkDown格式文本; 7. 可下载为MarkDown文件;
markdwon常用语法
什么是markdwon?Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。Markdown 编写的文档后缀为 .md, .markdow
Markdown简介
Markdown是什么 -----------   Markdown 是一种完全由标点符号标记的**纯文本**,这些标点符号被Markdown赋予表达含义以使得文本看上去可以代表特定的语义,比如:`#`井号标记代表标题、`*`星号标记代表强调、`**`两个星号标记代表加粗。   Markdown 设计之初只是让写作文档和阅读文档变得更容易,因Markdo
VS Code实现markdown画流程图
安装最新的vscode编辑器,原生支持markdown语法。不会markdow的人可以去好好学下,写文档神器!!! 1、安装Markdown Preview Enhanced插件 ![](https://oscimg.oschina.net/oscnet/51c00974c0d771d52c9c93fcd2cf701b400.png) 2、本地新建
AMAZING! Typora + VLOOK 原来可以这样给你的 Markdown 文档添加封面、封底
写过 N 份 Markdown 的你是不是也曾想过,为什么 Markdown 就不能给上个封面呢? 哪怕是一个白底黑字的白封皮也行~ 直到有一天,在 OSChina 上看到一个份号称是用 Markdown 写的页面…… **这货的上半身是长这样滴:** ![上半身](https://tva1.sinaimg.cn/large/006tNbRwgy1g
Atom读写MarkDown插件选择,以及墙内安装markdown
1、Atom自带markdown-preview   功能太少,需要大量拓展。 2、markdown-preview-plus   功能还不错,但是其中的滚动条插件markdown-scroll-sync和最新版atom不兼容了,1年多未更新,github上全是那个bug的issue。 3、markdown-preview-enhanced   推
Chrome中实时查看
经常用Vim的朋友,在Vim中有一个Markdown语法高亮的插件,叫做:[vim-markdown](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fplasticboy%2Fvim-markdown) ,用起来还不错。 在Chrome中有一个实时预览Markd
Markdown
Markdown ======== > Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。 现在所写的语法就是Markdown语法 目录 -- * [语法结构](#语法结构) * [表格](#表格) * [图片插入](#图片插入) * [工具](#工具) * * *
Markdown 常用语法
README ====== 该文件用来测试和展示书写README的各种markdown语法。GitHub的markdown语法在标准的markdown语法基础上做了扩充,称之为`GitHub Flavored Markdown`。简称`GFM`,GFM在GitHub上有广泛应用,除了README文件外,issues和wiki均支持markdown语法。
Markdown 简明语法
关注我,每天都有优质技术文章推送,工作,学习累了的时候放松一下自己。 本篇文章同步微信公众号 欢迎大家关注我的微信公众号:「醉翁猫咪」 ![](https://oscimg.oschina.net/oscnet/up-1d5ae683f66a54eb857ab1a178a657b6.jpg) > 今天我们了解一下什么是Markdow
Markdown语法讲解及MWeb使用教程
写了一个月的博客,忽然感觉Markdown编辑器比较好用,于是就下载了一个本地的Markdown编辑软件学习了一下,刚好软件里自带了一篇英文的指示文档,顺便翻译了一下,通过这个过程也大致熟悉了Markdown语法,以后都会用Markdown来写文章了。 通过Markdown编辑器发布了几篇博客,**发现以下几个标签比较常用:** * 标题标签 *
ORM数据库框架 greenDAO SQLite MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 [MyAndroidBlogs](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fbaiqiantao%2FMyAndroidBlogs) [baiqiantao](https
RxJava RxPermissions 动态权限 简介 原理 案例 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 [MyAndroidBlogs](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fbaiqiantao%2FMyAndroidBlogs) [baiqiantao](https
RxJava 操作符 on和doOn 线程切换 调度 Schedulers 线程池 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 [MyAndroidBlogs](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fbaiqiantao%2FMyAndroidBlogs) [baiqiantao](https