WordPress代码高亮非插件

Pre


自从换了主题,决定用markdown写文章之后,就再也不用原来的使用网站转换代码成高亮了然后插入文本了。但是新主题对代码效果不好。
终于在使用Remarkable这款linux下的markdown编辑器的时候,发现可以保存成有代码高亮格式的网页,通过导出成网页功能查看后发现是利用了highlight这个项目

使用说明

下载

https://highlightjs.org/ 下载文件,当然可以自定义自己需要的语言,下载完成后解压目录结构如下:

.
├── CHANGES.md
├── highlight.pack.js
├── LICENSE
├── README.md
├── README.ru.md
└── styles/

我们只需要两部分highlight.pack.jsstyles/文件夹中的一个样式,可以在官网查看到demo,这里我们选择androidstudio.css样式。

上传

highlight.pack.jsandroidstudio.css文件上传到你wordpress的wp-content/uploads/文件夹下

修改引用

在你wordpress主题的header.php</header>之前,添加如下内容:

<link href="http://yourdomain.com/wp-content/uploads/androidstudio.css" rel="stylesheet"/>
<script src="http://yourdomain.com/wp-content/uploads/highlight.pack.js">  </script>
<script>   hljs.initHighlightingOnLoad();  </script>

删除缓存

如果你用了wp-super cache之类的话,删除缓存,否则只需要刷新网页即可。

语言高亮

一般脚本会自动高亮,但是可以在写markdown格式博客的时候,就直接指定好语言,如果你是用markdown写,代码这种格式
“`
yourcode
“`
在第一个“`后面添加之前自定义的支持的语言即可。

文章版权归 FindHao 所有丨本站默认采用CC-BY-NC-SA 4.0协议进行授权|
转载必须包含本声明,并以超链接形式注明作者 FindHao 和本文原始地址:
https://www.findhao.net/easycoding/1152

你可能喜欢:(相似内容推荐和广告都使用了谷歌的推荐系统,需要对本站取消广告屏蔽才能显示。感谢点击↓广告支持博主~)

Find

新浪微博(FindSpace博客)QQ群:不安分的Coder(375670127) 不安分的Coder

6 条回复

  1. 可以在php里判断一下是不是文章内容页,再决定是否输出改行JS和CSS

  2. liwanglin12说道:

    好像没用诶。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*