美文网首页超实用工具干货Share电脑skill
Markdown两键排版微信公众号文章

Markdown两键排版微信公众号文章

作者: 王树义 | 来源:发表于2016-10-06 20:02 被阅读11020次

目前已知最简单的微信公众号文章插图与排版方法。零基础图文教程。教会了也不收费哦。 :-P

痛点

前些日子,我写了一篇《Markdown懒办法排版微信公众号文章》,很受读者欢迎。简书平台上该文的统计数据如下:

在留言和私信中,读者们问了不少问题。

有人特别烦插图。本地图片链接是没法正确在微信公众平台显示的。因此先要找到图,存到电脑上,然后上传到某个图床。传完了之后还得获得链接,然后再插入到 Markdown 里面。一两张图也就罢了,多了可着实受不了。

有人搞不定排版。我之前给出的 wangEditor 许多人试了,表示方法可以行得通,但是转换 HTML 的过程依然很麻烦,还得另外使用第三方工具Marked 2。其他人推荐的 Markdown Here 虽然用起来更方便,可是必须借助第三方在线编辑器的中转。直接插图的话,在微信公众平台预览好好的,一发到手机上图就都不见了。

很多人都已了解 Markdown 写作的优势,网上也有许多各有特色的 Markdown 编辑器可供大家选择。但这似乎无法满足公众号作者们的需求。

真的没有什么工具真正找准了用户痛点,方便地解决了上述问题吗?

两键排版

前几天,我偶然从一家正版软件商的推送邮件里发现了一款国产的 Markdown 编辑器。

这款编辑器排版微信公众号文章,只需要点击两个按键。

首先点击上图中左下角的云图标,选择其中的“开始同步”。

其次点击右下角的导出按钮,选择其中的“复制为微信公众号格式(beta)”。

好了,进入微信公众平台写作区域,粘贴一下。

这就是你在编辑器里面看到的排版效果了。

方便不?

实话实说,我觉得还是有些繁琐。既然第二个按键依赖第一个按键。干脆功能合并,不就能“一键排版”了吗?

插图

有的人看到这里可能跃跃欲试了。但是有的读者可能觉得没啥了不起——我用 Markdown Here ,一样可以轻易实现这功能啊!

不一样。这款软件的插图功能让普通的 Markdown 编辑器望尘莫及。

直接输入 Markdown 图片链接,或者拖拽等插图常规动作此处略过不提,咱聊聊特色插图功能。

无须下载图像

例如你在Google图片里面发现一张图挺好。无须下载,你只需要点击复制图片。


然后直接在这款编辑器里面粘贴,插图完毕。

手机图片秒传

你的手机上可能有照片、截屏或者是各种应用中搜集来的图片素材。你要是想放到文章里面,怎么办?

AirDrop? 还是大多数人可能更习惯的QQ?

都不用。在你打算插图的地方点击编辑器下方WiFi按钮。选择插图到编辑器。

于是屏幕上会出现一个二维码。

用微信扫描一下。选择插图的来源,就可以快速把一张或者多张图送到编辑器里面了。

方便吧?

图片属性设定

你还可以调整导出时的图片属性。在图片右方选择“编辑图片”功能,就可以设置缩放率,最大宽高,甚至是图片的浮动效果。

有意思的是,编辑器根本就不需要修改原图。对于许多人来说,这是个非常有用的小功能。

思考

问题来了:既然存在这么方便的编辑器,为什么那么多人还在用极为原始的手动方式排版微信公众号文章,而且为之烦恼不已呢?

是因为软件太新,大家没听说过吗?

不是。写作本文的半年前,各路科技网媒就纷纷报道过它。许多编辑和作者对这款软件的“黑科技”功能赞不绝口。在这些报道中,刚才我提到的功能都获得了大篇幅的介绍。

是因为软件太贵,大家买不起吗?

标准版50多元,专业版100多元。对于许多公众号作者来说,这笔投资虽然不算小,不过跟省下的时间和拯救的心情比起来,总还是划算的吧?

那问题究竟出在哪里呢?

出在软件功能设置上——大部分用户倒在了半途。

这款软件的作者们显然是极客,他们发掘到了许多微信公众号作者们梦寐以求的需求。但是他们大概忘了,自己产品的用户可不都是极客。

编辑器的帮助文档确实已经很详细了。但是对于技术小白来说,还远远不够。普通用户并不是在接受软件技术培训,而只是想方便地写文章、插图和排版。他们没有强烈的探索欲望。一旦他们见到了陌生的名词术语,甚至是使用遭遇了挫折,很快就会选择放弃

下面我带着大家一步步完成该软件的配置,你就知道哪些地方是潜在的了。

好在只需要这一次设置,以后你就可以像我刚刚演示的那样“两键排版”了。 :-)

设置

设置分成两个主要环节。一个是插图需要的图床空间,一个是排版样式。

图床

这款编辑器支持以下4种类型的存储空间作为同步图床。

许多人在这一步就卡住了。用户想当然认为这种专业的存储空间都收费,自己的个人微信公众号没有必要花钱用这么专业的玩意儿。没有人告诉他,七牛免费版就可以提供10G存储空间,作为一个微信公众号的图床绰绰有余。

请注册一个七牛账号。全中文提示,相信自己,你没问题的。注册完成后请登录,你会看到如下界面。

点击“对象存储”框中的“立即添加”按钮,输入一个任意的空间名称,这里我用的是"blog"。

其他的选项都不要动,然后点击下方的“确定创建”。恭喜你已经有了自己的免费图床了。

创建完毕之后,进入管理页面。你会看到测试域名栏目下面有一个以“clouddn.com”结尾的链接。这是域名,很重要,请把它保存下来,一会儿用。

点击右上角的“个人面板”,选择“密钥管理”。

如果注册的时候没有创建过密钥,此时点击“创建密钥”。然后你就能获得两串至关重要的字符串,分别叫做AK和SK。你不用知道它们是做什么的。只需要保存下来,并且确保你不要把它们告诉任何人

好了,下面我们回到这款编辑器,点击左下方云图标。第一次点击会提示你设置。请看下图。

AccessKey和SecretKey分别填写刚才你记录下来的AK和SK。

空间填写你刚才创建的空间名称。例子里面我们用的是blog。

前缀路径不要动。

域名填写刚才记录下来的以“clouddn.com”结尾的链接。

不要点击"OK",点击“重置同步”,出现警告信息直接确认即可。

然后点"OK"。

你的图床设置全部搞定,从此就可以随心所欲插图了。

排版风格

你还需要设置一下微信公众号文章的排版风格。风格由一个css文件控制。

网上这样的css文件有很多,大家根据自己的口味各取所需吧。请选择并下载一个。

我用的是王小杰版本

注意本例这个css是针对Markdown Here来设置的。你用的时候需要做一些微调。不然正文字体直接按照编辑器字体输出。对于我这种喜欢用大字儿写作的人来说,微信排版出来的效果可谓“是可忍孰不可忍”。

下面我们讲讲具体如何设置。

拷贝css文件内容到剪贴板。

打开编辑器左下方的扳手按钮,选择第二个标签页“Markdown模板”。

在最下方的文本框里面,把css文件的内容粘贴进去。请注意原先第一行的:

.markdown-here-wrapper{

替换为:

p{

点击确定。

样式设置搞定!现在你也可以尝试“两键排版”了。

建议

对于一个企业来说,资源是有限的,各项工作不可能面面俱到。但是对于一个有特色、痛点抓得准的产品来说,把使用方法与(潜在)用户进行有效沟通是非常必要的。

许多微信公众号写作者只是需要这样一篇简单的、可实际操作的介绍文章,就能深切地体会到产品的好处。用户只知道软件产品某个功能存在是不够的,只有他自己可以上手这个功能,实际获得了收益,他才有意愿付费,甚至是进行口碑宣传。

千万不要假设你的用户拥有和你一样的技术能力,更不要在讲解和答疑的时候对他们不耐烦,随便跳步。那些小众用户可能更符合你的用户设定。他们会率先尝试你的产品,对各项功能迅速心领神会。

但是他们其实是最难伺候的。不是吗?


延伸阅读:

相关文章

网友评论

  • 五更澡堂:都没说是哪个软件?
  • 五更澡堂:都没说是哪个软件?
  • Sasa0120:谢谢分享:smile:
  • 跃啊跃:老师您好,我按照您的步骤选择其中的“复制为微信公众号格式(beta)”复制到微信公众平台,但是仍然什么样式也没有,不知道为什么。。
  • 颜家大少:可以试试免费的markdown工具Md2All :http://md.aclickall.com
    为解决微信公众号各种排版问题而生。
    解决各种样式,图片丢失的问题,
    解决换行的问题
    解决代码块的显示问题
    支持一键排版,支持css模板样式选择,和自定义css样式。
    颜家大少:@神的指纹 因为我常用三级标题。有很多不同样式的模板给你选择,不合适的就自己定义。
    神的指纹:这个三级标题的样式有些奇怪,居然比二级标题还大
  • 4aaa6df801d1:从头看到尾也没发现再说的是什么app……:cold_sweat:
    4aaa6df801d1:@王树义 嗯 看到了
    王树义:你得把评论区顺便看一下。:smile:
  • 颜家大少:关于Markdown到微信公众号在转换时所遇到的种种问题,我自己做了一个在线的tool,网址是:http://md.aclickall.com
    另外写了一篇公众号介绍此tool: https://mp.weixin.qq.com/s/Z7f9QUkEK21wgySUjrtmfg
    主要解决各种常见的转换问题,如下:
    1. 解决换行符丢失,导致的行错乱问题;
    2. 解决代码块换行不正确,显示有错乱,或位置重叠的问题;
    3. 解决在iPone,iPad等平台上代码溢出时不会滚动的问题
    4. 增加很多很酷的代码块高亮风格
    5. 另外支持把渲染好的内容直接copy到csdn博客的html模式编辑器中

    如果有什么问题,欢迎反馈,谢谢
  • lei__:你现在微信公众号发文章用的是MarkEditor吗?体验如何?想入手。
    王树义:@Sisyphus60 我写这篇文章的时候,wangeditor一切正常。前几天再用,确实也遇到了你说的这个问题。原因未知。我暂时的替代性方案是用UEditor来替代。地址为http://ueditor.baidu.com/website/onlinedemo.html,你可以试试。
    lei__:@王树义 为什么使用 wangeditor时,我把简书的Markdown的文字粘贴过去后,文字都没有换行了。
    王树义:@Sisyphus60 我目前的工作流程请参考这篇文章:http://www.jianshu.com/p/4dec5b931b27
  • 依然范特稀西:你好,谢谢你的文章,我现在用的Markdown here,转换之后图片显示不了,要怎么插图呢
    王树义:@依然范特稀西 试试这样的流程:打开135编辑器(135editor.com),把简书的Markdown内容拷贝进去,执行Markdown Here渲染。如果图片能正确渲染,全文拷贝到公众号编辑器。
    依然范特稀西:是这样的,我一般写作用的简书的编辑器,然后图片是简书上传到了自己的服务器,我将写好的拷贝到微信公众号编辑器,然后用markdowns here 渲染,图片就显示不了,这种情况要怎么插图呢?
    王树义:@依然范特稀西 如果图床设置无误,换一个浏览器试试看
  • e49ec1bfb485:经过一番测试,发现在win 7 下,最兼容的居然是IE 11.
  • 逸之飘520:问题来了,假如我是在windows平台下呢?
  • 越峰者:请教王老师,为什么我的导出选项里没有公众号的选项呢?
    越峰者: @王树义 我知道了,没升级Pro版,现在有了😅
    王树义:@越峰者 没有遇到过这种情况。问问客服吧。
  • 7a7731469652:纯干货,感谢分享。得好好研究一下。
    王树义:@汉哥的远征 🤝
  • 小7:我用了pro版本,复制到firefox浏览器里,貌似图片还是无法复制过去呢?请问如何解决呢
    王树义:@小7 之前简友尝试了不同浏览器,发现firefox对该软件兼容性最好。如果还是不行,给官方客服发信问问吧。
  • Gutierrez:同步七牛云无效,AK、SK、域名都填了,显示日志里为空
  • 豫见焦作:欢天喜地买了个pro版,结果发现导出微信公众号样式在windows的各个浏览器下都不支持,快疯了。
    王树义:@豫见焦作 不客气
    豫见焦作:@王树义 cherome试了不支持,Firefox支持。谢谢。
    王树义:@豫见焦作 试试chrome和firefox
  • 王小杰在路上:css代码已经更新 .markdown-here-wrapper{ 改为 p{ 了
    王树义:@王小杰在路上 太棒了!谢谢!:smile:
  • 齐涛道长:我也用了ME,就是看到他的专业版的直接导出微信公众号格式的功能,但是我遇到一个问题,在设置七牛的时候,配置和您图中是一样的,但是查看日志都提示incorrect region, please use up-z2.qiniu,com,您知道是哪里的问题么?谢谢!
    齐涛道长:@王树义 我最近还发现一个问题,其实算是微信的问题,就是带图片粘贴的,如果有多个图片的话,用ME也是没办法的,因为微信他有个接口只支持单张图片上传。解决办法就是单独去预览页面复制每个图片,贴到微信编辑器里,然后就可以自己上传。
    王树义:@齐涛道长 很高兴看到你的问题已经解决了。没错,华东区是必须的。我也不止一次遇到过图片粘贴失败的情况,我的办法是——“再粘贴一遍”。有时候需要重复3遍,才能完全正确显示。又一次弄了5遍也没有搞定。我于是手动处理了那一张图。考虑到这个办法可以帮我解决90%以上的图形问题。这点儿小麻烦也就忍了。 :-P
    齐涛道长:发现了,原来是只能用华东区。。。重新建了一个华东区的OK了。不过复制到微信的时候,提示有1张图片粘贴失败了。不太清楚是网络问题还是什么。如果能解决掉图片的问题,那真是太有用了
  • Go_361:今天 好不容易看完您的文章,满怀信心地 开始一步步跟着做,买了MarkEditor Pro,申请设置好七牛 , 点击上图中左下角的云图标,选择其中的“开始同步”,
    其次点击右下角的导出按钮,选择其中的“复制为微信公众号格式(beta)”,进入微信公众平台写作区域,粘贴一下。
    样式全都没有过来,所有的样式都消失了,图片也没有了!! :sob:
    不知道是哪里出了问题???
    王树义:@iWolfgang 请见简信。 :-)
    a85358eb29d5:王老师,我也遇到了图片在公众号编辑页面不显示的问题,请问应该如何解决呢?谢谢。
    王树义:@程元乐 见简信
  • Hallie果果:谢谢老师的指点,正需要呢!!!一字不拉得看完了,window版本的软件也下载好了。等等下个月发工资就买个PRO版本,谢谢
    王树义:@Hallie果果 不客气。加油!:smile:
  • a85358eb29d5:王老师,非常感谢您写这篇文章分享在互联网上,我已经开始使用该款软件了,希望继续学习排版风格的制作,创造出属于自己风格的样式,不知可不可以今后分享更多关于此类的文章,谢谢。
    王树义:@iWolfgang 不客气,很高兴能有帮助。如果找到了新的好工具,我愿意分享给大家。:smile:
  • 星星说要快乐:老师好:blush::blush:
    王树义:@星星说要快乐 一百来号人你让我怎么猜啊?:yum:
    星星说要快乐:@王树义 上学期上过您的信息系统开发
    王树义:@星星说要快乐 你是哪位? :-P
  • 6a77957dfbac:很实用
    王树义:@迷猴淘 谢谢!
  • 朱光宇:谢谢分享~
    王树义:@朱光宇 :smile:
  • 0cec3f2644ac:……那么这款工具叫什么?
  • 0cec3f2644ac:还是没看出来这款牛逼的的工具到底叫什么?
    王树义:@懒人酱 厉害:+1::blush:
    懒人酱: @0cec3f2644ac Markeditor,微信传图那张图里有,作者藏的挺深😂
    马腾Madao:@0cec3f2644ac 我也没看出来:scream::scream:

本文标题:Markdown两键排版微信公众号文章

本文链接:https://www.haomeiwen.com/subject/anoeyttx.html