美文网首页
从 markdown 到公众号编辑器说起

从 markdown 到公众号编辑器说起

作者: 思考问题的熊 | 来源:发表于2018-06-24 02:05 被阅读283次
美好生活从尝试开始

你的问题拆开了涉及如下几个知识点。

markdown是什么

一种纯文本的语法,用一些简单的符号做为标记,表示我们常见的某种“修饰”含义,比如字体加粗斜体 等等。按照 markdown 语法进行写作,使用能够解析这种语法的工具就可以生成可见的带有各种格式的文本。参考链接

微信编辑器是什么

与 markdown 这种纯文本语法对应的另一种格式叫做富文本格式(Rich Text Forma,RTF),接受这种编辑方法的工具叫做富文本编辑器,也就是通过鼠标的点击来展示输出格式,由微软公司开发。类似于我们的 word,微信编辑器等等。

你看到的是什么

从目前来看,几乎在所有屏幕上看到的文字都是通过HTML(超文本标记语言)标记语言来展示的,比如所有的网站网页和绝大多数移动应用。无论是 markdown 还是富文本格式,他们标记出来的东西只要是呈现在网页上,就都需要被转换为HTML格式。随后浏览器使用 HTML 标签和脚本来诠释网页内容,但不会将它们显示在页面上。而在HTML 中又可以嵌入 CSS (层叠样式表)来定义文本的外观和布局。

两者是如何实现转化

既然markdown,富文本和HTML(CSS)都是用来给我们的文字内容定义外观和布局的,那么他们三者之间就一定可以通过一些方法相互转换。我们平时需求最多的是把markdown转换为富文本,也就是题目中说的要在公众号中保存发表。这个过程我们称之为渲染。markdown的好处就是把本来必须要我们自己分开做的输入内容和排版工作合二为一了,所有的排版都可以被我们在键盘上打出来,然后交给编辑器去解析为其它格式,最常见的是解析为HTML格式,然后再复制富文本格式到富文本编辑器中。

在线工具有哪些

目前常见的在线格式转换器有如下几个,排名有先后:Md2AllPhodal2md 。这些在线工具的开发者都是一线的大牛程序猿。

它们的本质思路就是如上面讲的,把markdown语法转变为html语法,通过css的设定展示排版。至于为什么每一个解析出来的样子都不一样,就是因为他们每一个markdown标记语法对应的css解析格式不一样。比如有人把markdown 的# (一级标题)解析为 h1 {color:red; font-size:14px;} 有的人就会解析为 h1 {color:black; font-size:20px;} 。那么后者的颜色和字体大小就都和前者不一样。你提到的 markdown here 也是这么个逻辑。

我们可以怎么做

如果你觉得所有目前已有在线编辑器给出的渲染方式都太丑,就可以写一个属于自己的CSS文件进行渲染。然后把这个你写好的CSS文件放在一个支持自定义CSS文件的编辑器里。你渲染出来的格式有多美现在就只取决于你自己。所以,不要甩锅。

图片怎么渲染

引文markdown本身是纯文本的,他要插入图片也有自己的语法,就是[图片上传失败...(image-a2aa25-1529777790400)],这个路径就是图片的位置,如果你的图片在本地就是你计算机的路径,如果这个图片在网络上,那这个路径就是你这个图片的网络地址。

所以,要想能够所谓的支持渲染图片,你这个图片位置就不能是本地的路径,只能是网络地址。那么我们自己的图片如何才能获得一个属于他自己的网络地址呢,类似这样![](https://img.haomeiwen.com/i177622/718197433639ec25.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)?这里就涉及到了图床的概念。所谓图床,就是图片在网络上的床。首先把图片传到网络上,然后这个存储图片的地方会给你生成一个专属的图片地址。常用的图床类云服务存储比如七牛云,而图床管理工具我常用的是极简图床

当然,如果自己学会使用图床工具对你有难度,你又一定要渲染支持图片。还有一个曲线救国的方法。那就是利用已有的支持图片上传的在线文本编辑平台,比如幕布或者简书等等。你的图片一旦上传到简书,就意味着有了一个自己的地址且免费的用了简书的云服务器,可谓一举两得。

具体操作方法如下,申请一个简书账号,把文本编辑器调整到 markdown 格式,然后把本地图片直接往编辑器上拖,接下来就是见证奇迹的时刻,他会自动给你生成一个markdown格式的图片地址。复制使用即可。你可以把一篇文章设为私密,专门就用来存放图片。想想真是既省心又开心。多说一句,你也可以在简书上用 markdown 来写,然后打开预览模式直接复制,就可以完成你渲染图片的目的。只不过不能自定义格式罢了。

最终推荐:

  • 在线编辑器 Md2All
    使用说明 ,支持自定义 css 格式和图床功能。

  • 本地编辑器 typora
    typora 是一个目前win端最好用和mac端最好用之一的markdown编辑器。它基本上可以满足你对 markdown 写作的一切幻想,尽管目前还是beta版本。但也正因为是beta版所以还有个一巨大的优势:所有功能免费。
    这里面就包括了样式丰富的第三方渲染主题以及支持自行编写CSS文件。在偏好设置中打开主题文件夹,就能看到CSS文件。关于这个软件的介绍使用说明GitHub地址第三方主题 ,你甚至可以自己写一个主题提交给开发者。
    typora 的特点是实时渲染,写完了直接复制到编辑器就可以,再配合上你薅简书的图床羊毛,齐活。

对了,typora的作者是个中国人,91年生,毕业于上海交大。其它信息不详。
另外,如果你问我CSS怎么写,点击这里 。这年头,写个公众号都得学一点点前端了。
最后,这篇文章已经包括了基础的语法,如果你感兴趣,可以全文复制然后放到这里 去看看。当然,如果不渲染也不影响理解,你说是不。

相关文章

  • 从 markdown 到公众号编辑器说起

    你的问题拆开了涉及如下几个知识点。 markdown是什么 一种纯文本的语法,用一些简单的符号做为标记,表示我们常...

  • 微信公众号 Markdown 编辑器

    微信公众号文章 Markdown 在线编辑器,使用 markdown 语法创建一篇简介美观大方的微信公众号图文。由...

  • 公众号Markdown编辑器

    简介 这款编辑器可以将 Markdown 转换成微信公众号编辑器的样式,只需将 MD 文档复制到左侧栏,再在右侧栏...

  • 接触公众号1年,我同时拥有了3份收入

    我从2019年1月(大一上学期)开始接触公众号,从自己摸索编辑器到自己排版,自己创办个人公众号、运营校园官方公众号...

  • 给朋友看的「设计小基础」

    因为微信公众号的编辑器,能够排出比简书更好的版式。(哪怕简书有markdown) 你可以选择看微信公众号的版本,特...

  • 当你跳入死亡谷的时候,游戏就开始了

    因为微信公众号的编辑器,能够排出比简书更好的版式。(哪怕简书有markdown) 你可以选择看微信公众号的版本,特...

  • 程序员如何排版公众号文章

    微信公众号的编辑器之难用实在令人无法忍受,因此滋生了很多公众号排版工具。作为一个非 markdown 无法写作的程...

  • Objectified - 设计面面观

    因为微信公众号的编辑器,能够排出比简书更好的版式。(哪怕简书有markdown) 我个人强烈建议你看微信公众号的版...

  • 11.26 打通MD笔记系统

    这段时间比较喜欢Markdown编辑器码字,主要用于发布文字到公众号或简书。 但一直没找到能够打通多设备的工具。一...

  • 2020-06-01 Day01 MarkDown语法学习

    一. Markdown 编辑器设置 1. 注册简书 微信注册,绑定手机号。 2. MarkDown 编辑器设置 登...

网友评论

      本文标题:从 markdown 到公众号编辑器说起

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