Back

Hugo|调整代码风格为Nord

通过highlight.js草改代码高亮

参照小球飞鱼|调整代码块样式的代码布局进行了部分调整,基于此修改高亮风格。

下载highlight.js

  • highlight.js官网选择需要的语言包下载
  • 复制 hightlight.min.js/static/js 目录下
  • 复制需要的css风格,比如nord.min.css/static/css

如果没有js和css目录,就新建一下

修改head.html

/layouts/partials/head/目录下的任意html文件(如script.html)中加入

<link rel="stylesheet" href="/css/nord.min.css"/>

修改content

/layouts/partials/article/components/content.html下加入

<script src="/js/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

放在detail.html/ article.html等文件中好像也可以

修改一点小细节

背景色

做了上述改动之后,发现代码背景色还是没变,参考Nord官方配色,直接在chroma的scss上修改:

编辑/assets/scss/partials/highlight/dark.scss和同一目录下的light.scss,把6~10行统一改为

/* Background */
.chroma {
    color: #E5E9F0;
    background-color: #2E3440;
}

内边距

删掉上下边距,保留左边距: 在nord.min.css中搜索pre code.hljs将其后的padding:1em改为padding-left:1.2em; padding-right:1.2em;

注释文本

发现注释文本有点奇怪,颜色有点深了,而且在chrome和edge上字体有点奇怪,它太细了。

  • 修改颜色

nord.min.css中搜索hljs-comment,将后面最近的一个颜色#4C566A 改为 #6A7895

以及修改了hljs-attribute的颜色为#8fbcbb

  • 修改字重

修改/assets/scss/partials/layout/article.scss

.article-content {
    
    //行内代码
    code {
    color: var(--code-text-color);
    background-color: var(--code-background-color);
    padding: 2px 4px;
    overflow-x: auto;
    font-weight:400; //增加字重设置为400
    border-radius: var(--tag-border-radius);
    font-family: var(--code-font-family);
    word-wrap: break-word; //允许长单词或 URL 地址换行到下一行
        
    }

    //代码块
     pre {
        overflow-x: auto;
        display: block;
        background-color: var(--pre-background-color);
        color: var(--pre-text-color);
        font-family: var(--code-font-family);
        line-height: 1.428571429;
        word-break: break-all;
        padding: var(--card-padding);
        white-space: pre-wrap; //长代码自动换行适应页面
        word-wrap: break-word; //允许长单词或 URL 地址换行到下一行

        code {
            color: unset;
            border: none;
            background: none;
            padding: 0;
            font-weight: 400; //增加字重设置为400
        }
    }
}

对于为什么上面的代码不着色这回事,我也不知道怎么办

代码引用方式

  1. markdown格式,需要在前面声明代码类型
  2. <pre> <code class="代码类型"> ……</code><pre>

现存问题

  1. 嵌套html时,页面检查报错:

    Detect HTML/JS injection attacks and warn users pro-actively · Issue #2886

    目前我的方法就是……不解决

  2. 上面提到的字体问题

  3. 感觉比VScode上的灰呢,这是为什么

参考