心语难诉

MacHighlight.js代码高亮配置
插件由鱼二飞(Yuerfei.cn)小伙伴 提供,由于我博客的内容几乎都是从EMLOG迁移过来的,搬迁后又使用了H...
扫描右侧二维码阅读全文
10
2019/01

MacHighlight.js代码高亮配置

插件由鱼二飞(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中所有关于precode标签的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
如果觉得我的文章对你有用,请随意赞赏

发表评论

22 条评论

  1. Cinema
    该评论仅登录用户及评论双方可见
    1. 心语难诉
      @Cinema
      该评论仅登录用户及评论双方可见
      1. Cinema
        @心语难诉

        感谢!

  2. YAMADIE

    mark,感谢分享

  3. Oasis Lee

    ⌇●﹏●⌇非handsome不会用啊。。js该放哪里呢

  4. Wang

    学习了。。

  5. 马化腾我的QQ号码

    看起来还不错嘛!就是配置太麻烦了。

  6. 如默

    不错不错,先mark,等代码复制弄好直接换!

  7. 钧言

    不错啊 友链一个呗!

  8. OASIS

    太好看了吧 喜欢OωO

  9. Xcnte
    该评论仅登录用户及评论双方可见
  10. 一蓑烟雨

    不错,很漂亮。

    有一个问题,有的时候代码较长,显示不全。

    1. 心语难诉
      @一蓑烟雨

      可以向下滚动

  11. 鹤绝

    很好看

  12. 左岸

    来看看

  13. hulk

    贼炫酷,线mark一下

  14. 0day's blog

    上档次,支持。

  15. 洛小依

    不错,挺好看的