插件由鱼二飞(Yuerfei.cn)小伙伴 提供，由于我博客的内容几乎都是从EMLOG迁移过来的，搬迁后又使用了Handsome主题，所以这里只针对我博客做了相关兼容性修改，并且做一个修改记录方便以后主题升级更新。

注意

看到本篇文章的朋友，如果索取插件，请到我的好朋友Xcnte小伙伴的博客，那里有完善后的版本。点我去拜访

导入插件包

将修改过的MacHighlight插件包放到plugins目录下，并且在后台开启插件

修改代码高亮CSS

1.外观设置->代码高亮的风格选择->自定义
2.将插件目录下的/usr/plugins/Highlight/res/styles/customemin.css内容全部复制到handsome主题/usr/themes/handsome/assets/css/features/code/custome.min.css里。
3.删除/usr/themes/handsome/assets/css/handsome.min.css中所有关于pre、code标签的CSS
4.handsome自定义css中添加

/*此处修改只针对旧文章代码块的处理*/
pre{color:#fff;}

Pjax回调

如果Handsome开启了Pjax加载，那么就需要在后台里设置Pjax回调函数。代码如下:

$('pre').append('<button class="copy_code">复制</button>'); 
$(document).ready(function(){
    $(".copy_code").click(function(){
        $(this).html('复制成功');
        console.log($(this).prev('code').text());
        $(this).html('复制');
    })
});
$('pre').on('click', function (e) {
  if (e.target !== this) return;
        //EMLOG旧文章兼容(如果是旧文章则不支持放大功能)
      if ($(this).attr('old') == 1) {
          return;
      }
     $(this).toggleClass('code-block-fullscreen');
  });
  
  var l = $("pre code").find("ul").length;
  if(l<=0){
     $("pre code").each(function(){
     $(this).html("<ul><li>" +$(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ul>");
    });
}

EMLOG旧文章兼容

在每篇旧文章头部加入：

<style>
pre, article pre {
    max-height: 300px;
    overflow-y: scroll;
}
.code-block-fullscreen{
    overflow: scroll;
}
</style>

在尾部加入：

<script>$("pre").attr('old', 1);</script>

备注

配置好以上，就可以使用Mac风格的代码高亮了，目前排除了一些BUG，代码复制功能还在开发中……

最后修改：2019 年 04 月 09 日 06 : 47 PM
© 允许规范转载