当然，除了理清里面的逻辑和思路外，我们的笔记最终是需要展示给我们自己，以供我们之后搜索查看。

这时，笔记的排版就尤为重要了。

一方面展示会更清晰，另外一方面，在之后的搜索过程会更顺畅。

之前也尝试过其他的形式，比如使用Word进行排版，但限于Word是为打印服务的，不能支持动态图和视频等多媒体格式，而现在很多的在线笔记也可以完成，比如有道云笔记、语雀笔记、印象笔记等，但这些笔记是保存在他们公司的服务器中的，这就会受到公司的限制，万一哪一天，如同之前的360网盘一样，宣布停止服务，我们之前积累的笔记，想要导出，就显得很困难了。

因此，我更希望使用本地文件的方式，进行数据的保存。

那么，选择哪种格式呢？

【文章】

这个之前有介绍过，这里不再赘述。

使用Markdown最烦的一点，就是图片需要图床来完成，否则无法加载图片。而很多的图床，使用起来又恨复杂，并且，即使是付费的，也也有可能有一天会不做了，即使可以批量转移，但你文章中的路径还需要修改，不如直接使用本地保存方式。

首先，是排版样式，这里，我也借鉴了一些大佬的样式，形成了自己的一套简洁排版。

因为，越简单的排版，在同步到其他的平台，就越容易。

但即使看起来非常简洁，但里面包含的内容却不少。

● 左右滑动查看图片
● 上下滑动查看长图
● 根据编程语言代码自动高亮
● 公式展示要清晰
● 多级标题需要可自动编号
● 图片题注可引用
……

这里，我参考了mdnice的网站实现的方式。

接下来，我一一讲解：

左右滑动查看多张图片

上下滑动查看长图

为减少某些长图影响版面排版，需要对其折叠

因此

LaTeX公式

很多的公众号文章，一般的文章都是文字+配图，多为一些情感类，只需要文字和图片即可。

而针对技术性的文章，里面就会涉及到一些公式了。

而公式，可是使用 MathJax 包实现

https://blog.csdn.net/winter2121/article/details/105576380

当然，你可以使用语雀或者其他在线公式录入编辑器，将公式转换为svg图像，把它作为图片进行插入。

但转换为svg后，公式不能修改，如果修改，还需要重新生成svg图片。

而在使用时，只需要使用div.ffff包裹即可。

【具体事宜还需要确定】

根据编程语言代码自动高亮

【编程语言自动高亮】
这个需要使用JS做判断，并对其中符合条件的标签做对应颜色高亮处理。

当然，这里使用了hightlight的引用

在代码部分做如下的方式处理：

必须使用code > pre的形式，否则需要你自己修改JS代码

而代码css主题，可以自己定义：

【】

多级标题需要可自动编号

由于技术性文章一般来说都比较长，需要我们理清其中的大纲逻辑。

一般来说，我会用不同级别的标题来展示：

【图】

这个在Word中使用多级列表就可以实现，但到了HTML中，无法自动生成，需要通过JS来完成。

这里，我也编写了这样的一个JS代码：

只需要你引用过去就可以啦

而另外一种方式是，直接通过css样式来实现：

【图】

这里简单的说一下：

content 可以插入文本
表示创建一个编号
表示将这个编号自增1
表示引用这个编号

使用方式同计时器

而这里，我们可以这样理解，浏览器自上而下读取，遇到 H1，chapter 就 +1，同时，会在h1.before中显示对应的编号，碰到H2，section++

▌当然，这种形式的编号，可能无法直接选中复制。

图片题注可引用

简单的链接引用还是可以的，难点是，如何自动改变编号及编号的文字，比如，你引用的是「图 1.1」，这里的1.1如何实现？

总不能给每个图片都添加ID吧？

但由于这种方式不是特别常用，因为我们的引用的图片一般都在文字下方，因此，完全可以避开题注引用部分。

脚注注释

还有一部分文字，我们需要做好注释。
除了正常的直接在文章正文中进行说明，对于一些比较复杂的注释，我们可能还会用到脚注样式

类似参考文献

长表格可以固定表头和首列

需要通过JS进行处理