伍楼阁使用的WordPress代码高亮插件使用说明-优快云博客

本文介绍了WordPress插件SimpleCodeHighlighter的安装及使用方法，并详细讲解了如何修改代码显示样式，包括字体大小和字体类型的选择。

2019独角兽企业重金招聘Python工程师标准>>>

插件名称：Simple Code Highlighter

推荐理由：这个代码高亮插件正如她的名字一样，使用起来十分简单，没有繁琐的设置，使用的时候只要直接将代码贴进去就可以了。

安装方法：后台安装插件中直接搜索“Simple Code Highlighter”，安装、启用。

这里主要说明下如何修改代码显示样式（大小、字体等）。首先：安装完“Simple Code Highlighter”插件后，打开目录：wp-content/plugins/simple-code-highlighter下的estilo.css文件。在第一行之前加入如下代码：

@font-face{
    font-family: 'Monaco';
    src: url('fonts/monaco-webfont.eot');
    src: url('fonts/monaco-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/monaco-webfont.woff') format('woff'),
       url('fonts/monaco-webfont.ttf') format('truetype'),
       url('fonts/monaco-webfont.svg#webfont') format('svg');

我用的是苹果公司的Monaco字体，目前国内大多人用的还是Windows系统，显然系统不会自带Monaco字体，所以我们需要CSS引入外部字体。我们已经提供了Monaco字体下载：monaco-fonts-for-web 下载完后解压，将整个fonts文件夹放在：wp-content/plugins/simple-code-highlighter 目录下。

随后，将下列代码：

font-family: monospace;
  font-size: 9pt;

修改为：

font-family: 'Monaco';
  font-size: 11pt;

把字体大小修改成11pt个人感觉会更加好看些吧。

扩展阅读：

如果你不喜欢Monaco字体，你也可以从网上下载其他字体的。但网络下载的字体大多是TTF格式，我们如何得到.eot、.woff、.svg格式的字体文件呢？这里，为大家推荐一个可以在线转换字体格式的链接：https://www.fontsquirrel.com/tools/webfont-generator 希望你们能喜欢。

转载于:https://my.oschina.net/JeeChou/blog/1794304