『PC搞机的快乐』 篇四十四：关于Markdown here CSS渲染的经验分享——让你的文章排版更优美，可读性更高

写在前面

说实话用了很久的evernote，最近又转战印象笔记，但是对于Markdown一直没有去用，因为平时word富文本编辑器用的习惯了，在everynote整理笔记也是在word里面修改好了然后再倒入到笔记里面，所以对Markdown编辑方式使用也不多。

最近一段时间呢，发现值得买的很多大神文章排版很是漂亮，以为是首席生活家的特权，经过询问后呐发现是用CSS做的渲染。

既然大妈允许这么做，这么好的工具当然要用起来，最近一段时间也是在摸索学习，一直在试错，近期还算是取得了一点学习成果，今天呢和大家一起分享一下，一方面让大家的文章更加丰富多彩。

如果点赞是读者给与的最高的评价，那么一个好的排版是对读者最大的尊敬，对此我深信不疑。 此处疯狂暗示一波。今天借着这篇文章一起学习下，虽然不能说精通markdown和CSS渲染，但是应对文章的排版呢还是绰绰有余的。

正文开始

一、什么是Markdown？

Markdown 是一种轻量级的「标记语言」，创始人为约翰·格鲁伯，用简洁的语法代替排版，目前被越来越多的知识工作者、写作爱好者、程序员或研究员广泛使用。其常用的标记符号不超过十个，相对于更为复杂的 HTML 标记语言来说，Markdown 十分的轻量，学习成本也不需要太多，且一旦熟悉这种语法规则，会有沉浸式编辑的效果。

在码文的过程中，遇到的常用操作有标题设置、引用、加粗、斜体、下划线、插入超链接、插入图片等操作，这些操作在富文本编辑器里需要一个一个的设置。

在markdown语言里，用简单的符号就可以编写完成，思路不容易被打断，最后CSS渲染就可以产生我们想要的格式

诸如微信公众号、知乎、今日头条、知识星球等平台只要把代码原文复制进去，用markdownhere渲染就可以完整格式的调整，只要保存好了这个原始文档，到哪里都可以渲染发布。

关于 Markdown语言入门呢，网上很多，做的比较全面的感觉印象笔记关于于markdown语言的解释，每个版本对 Markdown基本是相通的，稍微有一点区别，码文常用的基本是相通的。具体可以参考印象笔记 Markdown 入门指南点击访问，本文相关CSS及主题下载：下载地址，提取码：wre5

说一下在值得买或者微信码文用得比较多语法：

1.标题设置

一级标题、二级标题、三级标题，分别用# ，## ,###，就可以完成三级标题的设置，简单的说就是在标题前面加上一#然后点下空格就完成了。

2.加粗文本

加粗呢，这里就是强调作用，一般我们在富文本编辑下， 直接用ctrl+B 快捷键可以实现，

3.斜体、下划线、删除线、分隔线、引用

上面这些也是用的比较多，在markdown中也可以通过符号语言简单的实现，还是挺好记得，因为语言也不是很难，基本上就是用*，-，等的组合，比如三个*或者三个-，就是下划线，在文字的两端各打一个*就是斜体，各打**就是强调，到时候渲染的时候会自动识别格式。

4.有序列表&无序列表

在描述或者引用的时候，经常会用到列表，列表分为有序列表和无序列表，这两种列表也是非常容易实现，用下面的代码就可以完成。

5.超链接和插入图片

超链接的插入语言和图片插入语言差不多得，中括号内是名称，圆弧括号内是地址，因为张大妈发文的时候要求要将网址变成超链接。所以这个在发文中经常遇到，拿出来说以下。

• 插入超链接： [链接名称]（链接地址）

• 插入图片： 

关于 Markdown的语言呢，我近期也做了详细的整理，下面分享给大家。

6.现在比较流行的 Markdown 书写平台：

①Typora（Windows 平台）

这个必须放在第一位，原因有三

• 首先呢，Typora将预览框和编辑框整合在一起了，也就是说输入代码语言之后，会自动识别为预览模式，可以看到实际渲染的效果。
  从个人使用的角度上来说，Typora的这种实时预览的模式符合我的使用习惯。左边编辑右边预览的模式，对我来说还是有笔记强烈的割裂感的。在左边完成输入之后，还要移动眼睛到右边查看效果。

• 其次，因为是开源的，有很多主题可以下载，找一个合适主题码字还是很舒服的，这里呢一定注意是预渲染模式，我们看到的是将来发布的实际效果。访问地址。

• 第三编辑器实时预览模式下呢还兼顾了部分富文本编辑的功能，比如图片的拖拽插入，CTRL+B加粗，ctrl+I斜体，ctrl+U下划线，操作之后，会自动编辑为markdown语言。一定程度上提高了码字效率。

[主题地址]（http://theme.typora.io）

下载主题之后，解压然后复制到主题文件夹即可。

②Ulysses（Mac 平台）

也是经典编辑器，不过随着用户的陈定已经变成收费了，免费的这么多，这个就算了。访问地址

③Cmd Markdown 编辑阅读器

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

④马克飞象

马克飞象是一款专为印象笔记（Evernote）打造的 Markdown 编辑器，通过精心的设计与技术实现，配合印象笔记强大的存储和同步功能，带来前所未有的书写体验。访问地址

⑤Yu Writer

可以利用Yu Writer 自由写作，并在统一的文档库中进行管理，Yu Writer 会自动保存你的写作进度及操作记录，随时回滚至以前版本。

除了以上几款专门的 Markdown 软件，“有道云笔记” 和 “印象笔记”， Bear（iOS/Mac 平台），也有 Markdown 服务。

二、CSS渲染

上面说完了Markdown文章语言的编写，下面就进入到最后发布的渲染了，这里我们需要用到一个浏览器插件，Markdown here。这款插件将浏览器中编辑器里的 Markdown 语言文本转换成渲染过后的网页文本。

关于浏览器插件的安装，前面写过一期文章，现在Edge、chrome、firefox、其他 Chromium 内核浏览器都可以安装插件。

『干货集结号』 篇十二：让你『放飞自我』的浏览器拓展分享——如何打造『高效的』冲浪神器~本篇文章来自#大男孩的快乐#征稿活动。晒出你作为一个大男孩的快乐源泉，成功投稿可获得50金币奖励，更有三千元乐高大奖与达人Z计划专属权益等你拿哟~>活动详情戳这里【更多工具】->【扩展程序】，点开就可以了。或者在地址栏输入Chrome://extensions/，按回车打开扩展程序页面，看到右上角有纵笔浮生| 赞81 评论49 收藏891查看详情

安装完成后，右击插件图标选择选项，进入Markdown here的后台设置。

在基本渲染CSS，这个选项里面进行参数设置，对于非专业出身的小伙伴，总不能为了码文调个格式还要去学习下CSS语言，当然感兴趣的可以深入学习一下，如果深入学习呢，这里也推荐一个网站，基本的语言都有，本文也是参照此网站，对代码进行的修改。

本着方便快速使用的精神，我们简单研究下代码，并且研究的过程中呢，对代码进行了标注。

首先我们先来熟悉一些CSS代码中用到的格式限定，下面这些呢都不用记，只是我们再修改CSS语言的时候，知道修改这个参数会发生什么变化就可以了，常用的也就是修改颜色、标题居中还是居左。了解下面这些的用法之后，拿过一个CSS代码稍微调整一下格式，复制粘贴到Markdown here的后台就可以使用了。

1.码文用到的修改

上面我们提到过，修改格式，一般就是颜色、加粗、下划线、分割线等，首先要在CSS渲染中找到这些主体的部分，然后，再修改里面的控制条件。

• .markdown-here-wrapper { /*Markdown Here 的全局配置，没有默认值*/

• strong, b{ /*strong 加粗，用粗体显示，也可以自定义自己的强调方式 */

• em, i {/*斜体强调---*/ }

• hr { /*水平线分割---*/}

• img{/*图片设置*/}

• del { /*删除线*/}

• a:link { /* 未被访问的链接 */}

• a:visited {/* 已被访问的链接 */}

• a:hover {/* 鼠标指针移动到链接上 */}

• p { /*段落设置*/}

2.格式限定

• font-size: 14px; /*字号em默认是相对16px的大小，也可直接用px作单位*/

• line-height:1.8em; /*行高，行间距，可用百分比，数值倍数，像素设置*/

• word-spacing: 0; /*字间距*/

• font-family:/*字间距*/

• font-style: bold !important; /*字重*/

• letter-spacing: 0.1em; /*字母间距*/

• color:#CB0606 !important; /*颜色*/

• !important用来提高本行代码的优先级，如果前面已经设置了格式，这里加入!important，优先采用此
  

3.边界限定： 

margin决定了元素的外边界， padding决定是内边界，有四个边界，按照上、右、下、左的顺时针方式定义，例如，margin:12px 10px 14px 0; 的四个属性分别是上、右、下、左，即分别是 margin-top:12px;margin-right:10px;margin-bottom:14px;margin-left:0;

当属性后只有三个值时：

• 第一个值是 padding-top 

• 第二个值是 padding-right 和 padding-left 的值（因为左右的值相同，所以可以写到一起）

• 第三个值是 padding-bottom 的值

只有两个值

• 第一个值是 padding-top 和 padding-bottom 的值

• 第二个值是 padding-right 和 padding-left 的值

只有一个值 ：那就是上下左右的值都相同。

4.全局设置

这一部分是全局设置，主要设置的是字号，行高，和字间距。

下面这部分基本上不用修改，也已经做了标注，如果尝试修改也可以试下。

5.加粗、斜体、水平分割线等的格式设置

这一部分呢主要是加粗、斜体的颜色设置，为了统一风格，和文章整体色调搭配，我们需要对斜体、删除线、等进行颜色调整，颜色代码采用的十六进制 (hex) 表示法进行定义，关于颜色代码我们放到后面说。推荐两个网站，常见的配色基本上都有了。在整理的过程中，将一些常见的颜色注释在了代码里面，基本上满足需求了。

在这些模块里面，我们将这些代码比如，紫色#510E79、笑来绿色#009688、黑色#545454、亮红#FA5151、暗红#CB0606、金色#f79646、笑来金色#BF360C 、深蓝#2e6e9e、灰色BDBDBD、备注灰色#a5a5a5进行替换，渲染后颜色就会变化

水平分割线

重点说一下水平分割线的这段代码，我们看到里面是用border来定义的，如果用border是上下两根线，我们在border后面输入一个1PX，分割线其实显示的2px的效果，会有点粗，所以下面将border-top和border-bottom也放进来了，用哪个做分割都可以，选中一个后，把其他的数字改成0就可以了。

• hr { /*水平线分割---*/

• border: 0 solid#BF360C; /*双跟分割线 粗细，solid颜色 #a5a5a5 */

• border-top:1px solid#BF360C !important;/*上分割线 粗细，颜色#ddd跟随主设定，solid类型-不写是跟随标题主色，替换了显示新颜色 */

• border-bottom:0 solid#BF360C !important ; /* 下分割线，粗细solid类型-不写是空心，颜色 */

• margin:1.5em auto;!important; /*外边距*/

6.引用模块

border-left这个是引用的左边框，2个像素款，solid后面是竖线的颜色，如果想要改颜色把颜色代码替换掉。 padding内边距，根据上面说的，有两个值的时候，第一个值代表的意思是上下，第二个值是左右，也就效果是，上下内边距为0 ，左右空出10Px。

引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买引用示例，什么值得买

7.段落设定

上面在整体设定的时候已经对行高、字间距做了定义，这里只是强制设定下字体，是否首行缩进，和段落的边距，如果你觉得过宽或者过窄可以从这里设定。

• >p { /*段落设置*/

• font-size: 14px !important;

• text-indent:0 ;/*首行缩进*/

• margin: 1.8em 5px !important;/*上下1.8em、左右5px*/

• /*页边距用padding属性调整*/

• }

8.标题格式定义

标题设定这块是用的比较多的，我们把代码摘出来看，一共分成了h1, h2, h3, h4, h5, h6 ，常用的也就前三级标题，后面的标题呢，我们可以给他们赋予颜色或者特别的格式，用来当做多用法的强调，不过整篇文章的颜色不宜过多，颜色过多，会显得比较乱。

在注释这里我将几款常用的颜色也备注上了，可以根据需求设置，其中有几款是李笑来老师代码中的颜色，后面也会分享整个代码。下载地址，提取码：wre5

• h1, h2, h3, h4, h5, h6 { /*各级标题统一设置紫色#510E79、笑来绿色#009688、黑色#545454、亮红#FA5151、暗红#CB0606、金色#f79646、笑来金色#BF360C 、深蓝#2e6e9e、灰色BDBDBD、备注灰色#a5a5a5*/

• margin: 15px auto; !important;/*段前、缩进值*/

• font-style: bold !important; /*字重、加粗？倾斜*/

• color: #009688 !important; /*颜色*/

• text-align:left !important; /*标题位置,center,right,left*/

• }

整体设置里面，对边界、字体、颜色、还有标题对齐方式，用的最多的就是颜色和标题对齐方式，从备注中可以看出，有三种对齐方式，做对齐，右对齐和居中，用的较多的就是居中和左对齐，我们这里可以调整所有标题的对齐方式，还有 记住这段代码text-align:left !important; /标题位置,center,right,left/，后面设置每个标题的对齐方式会用到。

9.标题独立设置

上面设置了所有标题的统一格式，这里来到每个标题的独立设置。

从代码上看，一级标题设置的比较多，设置了字体大小，颜色，和对齐方式，这段代码在这里又出现了，虽然上面我们了所有代码的对齐方式，一级标题我们再使用的时候有时候会居中对齐，有时候会左对齐在这里设置。下面border开头的三行，是标题带的分割线的设置。

• h1 {

• font-size:18px !important;

• color:#CB0606 !important;/*颜色*/

• text-align:left !important; /*标题位置,center,right,left*/

• border-top:1px solid#BF360C !important;/* 粗细，颜色#ddd跟随主设定，solid类型-不写是跟随标题主色，替换了显示新颜色 */

• border-bottom:0 solid#BF360C !important ; /* 粗细solid类型-不写是空心，颜色 */

• padding:20px 0 0 0 !important;/*内边距,控制标题和间隔线的距离第一个数，控制上划线的距离。上右下左，留白距离、缩进值*/

• }

  
  

• h2 {

• font-size:16px !important;

• color:#009688 !important;

• }

  
  

• h3 {

• font-size: 14px;

• color:#009688 !important; /*颜色*/

为了方便写作，这里我们对一级标题做了个带分割线的效果。其实用的是元素的上下边框功能。第一句是上边框，意思就是横线会在文字的上方出现。

border-top:1px solid#BF360C !important;/* 粗细，颜色#ddd跟随主设定，solid类型-不写是跟随标题主色，替换了显示新颜色 */

第二句是下边框，我们可以看到这里数字是0，也就是下边框是关掉的，如果改成1px，则标题的上下都会有横线出现。这个值同时决定了横线的粗细。

第三句呢是用来控制标题文字到横线的距离，这里为了方便修改写出了四个值，上面说到边距的定义方式是从上面开始顺时针，分别是上边距、右边距、下边距和左边距，现在是用上横线的状态，padding：20PX，说面文字到上横线，即上边框的距离是20px，但是如果我们要是用下横线了，就需要把第一个值改为0，第三个值改成某个数值。

• border-bottom:0 solid#BF360C !important ; /* 粗细solid类型-不写是空心，颜色 */

• padding:20px 0 0 0 !important;/*内边距,控制标题和间隔线的距离第一个数，控制上划线的距离。上右下左，留白距离、缩进值*/

同样的二级标题和三级标题也是同理修改，如果不需要带横线直接删掉就可以了。

10.关于颜色代码

推荐两个网址：第一个是w3school可点击访问,这个是专业的CSS代码网站，很多语言定义是从这里查的，颜色部分这里都有，可以直接到这里复制。

第二个是一个配色网站，这里输入某个颜色，会出现相应的配色，这样的话可以很快完成相应颜色的调整。

整个代码编辑完了之后呢，我们复制粘贴到Markdown here后台。插件会自动保存并同步已做好的代码设置。

也可以进行效果预览，如果效果不理想，在上面再进行微调。

将写好的markdown文章放到编辑框里面右击选择转换，或者点击右上角的图标可以完成渲染。也可以一段一段的进行渲染，这样写一部分渲染一部分我感觉是最省力的。

因为在写的过程中，要上传图片。大妈无法拉取图床的图片到平台库，用外部图片不安全，万一有一点图床倒闭，文章中的图片就挂了。 文中相关主题和CSS渲染链接，需要的下载，下载地址，提取码：wre5

11.Paste to Markdown

关于如何将富文本转换成markdown语言，一直在用的一个网址还不错，也分享给大家，复制直接到这个网页粘贴就可以生成markdown语言，然后可以用typora编辑器进行编辑了。访问地址

总结

好了今天的分享到这里吧，非码农、非专业人士，硬着脑袋，只为了摆平排版问题，果然这东西写多了容易秃头,如果有问题请指正讨论，感谢支持。

如果喜欢记得点赞哦，如果喜欢我的东西，点个关注啦

往期热文推荐：

工具人在线养成计划——这些收藏了绝对会用的『在线工具』已集结完毕~~本篇文章来自#大男孩的快乐#征稿活动。晒出你作为一个大男孩的快乐源泉，成功投稿可获得50金币奖励，更有三千元乐高大奖与达人Z计划专属权益等你拿哟~>活动详情戳这里纵笔浮生| 赞106 评论12 收藏1k查看详情

软件哪里去找？——安全而无广告的『神级下载网站』~~绝对不能错过写在前面作为电脑达人或者效率达人，软件是必不可少之物，工欲善其事必先利其器。而随着太平洋、ZOL之类的网站主键变成流氓的温床，再加上裸奔状态下的某度，简直就是流氓的狂欢。下载软件去官网是最好的，关键是你能从广告里找到官网我就算你赢，再有就是某些国外的神器真的不好找官网。如何找到干净的软件下载网站，如纵笔浮生| 赞1k 评论241 收藏18k查看详情

数据哪里去挖？大数据时代的反向操作～～2 分钟教你『找数据查资料』本篇文章来自#大男孩的快乐#征稿活动。晒出你作为一个大男孩的快乐源泉，成功投稿可获得50金币奖励，更有三千元乐高大奖与达人Z计划专属权益等你拿哟~>活动详情戳这里纵笔浮生| 赞314 评论33 收藏3k查看详情