也想出现在这里?联系我们

纯代码WordPress免插件实现代码高亮显示

2024.02.23 wordpress教程
  • 文章介绍
  • 升级版本
  • 评价&建议

要在WordPress中纯代码实现代码高亮显示,您可以按照以下步骤进行操作:

  1. 编辑主题文件:首先,登录到WordPress后台,进入外观(Appearance)> 编辑器(Editor)。

  2. 选择主题文件:在编辑器中,选择您当前正在使用的主题。通常,您需要编辑主题的functions.php文件和style.css文件。

  3. 添加样式:在style.css文件中,添加用于代码高亮显示的CSS样式。您可以使用一种CSS预处理器,如Sass或Less,来更轻松地管理样式。

    / 代码高亮样式 /
    pre {
       backgroundcolor: #f7f7f7;
       padding: 10px;
       border: 1px solid #e1e1e1;
       overflowx: auto;
    }
    
    code {
       fontfamily: Monaco, Consolas, "Courier New", monospace;
       fontsize: 14px;
       color: #333;
    }
  4. 编辑functions.php:在functions.php文件中,添加以下代码,它将启用WordPress支持代码高亮显示:

    // 启用代码高亮显示
    add_action('wp_enqueue_scripts', 'add_custom_highlightjs');
    function add_custom_highlightjs() {
       wp_enqueue_script('highlightjs', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js', array(), null, true);
       wp_enqueue_style('highlightjsstyle', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css', array(), null);
    }
  5. 使用代码高亮:在您的文章或页面中,使用<pre><code>标签来包装您的代码块,然后添加适当的类以指定代码语言,例如:

    
    // 这里是您的PHP代码
    

    请确保将class属性的值设置为适当的代码语言,以便Highlight.js能够正确地高亮显示代码。

  6. 保存并更新:保存您所做的更改,并在需要的页面上更新或发布文章。

现在,您的WordPress网站应该能够使用纯代码实现代码高亮显示,无需插件。请注意,使用第三方库(如Highlight.js)需要您的网站连接到互联网来加载样式和脚本文件。如果您希望本地托管这些文件,您可以下载它们并将它们添加到您的主题目录中,然后在functions.php中使用本地文件的路径。

有用0
  • 2024.02.23初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧