我一直使用MWeb来维护我的网站。MWeb应用内的预览可以显示代码的行号。但是生成的网页不行。一年前我将这个问题提交给了MWeb的作者，他也承诺会尽快解决。但是一年过去了，完全没修。今天，我决定自己看看能不能弄好。

作者虽然没有修，但是提供了思路，说是需要将highlightjs改为prismjs。于是我来到了两者的网站，通过比较MWeb生成的网页代码，以及综合我之前修改MWeb主题的经验，我总结出了正确的替换步骤。

替换步骤

1. 来到prism的下载页，选择你需要的语言和代码风格。此外，还要把插件Plugins功能中的行号Line Numbers选上。

2. 点击网页最下放的下载，分别下载js文件和css文件。

3. 在MWeb中，右键点击你网站对应的分类，点编辑。

   

4. 在你选择的主题右侧，点击编辑。

   

5. MWeb会在Finder中显示主题所在的文件夹。

   

6. 在asset文件夹中创建文件夹，命名为prism。

7. 将之前下好的js和css放到上面新建的prism文件夹。

8. 用文本编辑器打开header.html，将第27，28行注释掉或删除，内容类似下方

<script src="asset/highlightjs/highlight.pack.js"></script>
<link href="asset/highlightjs/styles/xcode.css" media="screen, projection" rel="stylesheet" type="text/css">

并新增

<link href="asset/prism/prism.css" rel="stylesheet" type="text/css" />
<script src="asset/prism/prism.js" type="text/javascript">

最后保存这个文件。

现在你可以在MWeb中选择“清空并重新生成网站”，新的网站是会显示行号的了。

修改代码显示的字体

代码显示出来了，但是我觉得字体比较大。于是我打算修改字体。打开之前保存的prism.css文件。

1. 找到第15行，font-size: 1em;，将它改为font-size: .88em;。
2. 如果你此时重新生成网站，你会发现行号和代码的位置不对应，存在错位。这是因为，行号是单独生成的，它和代码之间的距离是需要计算的，而非直接对应。
3. 修改第21行，line-height: 1.5;为line-height: 1.32;。
4. 修改第142行，font-size: 100%;为font-size: 113.64%;。

这个规律是这样的：15行的默认值为1，如果你将其修改为a。那么21行，就是1.5*a，第142行就是1÷a*100%。

保存好这个文件。之后在MWeb中重新生成网站就可以了。