wordpress代码高亮

在WordPress中实现代码高亮可以通过多种方式完成，以下是详细的步骤和方法：

1. 使用插件

a. Install and Activate Syntax Highlighter Plugins

1. 登录到WordPress后台。
2. 转到Plugins > Add New。
3. 在搜索框中输入“SyntaxHighlighter”或“Code Highlight”，然后点击“Search”。
4. 找到如WP Code Highlight或Syntax Highlighter Evolved (Prism.js)等插件，点击“Install Now”，然后激活。

b. Configure the Plugin

1. 设置短代码或按钮：

   • 激活插件后，通常会提供一个简码（shortcode），例如[code]标签来包裹代码块。
   • 可以在插件的设置页面调整默认的语言支持、样式主题等。

2. 使用示例：

   [code language="php"]
   <?php
   echo 'Hello, World!';
   ?>
   [/code]

2. 手动添加代码高亮库

a. 引入外部库

1. 下载代码高亮库：

   • 常用的有Prism.js、Highlight.js等。
   • 下载库文件并上传到你的主题目录，例如/wp-content/themes/your-theme/。

2. 在主题的functions.php中注册脚本和样式：

   function enqueue_code_highlighting() {
      wp_enqueue_style('prism-style', get_template_directory_uri() . '/css/prism.css');
      wp_enqueue_script('prism-script', get_template_directory_uri() . '/js/prism.js', array(), null, true);
   }
   add_action('wp_enqueue_scripts', 'enqueue_code_highlighting');

b. 修改主题模板

1. 在需要的地方插入代码块：

   <pre><code class="language-html">
   &lt;div&gt;
      &lt;p&gt;This is an example.&lt;/p&gt;
   &lt;/div&gt;
   </code></pre>

2. 自动初始化：

   • 如果使用Prism.js，确保在HTML文件的底部引入了Prism.js脚本，它会自动为带有language-前缀的代码块添加高亮。

3. 自定义高亮效果

a. 修改CSS

1. 编辑主题的style.css：

   /* Example: Change background color of code blocks */
   pre {
      background-color: #f5f5f5;
   }
   code {
      color: #333;
      font-family: Consolas, Monaco, Courier New, monospace;
   }

b. 自定义语言支持

1. 扩展支持的语言：
   • 对于Prism.js，可以在脚本加载时动态加入额外的语言文件。
   • 示例：

     wp_enqueue_script('prism-additional-languages', get_template_directory_uri() . '/js/prism-languages.js', array('prism-script'), null, true);

4. 测试与优化

1. 检查代码是否正确高亮：

   • 确保所有语法都按照预期渲染。

2. 性能优化：

   • 仅加载必要的语言和样式文件，避免加载不必要的资源。

通过以上步骤，你可以在WordPress中有效地实现代码高亮功能，并根据需要进行定制化。