WordPress 教程:让highlight.js支持Mac风格代码高亮

基于highlight.jsMac风格代码高亮效果。在highlight.js基础上添加代码行数、Mac高亮风格、代码复制功能。

效果:

1. 使用

  • 引入 highlight
  • 引入 highlightjs-line-numbers
  • 引入 clipboard
  • 引入 样式文件
  • 添加 highlight-worker.js
  • 添加 wp-heightlight.js (highlight 调用脚本)

1.1 添加js

footer.php页面里</body>前添加脚本:

<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.7.0/dist/highlightjs-line-numbers.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
window.theme_url = "<?php echo get_template_directory_uri(); ?>";
</script>
<script src="<?php echo get_template_directory_uri(); ?>/js/wp-heightlight.js" type="text/javascript"></script>
    

或者你可以使用wp_enqueue_script插入到<?php wp_head(); ?>或者<?php wp_footer(); ?>中。

另外还需要把highlight-worker.jswp-heightlight.js放到主题同一目录下后面留用。

另外建议放到js目录,如果需要修改目录,可以到wp-heightlight.js找到下面内容修改:

// window.theme_url 为主题根目录
var worker = new Worker(window.theme_url + '/js/highlight-worker.js');

1.2 添加样式

在适当位置引入样式文件mac-style.css

相关文章

发表评论

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