MacPanel代码高亮配置

  • 原作:hexo-code-block

  • 推荐这个MacPanel代码样式的原因:

    • 漂亮精致,苹果家Mac相关设计一直还是比较得我心的ヾ(o◕∀◕)ノヾ
    • 顶部栏可以展示代码所使用语言,有助于阅读者更好的阅读代码(≧▽≦)/
  • 直接按照原文操作无法正常展示,因此本文基于原作,针对NexT主题做了微小的修改使之正常显示

版本

  • hexo: 3.3.7
  • hexo-cli: 1.0.3
  • NexT.Pisces: v5.1.4
  • highlights theme: night bright

效果展示

原作者博客效果:
原作者博客

NexT.Pisces主题下适配成功效果:
NexT.Pisces适配

适配修改过程

原本默认的,加上行号的代码展示效果是这样的:
两列颜色不一

现在我们来一步步修改:,首先照原博所说创建codeblock.js,并将css样式加入全局,这里我放在全局的custom.styl

$ vim themes/next/scripts/codeblock.js 
//粘贴内容
$ vim themes/next/source/css/_custom/custom.styl 
//style标签包裹后粘贴

然而重新部署后得到的结果却是这样的○| ̄|_:
效果不佳

底部白边,上面部分挡字且行号列颜色与代码主题颜色不一显得不好看,所以我们首先使行列的底色与代码一致:

$ vim themes/next/source/css/_common/components/highlight/highlight.styl

找到如下部分:

.gutter pre {
  padding-left: 10px
  padding-right: 10px
  color: $highlight-gutter.color
  text-align: right
  background-color: $highlight-gutter.bg-color
}

删除最后一行配置background-color: $highlight-gutter.bg-color,此时我们可以看见行号列底色与代码已经一致了

行号列底色与代码一致

接下来处理白边和顶部。以我多年踩坑不倦的经验来看,不是margin就是padding出了问题,寻找测试一波后get正确参数。此时再次打开这个文件

$ vim themes/next/source/css/_common/components/highlight/highlight.styl

找到如下部分代码,修改margin为36px 0 0 0

$code-block {
  overflow: auto;
  margin: 20px 0;
  padding: 0;
  font-size $code-font-size;
  color: $highlight-foreground;
  background: $highlight-background;
  line-height: $line-height-code-block;
}

到此结束,get正确展示结果如下:

NexT.Pisces适配

这里顺便推荐一个样式相似的代码生成图片项目:https://carbon.now.sh,生成代码格式非常漂亮,有一键发送到Twitter的功能,可调节参数很多

enter image description here

enter image description here

enter image description here

P.S 会不会原作者其实就是受该项目启发的?不过这种样式很常见,说不好

有感而发

持续折腾

  • 作为一个明明不想写前端但又总是会被漂亮的东西吸引进而控制不住自己开始动手的后端选手,我能怎么办,我也很绝望啊

  • 自己动手而又对前端不熟悉的结果就是往往会花费大量的时间。然而毕竟已经决定了基本发展方向,折腾着折腾着总觉得自己没把时间用在刀刃上,也不是天才,将来的发展也许会很受限吧

复制粘贴也不是容易的工作

  • 俗话说开源大法好,shut up and show me your code. 开源意味着高度的自由,而高度的自由在局部必然是存在着混乱的

  • 用人话来说就是代码当然有,能不跑完全是另一回事。万能的gayhub上多得是看起来漂亮实际上自带吨级bug的代码,好好的项目下下来demo都跑不动,复制粘贴真不是万能的,深入了解结构原理永远是条正解之路

  • 开源作者不受约束天涯海角,挂了你都不知去哪找,所以说自己造轮子也真的是有意义的,自己写的代码好歹架构了然于心,关键时刻你还能抢救下自己

  • 代码文档是一个问题,另一个问题我认为在于环境配置:所有正经写教程不交代清相关运行环境、版本信息的一概算耍流氓

  • 说了这么多还不如赶紧保存一份能跑的代码,以后再也别动它了

Written with StackEdit.