热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

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

我一直觉得微信公众号是最难用的文章编辑器,直到我开始写知乎专栏。作为两个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](图片地址 &#39;图片title&#39;)

图片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


推荐阅读
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • 如何实现织梦DedeCms全站伪静态
    本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ... [详细]
  • EPICS Archiver Appliance存储waveform记录的尝试及资源需求分析
    本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程,并分析了其所需的资源容量。通过解决错误提示和调整内存大小,成功存储了波形数据。然后,讨论了储存环逐束团信号的意义,以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大,每天需要近250G,一年需要90T。然而,储存环逐束团信号具有重要意义,可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 如何去除Win7快捷方式的箭头
    本文介绍了如何去除Win7快捷方式的箭头的方法,通过生成一个透明的ico图标并将其命名为Empty.ico,将图标复制到windows目录下,并导入注册表,即可去除箭头。这样做可以改善默认快捷方式的外观,提升桌面整洁度。 ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • 本文介绍了一些好用的搜索引擎的替代品,包括网盘搜索工具、百度网盘搜索引擎等。同时还介绍了一些笑话大全、GIF笑话图片、动态图等资源的搜索引擎。此外,还推荐了一些迅雷快传搜索和360云盘资源搜索的网盘搜索引擎。 ... [详细]
author-avatar
潘巧军_837
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有