群分享:Markdown + CSS 实现微信公众号排版

本文版权归作者所有,转载请注明作者和出处。 未经作者许可,请勿将本文用作商业用途。 封面来源:见图片水印

Markdown 是一种轻量级的标记语言,它的文本可以转换为 HTML ,加上 CSS 的样式控制,能够很方便快捷进行文章排版。Markdown 解决了一文多处投放(微信公众号+博客)以及排版的问题。

CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,样式通常存储在样式表中,外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中。

我们发布在网络各处的文章,最终都会被转换为 HTML 进行展示,因此,当不需要复杂排版时,Markdown + CSS 完全可以满足我们的排版需求,比如本文。


理论陈述完毕,在介绍具体操作流程之前,我们再来介绍几个接下来会用到的小工具。(注:这些工具所提供的功能都可以用其他工具替代,这里提到它们,单纯因为,我测试的时候用的这几个。)

1. Markdown Here

Markdown Here 是个浏览器插件(Chrome/Firefox/Safari),可以将浏览器中编辑器里的 Markdown 文本转换成渲染过后的 HTML,它的另一个特点是允许用户自定义渲染 HTML 的 CSS 。

2. 任意一款 Markdown 编辑器

Markdown 编辑器有千千万,在线的也有很多。如果对自己的 Markdown 语法够自信,不需要预览,其实用记事本写完存成(.md)文件也可以的。

3. Github

Github 是一家公司,主要提供基于 git 的版本托管服务。目前并可能未来长期是本星球上最流行的开源托管服务提供商,程序员们的不具名简历集散地(通过询问一只程序猿在 Github 上的代码贡献量来评价ta是一个什么样的程序猿)。另外,Github 本身支持 Markdown 的在线编辑。


工具介绍完毕,进入实践。

0. 解决方案

  1. Markdown Here + 自定义 CSS
  2. 支持自定义 CSS 的 Markdown 编辑器(以下简称 Editor S) + 自定义 CSS
  3. 不支持自定义 CSS 的 Markdown 编辑器(以下简称 Editor US) + 自定义 CSS + Github

1. 操作流程

方案一:Markdown Here + 自定义 CSS

  1. 在 Google Chrome 中安装 Markdown Here 插件
  2. 配置 Markdown Here Option, 自定义一些 CSS
  3. 在 Atom/Sublimetext 之类的编辑器中书写
  4. 拷贝粘贴到微信公共帐号的编辑器中
  5. 使用 Markdown Here 渲染
  6. 插图图片,修订
  7. 发布……

方案二:Editor S + 自定义 CSS

  1. 自定义一些 CSS 并保存为文件
  2. 在 Editor S 中导入自定义的 CSS 文件
  3. 在 Editor S 中书写
  4. 导出渲染后的 HTML ,复制粘帖到微信公众号的编辑器中
  5. 插图,修订
  6. 发布……

方案三:Editor US + 自定义 CSS + Github

  1. 自定义一些 CSS 并保存为文件
  2. 上传 CSS 文件到 Github 并生成源文件外链
  3. 在 Editor US 书写的最开始插入 HTML 代码 <link href="https://vivienbh.github.io/CodeBlock/Markdown-here/markdown-here.css" rel="stylesheet"></link>
  4. 在 EDI US 中书写其他内容
  5. 导出渲染后的 HTML ,复制粘贴到微信公众号的编辑器中
  6. 插图,修订
  7. 发布……

2. 关于 Markdown 编辑器

试过若干 Markdown 编辑器,在线的,离线的,还差一点儿就想去尝试李笑来推荐的 Atom (这两个属于程序编辑器,Markdown编辑只是辅助功能)。在群里看到网友推荐 MWeb 之前,我一直都在使用 Macdown ,一款基于开源项目 Mou 的 Markdown 编辑器。现在,我在用 MWeb ,一款 运行在 OS X 以及 iOS 上的编辑器软件,支持 Github Flavored Markdown 语法(意味着它支持LaTex)。两款软件都支持自定义 CSS ,除了没有写作模版之外,其他的功能都灰常好用,并且这些好用的功能还免费。而我选择其中一个的原因,迟些时候,会在另一篇关于Wordpress写作的文章中提到。

对于辛勤耕耘在 Windows 上的同学,抛开 Github 的在线编辑器,MarkdownPad 是我目前能找到的还算能凑合用的编辑器。但是这款编辑器的自定义 CSS 功能是收费的,因此,我写下了方案三。

关于 Markdown 基础语法以及其他可用的编辑器,可以去看看这篇文章。4月15日我也许会重开一次关于 Markdown 写作的微课,平台暂定千聊,课程免费,欢迎带着问题来提问。(附上课程邀请卡

关于 Markdown 你可能想知道的

邀请卡

3. 关于中文排版

关于中文排版,我直接拷贝了李笑来教程的原话,重点只有三个:

  • 字体大小
  • 行间距
  • 字间距

至于选择哪一种字体,其实并不是关键,因为对字体来说,最重要的其实是“通用” —— 即便是你设置好了你喜欢的字体,先不说那是不是你自己的偏好,更重要的是,若是读者的设备上没有那个字体,那你就等于是白折腾了……

鉴于微信中「微软雅黑」是通用字体,看着蛮顺眼,所以,我直接选了它。中文字体若是不设置行间距和字间距的话,在手机上读起来很费劲,另外很多人跟我反映大一点的字体尺寸,以上这些,除了字体,李笑来都做了。我在他的基础上进行了一些小修改。

李笑来版本:

.markdown-here-wrapper {
  font-size: 16px;
  line-height: 1.8em;
  letter-spacing: 0.1em;
}

我的版本:

.markdown-here-wrapper {
  font-size: 16px;
  line-height: 1.8em;
  letter-spacing: 0.1em;
  font-family: 微软雅黑;
}

注:.markdown-here-wrapper是插件 Markdown Here 的自定义标签,如果你使用的不是方案一,那么需要将其替换为 HTML 标签 body

4. 关于配色

经过乔先生漫长的吐槽以及挑刺,我最终有两个配色方案,一个是基于李笑来配色方案的修改版(本文采用的配色),一个是没采用 Markdown + CSS 排版之前一直使用的粉色系模板的配色方案。如果你已经有自己固定的配色方案,把它照搬过来就是;如果还没有,要么上网找一个,要么自己配一个。附上 Google Material Design 的 Color Scheme:

https://material.google.com/style/color.html

我的加粗倾斜样式配色如下:

strong, b{
  color: #009688;
}

em, i {
  color: #BF360C;
}

5. 关于自定义 CSS

在自定义 CSS 里的设置不起作用的话,试试在后面补上!important,就好像这样:

h2 {
  font-size: 20px !important;
}

其他,请去 W3School 速成一下,附上网址:

http://www.w3school.com.cn/css/css_intro.asp

英文好的同学也可以去 codecademy 上个 10 小时的课Learn HTML & CSS: Part I,培训 HTML 与 CSS 基础:

https://www.codecademy.com/learn/learn-html-css

6. 关于 Markdown Here 与 GFW

也许会有人因为 GFW 的原因没有办法安装 Markdown Here,如果你还不会爬墙,可以试试最基础的梯子 Latern ,同样是一个 Chrome 插件。另一个选择是,采用方案二或者方案三,这样会额外生成一个 HTML 文件(微信公众号关闭了对 HTML 纯文本的支持,如果有大神能够告诉怎么避免生成 HTML 文件那就最好了,前端我不太懂)。

Chrome 的插件数据是跟帐户同步的,也就是说,只要你能够在 Chrome 上保持 Google 帐户在线,那么不管你换多少台电脑,都不用重新配置 Markdown Here。如果你的 Markdown Here 不好使,尝试更新 Chrome 到最新版本。

7. 我的 StyleSheet

网上的 Markdown Here CSS 一大把,可以找自己喜欢的,然后进行修改配置。本文所使用的 CSS 样式,在前面已经给出地址,初始来源是 Github,原始作者是李笑来。

8. 参考文献

  1. Markdown Here 教程(by 李笑来)
  2. CSS 简介(from W3School)
  3. 如何高效利用 Github (by 阳志平)
  4. 关于 Markdown 你可能想知道的 (by 我自己)

本文首发自公众号“爱浪漫的程旭媛”,欢迎点击左下角“阅读原文”关注。

--- END ---

原文发布于微信公众号 - 申龙斌的程序人生(slbGTD)

原文发表时间:2017-04-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏电光石火

推荐几款比较好看HTML admin后台模板

H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了...

1081
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

一个上架了的React Native项目实战总结

学习 : 视频开发教程 喜欢逛GitHub的小伙伴都知道,它有个查看最热项目的功能叫trending,但这个功能只能在网页上查看, 而且在手机上浏览显示效...

3728
来自专栏HBStream流媒体与音视频技术

极度偷懒 - 实现算命程序中tabcontrol的“美化”

3358
来自专栏腾讯NEXT学位

React.JS一点通

752
来自专栏数据小魔方

光学识别——图片数据秒变Excel表格

今天跟大家分享怎么利用光学识别软件迅速将图片格式表格瞬间转化为Excel格式表格。 ▽ 前段时间一个已经工作的高中好哥们儿 突然跟我说他需要把好多张图片格式表格...

55510
来自专栏数据小魔方

office颜色配置技巧与自定义颜色主题

上一篇给大家介绍了基础的色彩知识,今天要跟大家简单介绍一下office(office系列所有套件的调色板是通用的)办公软件的内置色板的使用技巧以及如何自定义颜色...

3377
来自专栏极乐技术社区

一周小程序【资讯教程】更新

轻松一刻 ? 漫画来自于西乔《神秘的程序员们》 官方资讯更新 [新功能]小程序再添新功能,APPx生成工具要火的节奏! 小程序又上线新能力——云监控 最新《20...

1987
来自专栏河湾欢儿的专栏

响应式布局流式布局

响应式布局:根据不同的尺寸适配 viewport width=device-width 设置视口的宽度等于设备的宽度,如果不设置的话,默认视口的宽度是980...

682
来自专栏Blogbyme

【每日推荐】一款绿色轻快的截图软件

亲爱的读者朋友们,博主的每日推荐终于开始更新啦~~是不是很高兴呢? ? 什么?你不知道有每日推荐? ?   点我去了解一下吧。

1105
来自专栏Jack的Android之旅

基于豆瓣和妹子的api用React Native写的demo for android

最近一直在学React Naitve,可以说React Native的确有他自身强大的地方,不管是运行效率还是热更新都和一般的h5有的一比,当然因为面世的时间还...

892

扫描关注云+社区