背景

之前也提到过，本站用的是Hugo的LeaveIt主题。前几次也修改过一些内容。这次还是忍不住想改下代码高亮问题。因为我以前有些文章里的代码块没标注语言，如果你所有文章内的代码块都标注了语言，那就没有必要修改了。。

问题

LeaveIt主题使用的是Google code-prettify高亮代码。他是一款轻量级的代码高亮项目，虽然可能没highlight.js强大，不过还是够用的，而且小巧。不过在这个主题里存在一个问题，就是 > 主题中对代码块和行内代码添加了不同的样式。添加代码块时需要注明语言，行内代码则不需要。否则样式会重复。

原行内代码样式

原行内代码样式
原行内代码样式

原代码块样式

原代码块样式
原代码块样式

样式重复的样子

由于我修复前忘记截图了，所以可以脑补下。。

虽然作者说了 > 如果你之前写代码块都没有标语言，你又不需要行内代码高亮，你可以删除assts/css/_page/post.scss中code:not([class])的样式。

但是我觉得删除了行内代码样式，感觉会怪怪的。本想试试能不能修改成不重复。但是搞了一个上午没弄成自己想要的结果。

在这之前也尝试了prismjs，我挺喜欢它的第三方主题 prism-hopscotch 它长这个样子：

hopscotch
hopscotch

就想着把LeaveIt主题的代码高亮换成prismjs，但是发现如果要支持比较多语言和显示行号等，js的体积就比较大，最后还是放弃了。

最后就像能不能把原来的code-prettify样式改为上图的样式。再通过把行内样式的背景改为和代码块一样的背景色就可以解决行内代码样式和代码块样式重复问题了。

因为原来的样式重复就是黑色的代码块背景和白色的行内代码背景色重复了。显得非常明显。。

修改代码

打开/LeaveIt/assets/css/_common/_page/post.scss 将原来的第86行起的以下内容

        code,
        pre {
            padding: 7px;
            font-size: 13px;
            font-family: Consolas, Monaco, Menlo, Consolas, monospace;
            word-break: break-all;
            word-wrap: break-word;
        }

        code:not([class]) {
            padding: 5px 5px;
            background: #fff;
            border: 1px solid #ddd;
            box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd;
            margin-left: 3px;
            margin-right: 3px;

            .dark-theme &:not([class]) {
                background: transparent;
                box-shadow: 1px 1px 0 $dark-font-secondary-color, 2px 2px 0 $dark-font-secondary-color;
            }
        }

修改为

        code,
        pre {
            color: #ffffff;
            font-family: "Fira Mono", Menlo, Monaco, "Lucida Console","Courier New", Courier, monospace;
            font-size: 16px;
            line-height: 1.375;
            direction: ltr;
            text-align: left;
            word-spacing: normal;
			padding: 5px 3px;

            hyphens: none;
            white-space: pre;
            white-space: pre-wrap;
            background: #322931;
            color: #b9b5b8;
			border-radius: 5px;
            word-break: break-all;
            word-wrap: break-word;
        }


       code:not([class]) {
			font-family: "Fira Mono", Menlo, Monaco, "Lucida Console","Courier New", Courier, monospace;
            padding: 2px 4px;
            background: #322931;
            color: #b9b5b8;
            border-radius: 3px;
            margin-left: 3px;
            margin-right: 3px;
            
            .dark-theme &:not([class]) {
                background: #2d2d2d;
                color: #e06c75;
            }
}

这部分样式其实就是从prismjs的prism-hopscotch样式 修改来的。

效果

行内代码背景和没有指定语言的代码块背景一致，这样就不会出现没有指定语言的代码块样式和行内代码样式重复了。

行内代码背景和代码块背景一致
行内代码背景和代码块背景一致
查看源代码可以看到这个代码块没有指定语言。
代码块没有指定语言
代码块没有指定语言

样式这东西是个人喜好，我也是避免麻烦就直接改成一样了。如果你不想行内代码和代码块背景一样那就得用其他办法了。

更新

2019/10/11更新

由于背景颜色不一问题，更新为以下样式

        code,
        pre {
            padding: 5px;
            font-size: 15px;
            font-family: Consolas, Monaco, Menlo, Consolas, monospace;
            word-break: break-all;
            word-wrap: break-word;
			border-radius: 3px;
        }

		code:not([class]) {
    		padding: 2px 4px;
    		background: #2d2d2d;
    		color: #ccc;
    		border-radius: 3px;
    		margin-left: 4px;
    		margin-right: 4px;
    
    		.dark-theme &:not([class]) {
        		background: #2d2d2d;
        		color: #e06c75;
    }
}

参考资料