专栏首页个人路线在Hugo博客中加入代码高亮
原创

在Hugo博客中加入代码高亮

相信自己搭建博客的人中有一大半都是玩代码的,所以代码高亮可以说是博客的必备功能。本文提供一个在基于Hugo的博客上使用highlight.js的代码高亮方案。

实施步骤

  1. highlight.js的官方网站上复制HTML的linkscript标签。例如:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
  1. 打开themes/yourtheme/layouts/_default目录,打开baseof.html,(可能对不同主题文件和路径会有不同,如果找不到可以试试查找head.htmlheader.html。这个html文件是网页的head部分的模板。在合适的地方粘贴第一步中的代码。
  2. 大功告成。

使用

用```包裹代码块,保险起见,在```后加上语言名字。例如(不包括方括号内):

[START HERE]
```c
int hash(char * str, int length) { // hash function
    int hash = 0;
    for (int i = 0; i < length; i++) {
        hash = ((hash + str[i]) * 31) % MAX_ID; // maximum of ID?
    }
    return hash;
}
```[END HERE]

显示效果如下:

int hash(char * str, int length) { // hash function
    int hash = 0;
    for (int i = 0; i < length; i++) {
        hash = ((hash + str[i]) * 31) % MAX_ID; // maximum of ID?
    }
    return hash;
}

注意事项

  1. 如果要使用的语言很生僻,链接内的js和css可能无法满足需求,可以添加新的script,比如:https://cdn.bootcss.com/highlight.js/9.12.0/languages/yaml.min.js。或者在highlight.js的官方网站上自定义并下载下来,用本地引用。
  2. 如果需要修改颜色、背景色等样式,可以把css下载下来,修改后本地引用。修改后的css放在themes/yourtheme/static/css里,用href="/css/highlight.css"引用。强烈建议在css里把背景色去除。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在博客园平台为代码添加高亮

    本文首发链接为:https://www.cnblogs.com/dechinphy/p/highlight.html 作者ID:DechinPhy 更多原著...

    DechinPhy
  • 博客实现代码高亮 原

    介绍:  –支持 71 种编程语言的语法解析  –拥有 44 种样式  –自动检测编程语言  –同时为多种编程语言代码高亮  –可以在 node.js...

    晓歌
  • 从Hexo迁移到Hugo-送漂亮的Hugo Theme主题

    自从Hugo出来后,作为Go语言(golang)的重度用户的重度用户,一直想把自己的博客迁移到Hugo,但是一直没有行动,主要原因在于,我的博客使用的一款主题m...

    飞雪无情
  • Blog切换到Hugo

    其实很早就想把Blog迁移到静态化的博客系统了。不过一直没花时间来搞,当然主要原因还是懒。

    owent
  • Django搭建博客(九):为博客添加代码高亮显示和 md文档支持

    特别需要注意的是:代码块必须使用三个 '`' 符号包裹起来才能正确识别,语言标记可有可无,但是三个 '`' 必须单独成行。

    渔父歌
  • Hugo + GitHub Pages 搭建自己的网站

    很早之前,我使用 WordPress 搭建了个人博客:http://blog.studygolang.com,毕竟那时候 WordPress 是首选。现如今,大...

    lucifer210
  • 博客园_插入代码(推荐)_按钮功能实现_代码高亮显示

    =============================================================

    Hongten
  • 码云 Pages 搭建

    因为一直在写博客, 就向着搭个 GithubPages 来展示, 一直都听说别人用它来搭建个人博客, 但一直停留在听说的阶段. 最近想着没事搞一搞, 也看看它到...

    烟草的香味
  • 博客园设置Google-code-prettify渲染代码高亮

    饶文津
  • 怎么选择和快速搭建个人博客 转

    目前比较流行的博客实现可以分为三种方式,各有不同程度的技术门槛、功能支持、主题颜值等。接下来将会通过实例展示不同的博客形式。

    wuweixiang
  • 使用 Github Pages 和 Hugo 搭建个人博客教程

    十一假期宅家无事,发现自己过去写了很多文章,却没有一个自己的博客,系统得管理自己的文章,所以准备将自己过去以及未来的文章都放到博客,以饷读者。另一方面,经过对 ...

    绯浅yousa
  • Hugo搭建博客(一)— 基本设置

    我在windows和ubuntu下安装过hugo,简要介绍下我的安装过程,其他方式可以参考官方文档 。

    程序员酷森
  • 使用Github Actions实现Hugo博客自动发布到腾讯云静态网站托管

    之前博客因为是使用Caddy的GitHub webhook实现网站自动部署,但是因为Caddy现在已经升级到了v2版本,能使用的插件少了一点。看到腾讯云增加了静...

    JefferyWang
  • 10分钟搭建一个免费个人博客网站

    您诸位好啊,我是无尘。 身为一名技术人,怎么能没有一个属于自己的博客系统呢?难道要买一台云服务器?新用户还好,优惠力度不小,赶上个购物节,小几百就能买上几年的。...

    微客鸟窝
  • Hugo搭建博客(二)— Hugo+Github Pages搭建博客

    使用Hugo已经把博客搭建好了,那应该部署到哪里呢?可以使用VPS、云服务器等,我使用的是Github Pages,免费而且也很好用!

    程序员酷森
  • K哥用Github做了个免费永久博客,超详细过程!

    我们需要先下载hugo,这里给大家地址,大家找到自己电脑相对应的版本进行下载就行了。

    Python进击者
  • Hugo Travis

    自从打算把博客换到hugo到现在已经过去两个星期了,今天才开始往服务器上面部署,之所以没有直接部署还是有很多原因限制,时间是一个方面。还有就是平台更改后的样式和...

    caoayu
  • 折腾Hugo | GitHub Pages | Github Actions自动构建发布免费个人网站

    之前也折腾过个人博客,从大学时候玩的 Wordpress、Ghost,最近又开始折腾博客。由于我个人是比较喜欢通过Github来做博客系统的,对比了目前市面上比...

    Jared.Tan
  • Hugo 建站经验之谈

    建站工具,早已不是一个新颖的话题,抛开可视化建站单论开发层面,各类语言都有推出广受欢迎的建站框架,比如 Python 开发的 Pelican,JavaScrip...

    NebulaGraph

扫码关注云+社区

领取腾讯云代金券