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

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

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

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

在线版地址:程序员

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

https://github.com/lyricat/we...
工具介绍:浏览器

https://mp.weixin.qq.com/s/pn...
微信公众号排版编辑器缓存

Markdown

A.Markdown简介

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

官网地址:http://www.markdown.cn/#overview
Markdown官网首页微信

Markdown在15年前由做家和程序员共同开发建立,做为一个文本编辑语言它可让你不用再花时间和心思在样式、排版、格式上,经过一些简单轻量的的语法,让你清楚写做层级,从而更加专一于写做自己,为你建立一种无干扰的写做环境,提高写做效率。近年来因为它的简便性,获得了愈来愈多写做者的喜好,在各类写做平台上获得了蓬勃的发展,若是你厌倦了word或者其余传统编辑器没完没了的格式限制,不妨试试这种新型文本编辑形式吧,让咱们回归写做自己。markdown

咱们能够设想这样一种场景,若是全部的主流内容网站都支持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/st...

这是一个能够在任何浏览器中运行的开源编辑器,在谷歌浏览器的应用里搜索名字就能找到相应的插件,它可以实现同步编辑和预览,而且能将本地缓存同步到云端,以便跨多个设备同步文件,也能够从本地上传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/st...

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

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

相关文章
相关标签/搜索