排版难？mdnice轻松解决排版个性化和规范化矛盾-CSDN博客

最近学习使用 mdnice 来完成公众号文章排版任务。

mdnice 对于数学公式排版的支持是非常棒的！这也是我使用它的本意。我好像忘了这一点

我现在沉迷于自定义排版。写这篇文章有两个意图：

一方面可以普及一下 Markdown 语法排版，真的非常简单易用！ 和我一样的萌新们千万不要害怕！
另一方面就是分享一下我在自定义排版过程中解决的问题~

重点来啦

先放一个思维导图。向右滑动可查看完整的流程：

但是如果你直接插入这个思维导图的话，就是下面的效果，很不清晰吧~谁叫我的思维导图本身做的这么差呢

好啦，本文的结构就是：

简要介绍 mdnice 的使用
- 基本用法
- 主题修改
如何做出上面的思维导图的滑动效果，以及下图的效果并写到自定义主题里面。关心这一部分的朋友们可以跳过 mdnice 使用简介

点击上方蓝字，关注学新知！！

mdnice 使用简介

mdnice 是什么？

一个帮助你排版编辑的开源工具。再多写一句可能就是劝退，废话不多说，直接展示使用和效果。

怎么使用 mdnice？

给出地址：https://www.mdnice.com/

进入之后我们便来到了这样简洁的界面，这里有两个窗口：

左边是你编辑的窗口
右边是实时展示的界面

可以看到，在左边使用 # * > 等符号书写实际上就是在右边规定了书写内容的格式——类比一下就是你在 word 里面设置了各类标题的字体，行距等等。不过不用鼠标点，只需要输入一个简单的 #

修改主题和导出到公众号

点击主题->选择橙心，简单两步，你就拥有一个暖色的模板啦。我们看到，不论是各级标题，还是引用段落都变化了格式。

Gif 中，我们完成了三项任务：

我们先添加了刚刚制作的一张 gif 图，过程很简单：从桌面拖动进来就 ok~
我们通过点击菜单栏->主题->橙心修改了我们的主题样式
点击右侧绿色按钮复制到公众号，完成编辑

如果有一个很不错的模板（主题），整个排版过程是不是省时省力呢？

自定义主题

这一部分我介绍一下我怎么玩自定义主题的——没人教我，只好自己走野路子啦。先明确一点，一点都不难。 在此之前我只知道 CS，不知道 CSS。

我们先打开现有主题的 CSS 样式查看一下，猜测下这个游戏可能个什么规则。

点击菜单栏->查看->主题CSS区域

这里我们做了三步：

打开了主题 CSS 区域，就是最右侧的面板
找到了引用部分#nice blockquote对应的代码
修改了这段代码里的属性

从中间的预览界面，我们看到，"道德经"的引用的格式发生了变化。为什么是这样呢？

我们看一下从橙心主题中复制过来的样式的具体含义：

我们把它复制到了 blockquote（引用）部分的代码中，所以它修改了引用部分的格式
它的代码如下：

  border-left-color: rgb(239, 112, 96);
  background: #fff9f9;

使用我八级水平的英语，我一眼就看出来：

第一个设置了边界左侧的颜色，应该是橙色
第二个设置了背景颜色。虽然是一堆奇怪的数字，应该代表背景的浅色

我相信凭大家的实力，找个取色软件，把这些颜色替换成自己喜欢的应该是不成问题的。

该我上场表演啦

我觉得自己的水平已经差不多可以完成横向滑动图片的制作以及另一个任务了。

我找到一篇很不错的文章。我想用 mdnice 制作和它一样的排版风格，分为以下几步，敲黑板！

在浏览器中打开那篇文章

为什么要在浏览器里面？因为我要我需要找到复制的排版的格式是怎样的——就好比你想查看大神的 word 用的是几号字体一样。这个过程我要借助浏览器。

找到想要排版内容的格式

仔细看 gif 图片的操作，很简单的。

首先，我们点击我们喜欢的那个元素，右键->检查（你可以在谷歌 Chrome 浏览器中完成这个操作，也可以在火狐浏览器中进行，IE 行不行，我不清楚。）
看到跳出来一个窗格，有一行高亮的部分，其中的 style 就是对应我们这部分内容的格式（字体）。

复制 style 中内容到自定义主题

我们把 style 里面的内容复制出来，粘贴到 mdnice 中的自定义主题中。

效果是，本来黑色的字体，在粘贴完代码之后变成了蓝色，同时字体属性也发生了变化。

主题中的 css 语法

我们看一看主题中写的东西是怎么发生作用的。（为了清晰我关掉预览窗口）

左边有两个 class，分别名字是 first 和 blue，右边自定义样式里面正好也有两个，分别是

- .first {}
- .blue {}

也就是说，你在正文里面创造了两个分别叫做first和blue的班级(class)，这两个班级有什么样的特征呢？恰好是对应的右侧的 css 样式定义的。

在动图里面，我们把那段代码复制进了 .blue中，对应正文中使用了 class="blue"的字体就变色了。这段代码除了设定颜色还做了什么事情呢？

color: rgb(68, 130, 183);
letter-spacing: 1px;
font-family: 微软雅黑;
font-size: 15px;

这段代码很好理解。它规定了

对应的文字的颜色
字符之间的空隙大小
字体
字号

以后你但凡使用叫做blue的 class，比如

<span class="blue"> 对象 </span>

电脑就召唤出一个蓝色的对象，效果如下：

对象

你要是觉得写一个 span 太难了。其实我也觉得难。但是你说你写什么符号能让电脑读懂呢？你总得告诉电脑你的记号规则。

尤其是 #、>、*这些简单的符号又被占用了的情况下。

class: "first"的说明

这个类是我用来插入前面的书本图像所使用的。

.first:before {
  content: "";
  background-image:url(我的图片.png);
  background-size:100% 100%;
  display: inline-block;
  width: 26px;
  height: 28px;
  vertical-align: bottom;
}

格式定义如上，给出了背景图的 url，同时规定了一下别的我也不太了解含义的参数。具体可以参考萌绿主题的 h3 标签写法。

马失前蹄

本以为使用浏览器检查读取 CSS 样式复制过来的技能能以不变应万变。没想到一技之长，不足傍身啊。

下面我就要来处理横屏滑动图片了。在mdnice 的说明文档里面写了，使用下面的语法就可以做到这一点

<![](url1)![](url2)>

其中url1和url2就是我们插入图片的链接。我们可以通过将图片拖动到mdnice中获得这个链接。

但这不是还得切分一下图片。我想能不能直接拖图片进来，然后调整大小直接做出效果呢？

还是老办法，看看成功的例子在浏览器里的样式代码是怎样的：

<p class="flow">
  <p style="width: 250%;">
   <img src="https://imgkr.cn-bj.ufileos.com/f70208cb-4c6c-4594-97af-83c4df645cfc.png">
  </p>
</p>

对应的 css 样式为

.flow {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  -webkit-overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  -webkit-overflow: touch;
}

解释一下：