单独使用且文本内容较多的说明性页面需要做的时候，用markdown写然后用js渲染成html是不错的办法。
较早前已经尝试showdown，今天在写一个帮助页面时发现不支持表格语法于是搜了下替代的项目，找了下确实有不少选择，换成了 marked.js。
转换成html还需要找个github风格的css配合使用，这次选的是 github-markdown-css。
我之前使用的样式是 foundation.min.css, 现在换用 github-markdown.css 需要把 markdown容器加上 class="markdown-body"
其实两个样式方案都非常的不错，可以看自己的喜好选择。
资源链接见底部，我们先看html代码(其中注释掉的是之前的showdown的用法，也很简单)
php代码，添加到输出的html末尾
<?php
if(date("Y-m-d")=='2020-04-04'){
?>
<style type="text/css">
<!--
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}
-->
</style>
<?php
}
?>也可以手动css文件头加这行（活动结束后手动撤下）
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}书接上回前文再续，下一步根据这个字典里的汉字做索引打包新的字库文件。
不是第一次弄这个东西，一套流程下来觉得步骤还是有点繁琐，所以备忘一下。
设计网页的时候常会用到一些非系统自带的字体，要实现的做法不外乎以下几种
无论1或是2，都有比较明显的缺点。
作为图片处理的话，每次出现一个小改动比如说需要改动个别文字，那就得打开PS重新做一个图片素材，而且网页加载图片展现效果和对带宽的利用都不甚理想。
外挂ttf字库的话浪费带宽流量的问题则更为严重，如果是西文字库还好（也就十几个符号和大小写52个字母）中文的话字库文件通常2M起步，整套粗细斜字库像阿里普惠体一共30M+。用户手机打开你的页面单单为了显示文字就不见30M流量是不实际的，如果同时来一千几百个用户，服务器更是会因为带宽堵塞直接扑街。
那有没有好的解决方案，有！把项目需要用到的字提取出来重新打包成一个定制化的字库文件，也就是做TTF压缩。
啰嗦科普完，下面开干。内容分上下两篇
不知道是不是业内还有其他更专业更成熟更快捷傻瓜高效优雅的方法，以下仅仅是自己的一点摸索罢了。
工作到头脑发昏想着暂停一下让自己喘口气，记起来好像在群里有某个网友求扫雷的源码。
去github和百度逛了一圈都没有觉得比较好的。然后就撸起袖子—— 完蛋，一个小时不见了。
试玩自己写的游戏自己通不了关不死心，反复重试又不见了30分钟。
最后还加上了作弊码...
