给文章添加涂黑可以刮开的文字效果
在萌娘百科中，经常见到涂黑的文本就像这样，鼠标指向时会显示出被涂黑的内容，于是扒了扒萌娘百科的网站代码，找到了对应的 css 代码：
span.heimu a.external,span.heimu a.external:visited,span.heimu a.extiw,span.heimu a.extiw:visited{color:#252525}.heimu,.heimu a,a .heimu,.heimu a.new{background-color:#252525;color:#252525;text-shadow:none;}body:not(.heimu_toggle_on) .heimu:hover,body:not(.heimu_toggle_on) .heimu:active,body:not(.heimu_toggle_on) .heimu.off{transition:color .13s linear;color:#fff}body:not(.heimu_toggle_on) .heimu:hover a,body:not(.heimu_toggle_on) a:hover .heimu,body:not(.heimu_toggle_on) .heimu.off a,body:not(.heimu_toggle_on) a:hover .heimu.off{transition:color .13s linear;color:#add8e6}body:not(.heimu_toggle_on) .heimu.off .new,body:not(.heimu_toggle_on) .heimu.off .new:hover,body:not(.heimu_toggle_on) .new:hover .heimu.off,body:not(.heimu_toggle_on) .heimu.off .new,body:not(.heimu_toggle_on) .heimu.off .new:hover,body:not(.heimu_toggle_on) .new:hover .heimu.off{transition:color .13s linear;color:#ba0000}
将 css 插入到 博客 - 外观 - 自定义 - 额外CSS 中，就可以在博文中使用涂黑的文本了
使用的方法是在编辑时切换到 HTML 编辑模式，输入一个 <span> 标签， class 值设为 "heimu" ，可选属性为 title ，用来设置鼠标指向时浮现的气泡文本
举个例子：啦啦啦啦
对应的代码是：
<span class="heimu" title="我是个栗子">啦啦啦啦</span>
P.S. 我查了一些资料，想把这个功能做成一个按钮添加到 WordPress 的可视化编辑器中，方法找到了，但是按钮是通过 js 编写的，由于看不懂 js 代码，就先作罢吧……
为 WordPress 添加 \LaTeX 数学公式显示功能
首先在后台搜索插件 Mathjax-Latex 并安装
理论上讲只要安装这个插件就能实现在 WordPress 中插入 \LaTeX 数学公式了，但是由于 MathJex 默认 CDN 无法通过 GFW，需要在自己的服务器安装 MathJex 服务
截止目前，插件 Mathjax-Latex 的版本是 1.3.11 ，已经有 1 年没更新了，支持的 MathJex 版本是 2.7.5 ，所以我们到 GitHub 下载 2.7.5 版本的 MathJex ：
P.S. 不要下载最新版本！别问我为什么……
https://github.com/mathjax/MathJax/archive/2.7.5.zip
下载好后解压到网站目录下（随便哪里，我放在 Mathjax-Latex 插件目录中），然后在 Mathjax-Latex 插件设置中将 Custom MathJax location? 填写为 MathJax.js 的路径即可，例如：
/wp-content/plugins/mathjax-latex/MathJax-2.7.5/MathJax.js
此时，在文章中就可以插入 \LaTeX 数学公式啦~
举个栗子：\oint_LH\cdot dl=I_0+\iint_S\frac{\partial D}{\partial t}\cdot dS
输入格式：
[ latex ]\oint_LH\cdot dl=I_0+\iint_S\frac{\partial D}{\partial t}\cdot dS[ /latex ]
P.S.由于插件强制转义，[]内加了空格
P.S. 这个插件对 \LaTeX 支持不完整，有些符号可能无法转义，如二重环路积分 \oiint
为 WordPress 添加 \LaTeX 数学公式显示功能 - 2
上一节提到使用 Mathjax-Latex 插件配合本地 Mathjax 实现 WordPress 显示 \LaTeX 数学公式，但是上节末也提到，（大概是）由于插件长久不更新，对 \LaTeX 支持不够完整，以至于连个麦克斯韦方程组都显示不出来。为了满足插入麦克斯韦方程组的虚伪愿望，我找到了办法：
非常简单，在 WordPress 插件库搜索 wp-katex 安装就好了，使用方法和 Mathjax-Latex 一样，在 \LaTeX 代码前后用 [ latex ] 和 [ /latex ] 引起来就行了
例如麦克斯韦方程组：
对应代码为：
[ latex ]\left\{\begin{matrix} \begin{aligned} \oiint_S \mathbf{D}\cdot \mathrm{d}\mathbf{S} &= q_0\\\oiint_S \mathbf{B}\cdot \mathrm{d}\mathbf{S} &= 0\\\oint_L \mathbf{E}\cdot d\mathbf{l} &= -\iint_S\frac{\partial \mathbf{B}}{\partial t}\cdot d\mathbf{S}\\ \oint_L\mathbf{H}\cdot d\mathbf{l} &= I_0+\iint_S\frac{\partial \mathbf{D}}{\partial t}\cdot d\mathbf{S} \end{aligned} \end{matrix}\right.[ /latex ]
P.S.由于插件强制转义，[]内加了空格
怎样输入文字拼音
文字拼音的效果是通过 <ruby> 、 <rt> 、 <rp> 这三个 HTML 标签实现的，这三个标签是 HTML 5 新加入的，作用就是给中文、日文等字符注音
注意：Internet Explorer 8 以及更早的版本不支持这三个标签！
<ruby>用来包裹整个需要标注的部分<rt>用来包裹标注的内容<rp>用来定义不支持 ruby 元素的浏览器所显示的内容
下面演示在支持以及不支持 HTML 5 的网页上的显示效果：
使用 <rp> 的用法：
<ruby> 漢<rp>(<rp><rt>hàn</rt><rp>)</rp> </ruby>
显示为：
不使用 <rp> 的用法：
<ruby> 漢<rt>hàn</rt> </ruby>
显示为：
使用 <rp> 的用法：
<ruby> 漢<rp>(<rp><rt>hàn</rt><rp>)</rp> </ruby>
在不支持 HTML 5 的网页上显示为：
不使用 <rp> 的用法：
<ruby> 漢<rt>hàn</rt> </ruby>
在不支持 HTML 5 的网页上显示为：
另附25个拼音字符： ā á ǎ à、ō ó ǒ ò、ē é ě è、ī í ǐ ì、ū ú ǔ ù、ǖ ǘ ǚ ǜ ü
怎样输入文字拼音 - 2
上节提到，文字拼音的效果是通过 <ruby> 、 <rt> 、 <rp> 这三个 HTML 标签实现的。其实不然，我漏掉了一个标签—— <rb>
<rb> 标签同样是与 <ruby> 配合使用的，它的作用是包裹整个被标记的文本，从而对多个字符同时进行标记，下面用例子说明：
① 不使用 <rb> 的例子：
<ruby> 汉<rp>(</rp><rt>hàn</rt><rp>)</rp> 字<rp>(</rp><rt>zì</rt><rp>)</rp> </ruby>
① 显示为：
② 使用 <rb> 的例子：
<ruby> <rb>汉字</rb> <rp>(</rp><rt>hàn zì</rt><rp>)</rp> </ruby>
② 显示为：
从上面的例子可以看出，对于汉字注音来说，两种方式的代码显示效果是一致的，但是当字数大于一时，使用 <rb> 可以使代码缩短
下面继续举例，展示一个不用 <rb> 无法实现的情况：
③ 必须使用 <rb> 的例子：
<ruby> <rb>汉字</rb> <rp>(</rp><rt>Chinese</rt><rp>)</rp> </ruby>
③ 显示为：
容易看出，当被标记的字符数与标记的内容数量不对等时，就必须使用 <rb> 标签，不然就只能做成：【汉字】 或者 【汉字】了，或者……【汉字】？hhhh
另外，<rb> 标签还有一个优点，就是使用涂黑文本时，参数 class="heimu" 写在 <rt> 中，使用 <rb> 标签，标注部分是一个整体，比如这样： <rb> 标签，虽然也能涂黑，但是两个部分不能同时显示，就像这样： 汉字
代码如下：
④ 使用 <rb> 的涂黑文本：
<ruby> <rb>汉字</rb> <rp>(</rp><rt class="heimu">hàn zì</rt><rp>)</rp> </ruby>
④ 显示为：
⑤ 不使用 <rb> 的涂黑文本：
<ruby> 汉<rp>(</rp><rt class="heimu">hàn</rt><rp>)</rp> 字<rp>(</rp><rt class="heimu">zì</rt><rp>)</rp> </ruby>
④ 显示为：
文章评论