我一直觉得微信公众号是最难用的文章编辑器,直到我开始写知乎专栏。作为两个UGC内容为主的产品,用户体验如此之差真的大大降低了写作者的创作欲望。

基于这个痛点,滋养了一大批像365编辑器、壹伴、秀米等第三方微信图文排版编辑工具,但是页面杂乱繁复,模版花里胡哨,还要忍受粘贴后样式全乱的崩溃感。

有一天偶然在github上发现了lyric大神的微信公众号排版编辑器项目,可以直接将Markdown格式转换成微信的HTML,终于让我从操控感极差的自带编辑器中解放出来了!

在线版地址:

https://lab.lyric.im/wxformat
github项目地址:

https://github.com/lyricat/wechat-format
工具介绍:

https://mp.weixin.qq.com/s/pn0LzyfgUj6rGUfVHUksjg

微信公众号排版编辑器

Markdown

A.Markdown简介

Markdown 是一个 Web 上使用的文本到HTML的转换工具,可以通过简单、易读易写的文本格式生成结构化的HTML文档。

官网地址:

http://www.markdown.cn/#overview

Markdown官网首页

Markdown在15年前由作家和程序员共同开发创建,作为一个文本编辑语言它可以让你不用再花时间和心思在样式、排版、格式上,通过一些简单轻量的的语法,让你清楚写作层级,从而更加专注于写作本身,为你创建一种无干扰的写作环境,提升写作效率。近年来由于它的简便性,得到了越来越多写作者的喜爱,在各种写作平台上得到了蓬勃的发展,如果你厌倦了word或者其他传统编辑器没完没了的格式限制,不妨试试这种新型文本编辑形式吧,让我们回归写作本身。

我们可以设想这样一种场景,如果所有的主流内容网站都支持Markdown格式,那我们只需要编辑一份文档,并且在写作中就可以直观的看到它输出后的样式,即使在不同的平台发布,也不用再费时间去处理各个平台的格式问题,而且实现了样式的统一。

目前很多技术网站都支持Markdown的文本编辑格式,比如:简书、github。流行的笔记应用像有道云笔记,Bear也大多支持Mardown格式。

B.适用于微信公众号的常用语法

在官方网站上可以查看Markdow的完整语法,这里我主要简单整理一些公众号排版常用语法。

<1>标题

一级标题

二级标题

标题前面加两个“#”代表一级标题,加三个“#”代表二级标题,公众号只支持一级标题和二级标题,#和文字中间不要忘记加空格。

样式如下:

一级标题

这是一级标题

二级标题

上面是二级标题

<2>字体样式

斜体:英文输入法模式下输入一个“*”嵌套内容即可)

加粗:英文输入法模式下输入三个“*”嵌套内容即可)

删除线:英文输入法模式下输入两个“~”嵌套内容即可)

下划线:两个$符号中间包裹\underline{},{}里填写需要加下划线的内容即可。

这些基本的字体样式公众号已经提供了快捷按钮,了解即可。

样式如下:

斜体

加粗

删除线

<3>列表

  • 无序列表

1.有序列表

无序列表是“-”符号,空格加列表项,会在前方自动生成圆点样式。有序列表按照顺序编写序号,使用数字、一个英文句号和一个空格即可。。

样式如下:

•无序列表

1.有序列表

<4>引用

> 引用内容

引用内容是用“>”实现的,多个“>”符号还可以实现嵌套

样式如下:

引用内容嵌套

<5>图片

![图片alt](图片地址 '图片title')

图片alt就是显示在图片下面的文字,相当于对图片内容的解释。图片tilte就是图片的标题,当鼠标移到图片上时显示的内容,title可加可不加。

样式如下:

产品图片

<6>代码块

代码块

内联代码

微信官方针对代码块有高亮配色,粘贴至公众号后点击一下即可显示。

样式如下:

function filterMenu(html){
var $ = cheerio.load(html);
var arr = [];
$(".node-index").each(function(index,item){arr.push($(item).find("a").text().trim());
})
return arr;
}

<7>表格

| Header 1 | Header 2 | Header 3 |
| --- | --- | --- |
| Key 1 | Value 1 | Value 1
| Key 2 | Value 2 | Value 2
| Key 3 | Value 3 | Value 3
| Key 3 | Value 3 | Value 4

利用以上语法可以轻松在公众号中制作表格。

样式如下:

语言 职业 兴趣爱好
JavaScript 程序猿
PHP 码农
HTML5 攻城狮 rap和篮球

Markdown编辑器推荐

A.轻量级在线工具

stackEdit 官网地址:

https://stackedit.io/
github地址:

https://github.com/benweet/stackedit/

这是一个可以在任何浏览器中运行的开源编辑器,在谷歌浏览器的应用里搜索名字就能找到相应的插件,它能够实现同步编辑和预览,并且能将本地缓存同步到云端,以便跨多个设备同步文件,也可以从本地上传md文件进行编辑,完成后可以导出markdown格式或者html格式的文件。

界面干净简洁,功能强大,可以让用户方便的新建、删除和管理文档,你所有的操作它都会自动保存到浏览器缓存。如果你在编辑的时候偶尔忘记了Markdown语法,也可以在左上角菜单->settings->Utils->welcomedocument找到它的帮助文档。该项目在github中的标星已经达到了14380,足以可见它的受欢迎程度。

类似的轻量级在线工具:
dillinger.io :https://dillinger.io/
MaHua :http://mahua.jser.me/
MdEditor:https://www.mdeditor.com/

B.功能完整的本地工具

Typora

官网地址:

https://www.typora.io/
github地址:

https://github.com/benweet/stackedit/

刚开始看到Typora这款软件的时候就被它简洁美观的界面吸引,这是一个可以实时预览的免费编辑器,当你在文本区写完markdown语法,软件立马自动识别并且帮你转成markdown格式,插入本地图片的时候直接拖入即可,非常方便快捷,支持多种格式的导出,例如word和pdf,相信深入体验之后还会发现很多它的隐藏功能。

类似的功能完整的本地工具:
MarkdownPad :http://www.markdownpad.com/
MaHua :http://mahua.jser.me/
Miu:https://github.com/egoist/Miu

强推Markdown神器,一秒钟拯救微信公众号排版相关推荐

  1. 微信公众号排版神器Markdown Nice

    Markdown Nice 体验地址 公元2019年,微信公众号排版能力孱弱,始终为运营者所诟病,秀米.135编辑器等工具割据一方. 但无论是微信原生工具,还是其他编辑器,都让创作者不得不将有限的创作 ...

  2. 微信公众号使用Chrome插件:Markdown Nice优化微信公众号排版教程

    Markdown Nice 是一个为了解决微信公众号排版而生的 Markdown 编辑器,当前有在线编辑器和 Chrome 插件 2 种产品形态. 下面介绍Chrome 插件:Markdown Nic ...

  3. markdown字体颜色_Markdown转微信公众号格式

    直达链接: https://doocs.gitee.io/md/ Markdown语法简洁, 格式通用, 微信Markdown编辑器可以将Markdown即时渲染为微信图文,让你不再为微信文章排版而发 ...

  4. 轻松玩转微信公众号排版

    新手如何快速上手微信公众号排版? 有人推荐你秀米,有人推荐你壹伴等等.我在这里实名diss壹伴,我刚开通微信公众号那一天,迫不及待的想发一篇文章.我在某呼上看到有人吹壹伴甚至还有官方号自买自夸,我搞了 ...

  5. 用Typora+PicGo搞定多个平台发文和微信公众号排版

    文章目录 如何开启公众号写作新思路 1. 本文概述 1.1 适用人群 1.2 阅读完本文你可以获得什么 1.3 你需要什么 1.4 原理 2. 安装npm 3. 注册码云Gitee 3.1 新建仓库 ...

  6. php图文排版样式模版,微信公众号排版,我的妈呀,这些图文排版模板也太好看了吧!...

    原标题:微信公众号排版,我的妈呀,这些图文排版模板也太好看了吧! 胖友们大家好呀 我是135编辑器 [www.135editor.com]的三儿 上个月!还是上上个月! 不重要! 我们推送了一篇微信排 ...

  7. 微信公众号排版多少钱一篇?

    公众号运营可以拆解为文章撰写和图文排版,公众号推文可以整体来做,也可以拆开来做,当你写好公众号文章以后,再找专业的人士进行排版美化. 微信公众号排版多少钱一篇?今天伯乐网络传媒就来给大家聊聊这个话题. ...

  8. qlabel可以选中吗_惊现凡尔赛式排版!原来微信公众号排版样式还可以“变装”?...

    各位小伙伴们,要集中注意力了!接下来就是考验你们观察力的时候啦! 快跟着小妹儿看一下,一个样式到底能有多少种玩法?文中使用工具为公众号编辑器-小蚂蚁编辑器. 1.添加/删除背景 编辑器里的内容样式是可 ...

  9. 如何给你的微信公众号排版

    经常写文章的人,会发现微信公众号自带的编辑器不是很好用,用它来排版一篇写好的文章,往往要花费一两个小时,浪费了大量的时间,最后的排版效果也不是那么好.本篇文章将介绍如何利用markdown.css.h ...

最新文章

  1. 我们不雇佣数理逻辑不好的学生
  2. 静止无功发生器(SVG)原理简介及仿真验证
  3. FFmpeg再学习 -- FFmpeg+SDL+MFC实现图形界面视频播放器
  4. 狄利克雷分布公式_深入机器学习系列11-隐式狄利克雷分布
  5. mysql增删改查 工具类_JDBC工具类实现对数据库数据的增删改查
  6. 作业2结对(升级版)
  7. 兄弟j220怎么清零_兄弟打印机MFC_J220墨水回收盒满如何清零?
  8. tensorflow 变量共享
  9. 数据库系统 图书管理系统 C语言
  10. BT656与BT1120的区别
  11. 用supermemo背单词达到5000词条
  12. 照片视频制作软件哪个好?自动生成酷炫效果,3步快速搞定!
  13. 如何用excel做正交分析_利用Excel进行正交设计及分析
  14. 基于centos7的virtual box虚拟机lede和ikuai的多拨配置
  15. oracle 允许级联删除,oracle系列--级联删除和级联更新
  16. 2.命名空间实现机制
  17. 电竞达人最爱五款真无线蓝牙耳机,听声辨位低延迟TWS蓝牙耳机助你《夺冠》
  18. Codeforces 161 B. Discounts (贪心)
  19. 3个自由度搬运机械手设计【CAD图纸+毕业论文+电路图+梯形图+接线图】
  20. iconic 安装和使用

热门文章

  1. CSDN怎么改变字体颜色
  2. 程序员如何提升自己的代码质量?
  3. 网络保护第三层 WAF-网络应用防火墙
  4. Access Key / Secret key 密钥安全原理架构
  5. 电话机漏电流大引起电话交换机振铃
  6. 【转载】客单价是什么意思?如何提高客单价?
  7. Qt C++ 录屏录音功能实现(avilib+ffmpeg)以及动态库生成
  8. 5.3.3—二叉查找树—Validate Binary Sear Tree
  9. itween的抛物线线性移动
  10. 14款CSS3炫酷表单input输入框美化效果【附源码】