自从用了 Markdown ,文章排版不再愁

2019-01-19 12:49:57 356点赞 3233收藏 180评论

大噶好,由于天天被问到自己文章的排版方法,所以此文横空出世。

引言

先来解释一下,我的文章字体为什么有颜色。

主要是因为对文本内容进行了 css 样式设定,如果你没有计算机基础,也可以像我一样,将css样式理解为一种文本样式壳。css 壳一罩,你的文本内容就会呈现出各种设定好的格式,比如:字体、字号、间距、颜色等。

再来解释一下,我的文章为什么多平台样式都一样,比如公众号和什么值得买。

因为文章不是用各平台自带的富文本编辑器撰写,而是使用一种标记语言 Markdown 语言。通过在专门的 Markdown 编辑器中写好后,再贴入各个平台。最后通过对文本的 css 样式渲染,以此保证多平台样式一致。

当然,最大的好处是:只需一次性投入 10 分钟,从此再也不用编辑各个平台的文章格式

什么是 Markdown 语言

Markdown 的创始人 John Gruber 这样定义:

"Markdown" is two things:

(1) a plain text formatting syntax;
(2) a software tool, that converts the plain text formatting to others.

简单来说,Markdown 是一种标记性语言,使用各种标记字符用来赋予文字不同的格式。

并且,可以将带有标记符号和文本混合的内容,转换为一种带有固定格式的排版效果。

创作者

Markdown 是在 2004 年,由一位程序员 John Gruber 创造的。不过,说 John Gruber 是一位程序员可能不太确切,虽然他有计算机学位,但 John Gruber 还是一位作家、博客博主,以及一名 UI 设计师。

所以 Markdown 在发明之初,也是始于博客,并且流行于程序员和职业撰稿人之间的一种码字工具。

国内推广

距离 Markdown 出世至今,已有十余年,虽然在国外十分流行,但国内的推广可能还得归功于喜欢买比特币,割韭菜的 李笑来

虽然李笑来的比特币哲学不一定为人接受,但很多人倒是看上了他公众号文章的排版,简单优雅,不费劲,颇有一番极简禅意。于是李笑来顺势分享,Markdown 便传开了。

李笑来的 Markdown 普及文章

Markdown 特点

高效排版

  • 一次排版,适用多个平台

  • 不再需要逐个平台修改格式

  • 不需要再学习其他编辑器使用

作为原创作者来说,写出好文章是我们一直为之努力的事,但更让我们头痛的,是每发一个平台,就不得不重新编辑一遍文章格式。就算是熟练手,一篇精修的公众号文章光修改格式,也差不多能消耗掉几个小时。

而使用了 Markdown 之后,我再也没有这种烦恼了,一心一意创作内容就好。

又由于 Markdown 文本格式适用于多平台,所以无需多次排版,甚至再也没打开过花样繁多的 秀米、135 等编辑器。

高效写作

  • 没有各种按钮,专注内容输出

  • 云端保存,不怕丢失

虽然我不太懂现在流行的“沉浸式写作”,但自从使用 Markdown 以来,确实写作状态更专注。

如果是以往使用 Word 等有各种格式按钮的富文本类编辑器,我写几个字总是想要用鼠标改改格式,加粗、下划线、背景填充、首行缩进、项目符号,轮着琢磨一遍。而使用 Markdown 后,真正做到了“我手写我心”,文本只需要几个格式,还是用键盘敲一敲标记符号就可以搞定的。

而且 Markdown 编辑器的云端保存功能,也让我免除了后顾之忧,不用再每写几个字就诚惶诚恐的 [Ctrl+S]了。自动保存频率差不多是 5~10 min ,断网也不要紧,网络再次接入后会第一时间同步。

自动保存自动保存

多格式导出

  • Html、PDF、印象笔记

一般的 Markdown 编辑器都可以多格式导出,不管是你导出 Html 格式,进行个人网站建设,还是导出 PDF 形成长文本图片,甚至是导出到印象笔记整理,统统没问题。

多平台适用

  • 微信公众号

  • 什么值得买

  • 简书

  • 少数派

以上平台对 Markdown 语言的适配性较好,有的甚至直接提供 Markdown 编辑器。

Markdown 语法

创作常用语法

虽然 Markdown 本身语法简单,但根据个人总结,写原创的过程中常用到的大概就只有以下几种,如果想深入学习,也可以参见各编辑器的语法帮助。

分级标题

自从用了 Markdown ,文章排版不再愁

文字加粗

自从用了 Markdown ,文章排版不再愁

文字引用

自从用了 Markdown ,文章排版不再愁

其他语法

图片

图片来自 Cmd 官方示例图片来自 Cmd 官方示例

由于不是每个 Markdown 编辑器都支持本地图片,更多的是引用有网络地址的网络图片,所以个人觉得不太方便。

另外大部分的编辑器图片功能属于收费服务,但可以设置图片大小,大家可以自行斟酌。

表格

图片来自 Cmd 官方示例图片来自 Cmd 官方示例

几款主流 Markdown 软件

Ulysses (Mac 平台)

主页地址

自从用了 Markdown ,文章排版不再愁

Bear (iOS/Mac 平台)

主页地址

自从用了 Markdown ,文章排版不再愁

Typora (Windows 平台)

主页地址

将预览框与编辑框合二为一了,创作同时可直接预览格式

自从用了 Markdown ,文章排版不再愁

Cmd Markdown 编辑阅读器

初学者友好,个人自用,Windows/Mac 都可以,还有网页版
主页地址

除了以上几款专门的 Markdown 软件,国内的“有道云笔记”和“印象笔记”在去年也推出了 Markdown 服务。

有道云笔记

有道云笔记Markdown指南

印象笔记

印象笔记 Markdown 入门指南

渲染插件 Markdown Here

虽然 Markdown 编辑器已经各种强大和方便了,软件本身也自带 css 样式,但要让你的文字格式适配所有平台,还需要一个渲染插件—— Markdown Here

插件可在多种浏览器上使用,大家可在 Markdown Here 官网 下载,如果打不开,我的公众号上也提供下载安装包。

自从用了 Markdown ,文章排版不再愁

下载插件之后,简单几步就可以使用了。

  • 步骤一:将插件安装至浏览器

  • 步骤二:更改内置 css 样式

自从用了 Markdown ,文章排版不再愁

  • 步骤三:在文本页面,一键渲染

自从用了 Markdown ,文章排版不再愁

css 样式设置

何谓 css 样式

根据百度百科的解释:

css 样式译为“层叠样式表”,是一种用来表现 HTML 或 XML等文件样式的计算机语言。

能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

如果你不太懂,我们也可以这样理解 css 样式,我们可以把它想象成一种“主题”样式。

就像你在博客选择的“水墨样式”,或者“现代样式”,选择之后你的浏览界面就会焕然一新。再或者也可以说是一种个性化定制的“皮肤”,比如 QQ 皮肤。

而如果一个网站没有 css 样式,你一定会觉得网络出现了错误。

如何更改

一般对在目前流行的新媒体文章中,格式设置主要集中在 字体、字号、行间距、字间距、颜色 等要素上,所以对于 css 样式的设置也在这几项。

对于没有基础的人来说,凭空设置一个样式肯定比较困难,但我们可以站在巨人的肩膀上修改嘛。

我会在文末提供几种不错的 css 样式,大家只需根据个人喜好,更改基本样式,即可形成自己独特的风格排版。

举个例子 👇

格式名称样式解释
字号font-size: 16px字号大小 16px
行间距line-height: 1.8em行间距1.8em
字间距letter-spacing: 0.1em字间距0.1em
加粗颜色strong, b{ color: #BF360C;}加粗字体用颜色#BF360C现实

一些 css 样式

戳链接跳转

李笑来的个人样式在其公众号文末的【阅读原文】中获取

以上是我搜罗到的一些不错的 css 样式,如果你对我目前使用的样式感兴趣,也可在我的公众号“zmmnote”获取(内容太长,这里贴不下)

最后

由于萌萌对 Markdown 语言也是一个外行,只能用来解决创作过程中的排版问题。

在网上还见过有人使用 Markdown 进行论文撰写,简历创作,图片卡片绘制,饼图插入,PPT 制作等使用方法。 Markdown 作为一门简明而优雅的语言,还有很大的发展空间。

想了解更多 Markdown 知识,或者发现更好用的软件,也推荐大家上“少数派”看看。

谨以此文,帮助大家解决一些排版难题。

满地打滚求 点赞……自从用了 Markdown ,文章排版不再愁

"小编注:本文作者 @大猫咪_张萌萌 是什么值得买生活家,他的个人自媒体信息为:

微信公众号:张萌萌是也,搜索“zmmnote”

扶持推广个人品牌是生活家新增福利,更多详细内容请看生活家公告(https://post.smzdm.com/p/700628/)。欢迎大家踊跃申请生活家,生活家中表现优异的用户还将有机会成为『首席生活家』,欢迎有着特别生活经验的值友们踊跃加入生活家大家庭!"

展开 收起
180评论

  • 精彩
  • 最新
  • Mweb还是Wmeb来着,这个不错的

    校验提示文案

    提交
    给你置顶,布丁

    校验提示文案

    提交
    是MWeb,手机端体验很好。PC也有,但是只有Mac端。

    校验提示文案

    提交
    收起所有回复
  • 也就项目组内部用,每次给客户都要转换成word。 [喜极而泣]

    校验提示文案

    提交
    甲方都是爸爸。。。。

    校验提示文案

    提交
    bear转word排版还极丑,转pdf又抱怨复制不了文字。

    校验提示文案

    提交
    还有2条回复
    收起所有回复
  • 现在写markdown肯定是VSCode啦,微软的东西还是有保障的。

    校验提示文案

    提交
    快写一篇vs code让我学学

    校验提示文案

    提交
    收起所有回复
  • 1. 大妈的编辑器用的是开源的百度编辑器不支持MD, 好多生活家建议过加入MD支持. 没有然后
    2. 楼主能加入字体颜色和少量样式, 是通过脚本绕过大妈编辑器的限制了, 使用APP看贴颜色和样式会消失.
    3. 使用排骨脚本可以实现一键粘贴有道笔记图文和WORD (WORD图片不支持).

    校验提示文案

    提交
    既然这么认真的留言了,我也认真严肃的回复你吧。1.我不是程序员,大妈编辑器到底啥框架我不懂,但我这么操作能用 2.以前确实对app无效,但自从去年大妈升级后,效果和公众号一模一样。这篇文章就是其他生活家看到我的文章排版后,强烈预定的。如果你需要证明,可以发你群里聊天截图 3.你要打广告,没问题。下次跟我先说一下,我帮你加到我文章里,留言在评论里的广告效果肯定没有直接插入文章来的好吧? | 如果还有其他问题,欢迎继续留言,但是技术上的我真不懂。 [无所谓]

    校验提示文案

    提交
    评论被吞了你是怎么看到的? 我自己都看不到.
    因为大妈根本不支持MARKDOWN, 而你文中说大妈是适用平台之一, 我才写评论的.
    大妈的编辑器会在你粘贴时强制去掉你的任何CSS样式和HTML代码, 所以正常手段是不能加入字体样式颜色的. 你说的"但我这么操作能用"是怎么个操作法?

    校验提示文案

    提交
    收起所有回复
  • 这个可以的 学习学习

    校验提示文案

    提交
    谢谢大佬,布丁

    校验提示文案

    提交
    收起所有回复
  • 学习一下了

    校验提示文案

    提交
    学习两下会发生什么?

    校验提示文案

    提交
    收起所有回复
  • 我是来学习的 什么时候学以致用就说不准了 毕竟我是咸鱼

    校验提示文案

    提交
    听说有好奇心的人,学习能力也很棒

    校验提示文案

    提交
    收起所有回复
  • 字多长篇多章节好用,测评开箱类图多字也没多少,感觉还是有点尴尬。

    校验提示文案

    提交
    我自己废话比较多,基本每篇都是2,

    校验提示文案

    提交
    我自己废话多,测评都能写2000……

    校验提示文案

    提交
    收起所有回复
  • 大萌萌的利器啊,太棒了

    校验提示文案

    提交
    不敢辜负大家的期望啊 [龇牙]

    校验提示文案

    提交
    收起所有回复
  • 必须一条龙呀,学习使我快乐,有一起学习的小姐姐么

    校验提示文案

    提交
    有一起玩耍的小哥哥吗

    校验提示文案

    提交
    收起所有回复
  • 可惜不能上传本地图片这个不方便啊 [皱眉]

    校验提示文案

    提交
    部分软件可以,比如typora ,但本质都是先上传至网络

    校验提示文案

    提交
    收起所有回复
  • 哈哈哈哈,学来晚了

    校验提示文案

    提交
    哈哈哈,来了就好

    校验提示文案

    提交
    收起所有回复
  • 太赞了,全是干货,棒!

    校验提示文案

    提交
    打滚卖萌谢谢大佬

    校验提示文案

    提交
    收起所有回复
  • 来支持一下呗 [脸红]

    校验提示文案

    提交
    感谢大佬支持

    校验提示文案

    提交
    收起所有回复
  • 张大妈支持md?我第一次知道

    校验提示文案

    提交
    不算支持吧,跟公众号一样,用插件渲染的

    校验提示文案

    提交
    收起所有回复
  • 下一篇,r测评?

    校验提示文案

    提交
    让我先学一下 [损失几个亿]

    校验提示文案

    提交
    收起所有回复
  • 我们公司的程序员都不会呢

    校验提示文案

    提交
    程序员必须会吧

    校验提示文案

    提交
    可能用更高级的工具吧

    校验提示文案

    提交
    还有6条回复
    收起所有回复
  • Markdown的话合并单元格有啥好的操作么,百度搜的使用td tr标签写,可是写出来不太直观,不好改啊

    校验提示文案

    提交
    不然用 Excel 截图吗?Excel 也是我的挚爱呢

    校验提示文案

    提交
    收起所有回复
  • 呦 程序员也在用的工具 路过打赏了

    校验提示文案

    提交
    谢谢大佬打赏~

    校验提示文案

    提交
    收起所有回复
  • 这个需要一定的学习能力,除非经常用,我是能看懂,但是用的时候就要看说明,挺好用的倒是真的

    校验提示文案

    提交
    我平时就用三种格式,所以 so easy 啦

    校验提示文案

    提交
    收起所有回复
提示信息

取消
确认
评论举报

相关文章推荐

更多精彩文章
更多精彩文章
最新文章 热门文章
3.2K
扫一下,分享更方便,购买更轻松