美文网首页markdown公众号
如何优雅地排版微信公众号

如何优雅地排版微信公众号

作者: 蒹苍苍 | 来源:发表于2018-11-27 10:42 被阅读0次
    图腾

    为什么要用 Markdown

      大家都知道公众号只支持富文本写作,这就有了很大的限制,尤其对于程序员来说很不友好,不能插入代码成了很多人的痛点。

      而往往你看到的很好看的排版,这也是人家经过了几个小时的选材排版后的结果。虽然市面上也有很多排版网站,如:秀米、135 、365,不否认它们都很优秀,但是要想有一个不错的排版,也是费尽心力。

      而现在有一种只需要关注语法本身,不需要担心排版的 神器 —— Markdown

      Markdown 是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。

      其语法简单易用,富文本能做到的它都能做到,同时又支持 HTML、以及代码插入,很受程序员喜欢。

      Markdown 编辑器

      Markdown 只是一种语法格式,使用它写作,只需要记住简单的几个语法即可。正所谓:工欲善其事必先利其器,你现在还需要一款合适的能够支持 Markdown 语法的编辑器。

      推荐几款比较好用的编辑器:

    • Typora:所见即所得,神器,推荐

    • VScode:巨硬家族,很棒

    • Sublime Text:需要安装插件

    • Atom:GitHub 推出,转为程序员设计,很强大

    • 简书:一个写作平台

      上面五种编辑器,除了 Typora 与简书以为,其余三种都需要自己配置 Markdown 插件,在这里不在赘述。

    Markdown 语法

      标题

    
    # 一级标题
    
    ## 二级标题
    
    ### 三级标题
    
    ...
    
    

    一级标题

    二级标题

    三级标题


      

      文本加粗

    
    **文本加粗**
    
    

    文本加粗

      斜体

    
    *斜体*
    
    

    斜体

      下划线

    
    <u>下划线</u>
    
    

    <u>下划线</u>

      删除线

    
    ~~删除线~~
    
    

    删除线

      分割线

    
    ***
    
    ---
    
    +++
    
    


      文本引用

    
    > 这是一段文本,正在被引用...
    
    

    这是一段文本,正在被引用...

      链接

    
    [描述](链接地址)
    
    [百度](https://www.baidu.com)
    
    

    百度

      文本居中

    
    <center>文本居中</center>
    
    <center><font color=grey>文本居中</font></center> # 指定颜色
    
    

      

      换行

    
    <br/>
    
    换行<br/>换行 # 示例
    
    

    换行
    换行

      首行缩进

    
    &emsp; # 缩进一个空白(字符)
    
    &emsp;&emsp;首行缩进
    
    

      首行缩进

      无序列表

    
    + 无序列表 # + 与文本之间有空格
    
    - 无序列表
    
    * 无序列表
    
    
    • 无序列表

    • 无序列表

    • 无序列表

      有序列表

    
    1\. 有序列表
    
    2\. 有序列表
    
    

    1. 有序列表

    2. 有序列表

      复选框

    
    * [x] 第一只青蛙 # 已勾选,* 与 [ ] 之间有空格
    
    * [ ] 第二只青蛙 # 未勾选
    
    * [ ] 第二只青蛙
    
    
    • [x] 第一只青蛙

    • [ ] 第二只青蛙

    • [ ] 第二只青蛙

      插入图片

    
    ![描述](图片链接地址)
    
    ![](https://raw.githubusercontent.com/hj1933/img/master/img/20181127113453.png)
    
    
    冥想

      代码块

    
    这是`行内代码`,xxx
    
    ​```
    
    代码块
    
    ​```
    
    

    这是行内代码,行内代码。

    
    代码块
    
    

      表格

    
    |序号|名称|类型|
    
    |---|----|---|
    
    |1  |表格 |Table1|
    |2  |表格 |Table2|
    |3  |表格 |Table3|
    
    
    序号 名称 类型
    1 表格 Table1
    2 表格 Table2
    3 表格 Table3

    Markdown 样式

    同样地使用 Markdown 写作,你可能最终看到的效果却不同,这是由于 CSS 样式不同导致的。下图就是不同样式的引用,其表现方式也不同:

    鬼吹灯 鬼吹灯 鬼吹灯

      上面这些样式都是引用了别人已经写好的,第一个样式是我在别人的基础上,对其稍作修改,目前自己日常使用。

      推荐几个 CSS 样式:

    Markdown 样式使用

      因为微信公众号只支持富文本,对 Markdown 语法不支持,因此就需要将 Markdown 转换为富文本,转换方法大致分为以下几种:

    • 在线网站转换:Md2All

    • 浏览器插件:Markdown Here

      在线转换

      能够在线将 Markdown 转换为富文本的网站有很多,目前发现 Md2All 挺好用的,支持自定义 CSS 样式,同时也有很多自己的样式可以使用。

    操作流程:将用 Markdown 写好的文章,粘贴到网站的左侧(右侧为预览)—— 点击一建排版,将 CSS 样式粘贴进去,然后选择保存,此刻就能看到右侧的内容一建变换 —— 选择复制,然后将其粘贴到微信公众号即可。

      Markdown-Here 插件

    Markdown-Here

      另一种方式就是安装 Markdown-Here 插件,然后将 CSS 样式拷贝到插件中,再将用 Markdown 写好的文章拷贝到公众号,全选,最后点击插件(或 CTRL+ALT+M,将会一键转换)。

      可以通过 Chrome、Firefox 浏览器安装,在这里就不在赘述。

    Markdown-Here

      将 CSS 样式拷贝到基本渲染 CSS 即可,还可以选择自己喜欢的语法高亮 CSS。

    参考文章:

    浅谈微信公众号排版 —— Markdown 入门和进阶
    Markdown 你应该学会的文章编辑利器

    推荐阅读:
    总有那么一个人,愿翻山越岭为你而来
    记阳朔之行
    在简书,有幸遇到你

    喜欢我,欢迎来 公众号 找我哟~ :)

    苍白露

    相关文章

      网友评论

        本文标题:如何优雅地排版微信公众号

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