在上一篇文章中，我已经说明了文档本地化的必要性。
那么，如何做好文档的本地化管理呢？需要考虑哪些方面呢？
- 文件管理简单，通用性强
- 支持功能多，无需复杂手动调节，一次编写，自动成形
- 具有一定的可编辑性，方便后期调整纠错
一、选择哪种文件格式？
考虑到文件需要本地保存，那么，最重要的一点就是这个格式需要在很长的一段时间，都可以被支持。因此，一些小众软件的私有格式就被排除在外，比如 notion、wolai 等软件私有格式。
而考虑到文件的可编辑性，PDF 不是一个很好的保存方式，因此，PDF 格式只能用于阅读，必须保留一份“源文件”用于修改编辑。
而基于此，我选择了市面上比较常见的文件格式，做了横向比较：
| 格式 | md | docx | html（epub） |
|---|---|---|---|
| 方式 | 纯文本 | 富文本 | 纯文本 |
| 样式自定义 | 不支持，只能在对应编辑器中使用，无通用语法 或者需要导出为 PDF 或 HTML |
支持，使用 Word 样式 | 支持，使用 CSS 自定义 |
| 文字内容书写 所见即所得 |
★★★★☆ 需要编辑器支持 |
★★★★★ | ★★★☆☆ 标签对形式 |
| 图片引入 | 支持本地图片引入 支持网络图床引入 |
支持本地图片插入 网络图片插入会自动转存为本地图片 |
支持本地图片引入 支持网络图床引入 |
| 代码块高亮 | 支持 | 支持 需要 VBA 编写代码，自动化处理 或从其他代码编辑器中粘贴高亮格式 |
支持 需要用到 JS 及自定义高亮 CSS |
| 视频播放 | 支持在线播放 引用网络链接即可 |
不支持 仅可插入链接，无法本地播放 |
支持在线播放 通过 iframe 或 video 嵌入 |
| 公式 | 原生支持 LaTeX | 原生支持 Unicode 公式 高版本支持 LaTeX 公式 |
支持，需使用 MathJax 框架 |
| 提示块 | 不支持 | 支持，自定义段落样式 | 支持，设置不同 class 的 div |
| 文章折叠 | 支持 | 支持 | 支持 |
| 脚注/尾注 | 支持尾注 | 支持 | 支持，需使用 JS |
| 思维导图 | 无法实现 | 插入图形，手动调整，比较复杂 | 可用 JS 做处理，导出为 svg 图片 |
| 自动生成目录 | 大部分编辑器支持 [TOC] | 可自动生成 | 需要 JS 处理 |
| 标题自动编号 | 不支持 | 支持，使用编号列表 | 需要 JS 处理 |
| 表格调整 | 无法实现单元格合并，需安装各种插件，且需要对应编辑器才可识别 | 可视化调整 | 容易调整，但非可视化 |
| 绘图 | 不支持，需其他软导出为图片 | 支持 | 不支持，绘图功能较复杂，本人能力有限 |
obsian 不支持导出 HTML 文件
看到很多人推荐 obsian，这款软件我也测试了一下，但是由于马克党自身的限制，他并不能很好的满足我的要求，比如说对表格中的某个单元格进行合并，固定表格的表头，向下滚动等等。
我想要实现这些功能，就需要你下载各种各样的插件，但由于这些都是一些私有的MD属性，并不被主流的MD软件所支持，如果这个软件滞后不能再用了，那么我的数据就被打回原形了。
而对于MD文档来说，最终要想获得较好的显示效果，通常是会生成一份html文档，因为html文档就是我们在页面上在网站上浏览的内容，可以说，几乎你所能看到的任何浏览器上的效果，它都可以实现。
而上述软件导出的html格式上，含有很多的荣誉并不能做到样式分离，也就是说内容与样式结构分离开代码会显得比较乱。
我能不能做这样的一款工具呢？
四、如何实现
不同结构自定义样式
使用CSS，规定不同结构如h2、p等标签的样式，并规定 每个 class 所对应的结构是什么含义。生成书写规范。
代码块高亮
通过引入 hight.js 及对应的主题文件，自动对代码块高亮。
数学公式插入
通过引入MathJax模块，使用 LaTeX 公式语法，嵌入数学公式。
文章内容折叠
通过引入 JS，点击各个级别的标题，执行折叠此级别标题下的内容，再次点击展开。
思维导图
规定何种类型的DIV会被视作思维导图，在里面每个
通过引入 JS，
自动编号
图片嵌入 HTML
默认的图片是存储在本地，通过链接的形式引入并展示，如需分享给他人，需要发送整个文件夹。此时可以选择将图片转为 base64 编码，以文字的形式保存。
但需要注意，这样处理后，不方便后期编辑，打开 HTML 文档速度会受影响。
目录生成
通过 JS 获取 h2 - h6 的标题文字（h1为文章标题，不属于大纲级别），生成目录列表。可嵌入到文档内部，也可独立形成大纲列表。
【图】
很多的文件已经规定好了字体大小，在不同的设备中显示可能不太一样，比如在手机端阅读正常，在 iPad 端可能字体比较小的，需要一个这样的按钮。
支持图片的查看
支持更多的 CSS 样式
能控制文字，图片等媒体文件的格式，采用的就是CSs，很多的阅读器并不支持，能显示效果非常糟糕。
尤其是在插入代码块的情况下，把与正文的文本进行区分。
这是有某些特定意义的段落，比如注释段提醒段，强调段等：
另外，某些阅读器，在阅读过程中添加广告，甚至是在文字正文内容中，就有点野蛮的味道了。
你可以提供一个付费的功能，去掉这样的广告。
款阅读器如果能保存我们的阅读信息，比如这本书，我现在读到了哪里？有哪些批注？是需要一定的服务器成本的，作为会员内容，相信很多人也会为此付费的。
支持本地及WiFi导入，
注释需要在当前页显示，不同于纸质书籍，可以在一页纸的下方进行注释，我们的电子书，由于字体大小的改变，可能无法确定一个屏幕所能容纳的文字，也就谈不上底部了。是你需要在需要标注的地方及时显示注释：
另外，如果支持视频或音频的嵌入，可能就更好了。
为此我在iPad上下载了目前主流可以下载到的阅读器，对他们进行了一个对比。
选择多看
为什么？
条件：
兼容任何平台
可以展示动图
排版美观
能够实现自动编号
用什么？
HTML+CSS（+JS）
每个平台上都可以使用浏览器进行浏览文章。
并且，网页可以承载各种媒体文件，比如常见的文字、图片等，而相比于Word，他可以使用流动布局，没有页的限制。
而相比于一些自媒体平台，除了微信外，大部分平台只支持文字大小、颜色的调整，其他的样式无法实现，比如给整行添加一个底色：
【图】
还有一点，这些平台，大多是与时间相关的，没有系统性。
具体的我就不分析了，下面主要写一些我实现这种技术的步骤。
▌HTML的不足及改进方式
由于HTML中，是以标签作为区分不同内容的，比如
这是一个段落
虽然这种方式，可以将每句话、每个文字的含义表述地非常好，但每写一段话，就要加上这种标签，我们在写东西的时候，就不是特别流畅。
而Markdown语法，可能更适合心流写作。
通过手写各种正则表达式
通过软件自动转换
而手写正则表达式，一方面非常浪费时间，另外一方面还要考虑里面的逻辑性，实现起来太复杂了。
因此，我采用了第二种方式。但这时，选择什么软件或网站就是摆在我面前的另一座大山了。
在经过层层的筛选后，我选择了mdnice这个网站来进行转换：
【图】
虽然，这个网站并不是直接生成代码，但使用开发者选项时，可以看到，转换后的代码还是很干净的：
【图】
另外，也可以使用 Typora 这个 md 写作软件进行转换，这个不用你再去复制、粘贴，创建文件等操作了。
当然，这种转换不是特别完美的，还是需要我们后期进行调整的。
比如图片的显示，Typora 会将图片转为文本，这将导致 HTML 文件的体积大大增加。而我更喜欢图片等媒体文件与 HTML 文件分离的传统方式。
因此，我会构建一个正则表达式，将这些img全部清除，最后通过手工的方式再添加上去。
之后，我们还需要对这些转化后的 HTML，加上样式。
这里是我使用的一些基本样式：
【图】
比如普通的文字颜色为#3f3f3f，不是纯黑
文字的间距、行距等都需要一一设置。
这里，我就不做过多的演示了。
另一方面，我的文章中，可能会有大量的代码，而使用普通的HTML+css无法实现精准的美化，还需要配合JS实现。
幸好，有其他的开发者创造了heightlight这个js文件，按照官方的方式，直接引用即可。
【图】
若有收获，就点个赞吧
0 人点赞
