在 blogdown 中更改代码块的样式/颜色

Question

我正在使用 RStudio 中的@Yihui Xie blogdown 包来创建我的新博客，但无法理解

如何更改代码块的默认着色方案？

我的 blogdown 安装使用 cactus-plus 模板，开箱即用，它使用难以看到的调色板呈现代码（至少对我而言）：

看起来像 highlight: zenburn 但我不确定。

在常规 RMarkdownw 文档中，我会将 yaml 中的 html 输出更改为：

output:
  html_document:
    theme: united
    highlight: tango

但是对于 hugo 主题和 blogdown，我不确定在哪里以及如何进行这些更改。

Answer 1

下面我概述了我是如何为我的主题破解它的。 FWI我还在学习阶段，所以我的方式可能不是最优方案。

在主题目录中，转到 /partials/head。html 或 header.html。添加以下几行html，这样就可以直接使用CDN资源，无需下载自定义副本：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script>

根据您要使用的样式替换 default.min.css。我正在使用 github 样式。或者您可以从 highlight.js 网站下载自定义副本，解压缩 zip 文件夹并将您选择的 highlight.js 和 CSS 样式复制到您网站下的相关目录。

编辑：一个更简单的实现是使用易慧的指令：将以下代码添加到 /layouts/ 目录下的 foot_custom.html。 .

<script src="//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script> <script src="//cdn.bootcss.com/highlight.js/9.12.0/languages/r.min.js"></script>

<script> hljs.configure({languages: []}); hljs.initHighlightingOnLoad(); </script>

最后的代码确保 highlight.js 不会自动猜测语言。您可以在 config.toml 中手动设置，例如 highlightjsVersion = "9.12.0" highlightjsCDN = "//cdn.bootcss.com" highlightjsLang = ["r", "yaml", "tex", "python"] highlightjsTheme = "github

在head_custom中添加如下代码： <link href="//cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css" rel="stylesheet">

对于代码块定制，使用CSS。

其他资源here

Answer 2

这是一个旧的 post，但如果需要答案，这里有一个。

最简单的解决方案是进入您的 config.toml 文件并更改引用的所需主题：highlightjsTheme = "yourdesiredtheme"

有关合适选项的列表，请查看此 link：https://highlightjs.org/static/demo/

我会建议评估所有可能的风格你已经设置了语言类别 -> 科学 -> R。

在 blogdown 中更改代码块的样式/颜色

Change style / color of blocks of code in blogdown

css

hugo

blogdown

如何更改代码块的默认着色方案？