2- wordpress使用 Highlight.js 高亮你的代码

原文地址:链接在此

今天给博客换了一个代码高亮插件 highlight.js 可以支持大多数语言,自动识别语言,而且可以根据心情随时切换代码块样式。

第一步

在 head.html 文件中加入:

<link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/solarized_dark.min.css" />
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>        
<script>hljs.initHighlightingOnLoad();</script>

第二步

完成第一步之后发现效果已经有了,但是多了一块白边,所以手动做了一个 hack,在 sass/parts/_syntax.scss 注释掉一行:

article{
 ... 
  pre{ 
  ... 
  /*padding: 5px 15px;*/
   ... 
  }
}

采用的主题不同,可能处理方式不一样,请参考。

第三步

直接使用在代码块之前空 4 个空格来高亮

initializer "active_record.initialize_database" do |app|
  ActiveSupport.on_load(:active_record) do 
      self.configurations = app.config.database_configuration || {} 
      establish_connection 
   end 
end

最后

配合 Mou 写 markdown,非常方便。而且根据喜好随时更换代码块颜色:highlight.js Style

enjoy!

交流


欢迎大家关注我的微博和我GitHub,我会不时分享和转发一些大牛的技术贴和开源项目.
GitHub:https://github.com/lilongcnc
博客地址:http://www.lilongcnc.cc


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容