markdown 字体颜色_自从用了 Markdown,文章排版不再愁

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

引言

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

主要是因为对文本内容进行了 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 本身语法简单,但根据个人总结,写原创的过程中常用到的大概就只有以下几种,如果想深入学习,也可以参见各编辑器的语法帮助。

分级标题
8e9c818b89737c0efbdf9a2d31e44004.png
文字加粗
b1bbec2c6577e0a2e47380d0c35a0337.png
文字引用
5d7c86c69f7fe9417b7e5ef9da1b0f8a.png

其他语法

图片

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

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

d7c1164feb57aab66488150b6048752f.png
表格
e617e9e2a6bfcb7b1e59443da2d83848.png

几款主流 Markdown 软件

Ulysses (Mac 平台)

主页地址 https://ulysses.app/

4d2ce037d78177312f7297ce17a96d56.png

Bear (iOS/Mac 平台)

主页地址 https://bear.app/

63774c6a7b8cece7a045ff14183d6005.png

Typora (Windows 平台)

主页地址 https://typora.io/

f0ab173c4cf381ac66a0519e57887e9f.gif

Cmd Markdown 编辑阅读器

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

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

有道云笔记

有道云笔记Markdown指南http://note.youdao.com/iyoudao/?p=2411#header

印象笔记

印象笔记 Markdown 入门指南https://list.yinxiang.com/markdown/eef42447-db3f-48ee-827b-1bb34c03eb83.php

渲染插件 Markdown Here

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

f21a8f730032fc0e7078e91c6dbf6d46.png

插件可在多种浏览器上使用,大家可在 Markdown Here 官网https://markdown-here.com/ 下载,如果打不开,我的公众号上也提供下载安装包。后台回复关键词【20190118】

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

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

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

3760c5a992c464f88a09236ca10c86ed.png
  • 步骤三:在文本页面,一键渲染

e36e2a878eb45fb772c59bf5c3b6189c.gif

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 样式

戳链接跳转

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

  • Typora 中的“Han.css“

https://theme.typora.io/theme/Han/此样式是众多公开提供的 css 样式中对中文处理最为友好的

  • 少数派作者@Hover 搜集的样式

https://github.com/j211200/CSS-Reference此样式来自少数派作者 @Hover 在其文章“在富文本在线编辑器中使用 Markdown”末尾的个人分享文章链接:https://sspai.com/post/47189

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

最后

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

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

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

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

回复关键词【20190118】,获取文件:

  1. Markdown Here 安装包

  2. 个人 css 样式

想要你的一个”“,也想和你一起变“ 好看”

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值