介绍

在wordpress文章中,如何高亮插入的代码块

步骤

WordStar主题为例

修改主题页面

  1. 打开theme Editor
  2. 编辑header.php
  3. 在head标签中插入一下代码
    <link href="https://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">  
    <script src="https://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>  
    <script >hljs.initHighlightingOnLoad();</script>
  4. 保存

修改样式,隐藏白色边框

  1. 打开style.css,搜索pre {
  2. 注释掉pre { 中的边框部分
    pre {
    border: 1px solid #d1d1d1;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.3125;
    margin: 0 0 10px;
    max-width: 100%;
    overflow: auto;
    /*  padding: 1.75em; */
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
    }
  3. 保存并刷新含代码块的文章,便可以看到代码块已经高亮了

发表评论

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