zoukankan      html  css  js  c++  java
  • 置Hugo的代码高亮

    +++

    date="2020-10-17"

    title="设置Hugo的代码高亮"

    tags=["hugo"]

    categories=["开发"]

    toc=true

    +++

    前提条件

    首先我们要保证 Hugo 的版本是高于 v0.65.0 的,查询方法如下

    $ hugo version
    Hugo Static Site Generator v0.70.0-7F47B99E windows/amd64 BuildDate: 2020-05-06T11:17:50Z
    

    上面查询,我的版本是 v0.70.0 如果你的版本低于 v0.65.0 则不支持我们今天要设置的代码高亮,请先升级版本。

    Hugov0.65.0 版本之后使用了 Chroma 代码高亮插件,它是一个 Go 语言实现的非常漂亮并能快速生成的代码高亮工具。

    如何配置

    默认的代码高亮配置文件如下,你可以复制到你的配置文件内进行修改:

    yaml 格式的配置文件:

    markup:
      highlight:
        codeFences: true
        guessSyntax: false
        hl_Lines: ""
        lineNoStart: 1
        lineNos: false
        lineNumbersInTable: true
        noClasses: true
        style: monokai
        tabWidth: 4
    

    toml 格式的配置文件:

    [markup]
      [markup.highlight]
        anchorLineNos = false
        codeFences = true
        guessSyntax = true
        hl_Lines = ""
        lineAnchors = ""
        lineNoStart =1
        lineNos = true
        lineNumbersInTable = true
        noClasses = true
        style = "monokai"
        tabWidth = 4
    

    json 格式的配置文件:

    {
        "markup":{
            "highlight":{
                "codeFences":true,
                "guessSyntax":false,
                "hl_Lines":"",
                "lineNoStart":1,
                "lineNos":false,
                "lineNumbersInTable":true,
                "noClasses":true,
                "style":"monokai",
                "tabWidth":4
            }
        }
    }
    

    配置文件中各个设置项的含义如下:

    • codeFences:代码围栏功能,这个功能一般都要设为 true 的,不然很难看,就是干巴巴的-代码文字,没有颜色。
    • guessSyntax:猜测语法,这个功能建议设置为 true, 如果你没有设置要显示的语言则会自动匹配。
    • hl_Lines:高亮的行号,一般这个不设置,因为每个代码块我们可能希望让高亮的地方不一样。
    • lineNoStart:行号从编号几开始,一般从 1 开始。
    • lineNos:是否显示行号,我比较喜欢显示,所以我设置的为 true.
    • lineNumbersInTable:使用表来格式化行号和代码,而不是 标签。这个属性一般设置为 true.
    • noClasses:使用 class 标签,而不是内嵌的内联样式
  • 相关阅读:
    Kibana6.x.x——启动后的一些警告信息记录以及解决方法
    Kibana6.x.x源码开发——执行 yarn start --no-base-path 启动命令后报错
    在Ubuntu中使用AppImage类型文件
    Kibana6.x.x源码分析--启动时basePath
    Kibana 视图开发入门参考文档
    npm install 安装包报错
    git学习--删除远程仓库不存在的分支
    git学习--远程分支删除
    git学习---去除版本控制
    git学习--clone和pull
  • 原文地址:https://www.cnblogs.com/brady-wang/p/13830095.html
Copyright © 2011-2022 走看看