如何更改代码块提供的默认颜色?

例如,这是 Swift 代码

func jjj () {

let jj: String = "1"
}

我希望它像下面这样着色,

颜色会根据语言添加。您可以检查 highlighted_languages 中是否添加了 Swift,如果检测仍然不起作用,您还可以为代码块手动设置语言。

2 个赞

代码块格式没问题,它是这样添加的(不带引号)

swift [代码在这里] ”

它会像这样高亮显示,但问题是它提供的颜色,我不喜欢。它会像下面这样高亮显示。(看红色的“jjj”,我想要蓝色的。

但我想得到像下面这样的效果

是否可以通过终端编辑文件等来更改特定语言的默认颜色?

检测语言是通过站点设置完成的:highlighted languages

Swift 默认属于列表,但在 meta 中不属于。

此第三方库支持的语言列表在此处:

编辑:正如这里解释的 :face_with_peeking_eye:

@PrettyGirl,Markdown 提示:您可以通过将代码包装在四个反引号而不是三个反引号来转义代码块中的反引号 :slight_smile:

``` swift

[code here]
```
2 个赞

你好 :waving_hand:
你也可以尝试使用此主题组件更改颜色 :slightly_smiling_face:

4 个赞

感谢您的提示和链接。但是,站点设置 highlighted languages 中包含了 swift。它会被高亮显示,但我不喜欢它当前高亮的颜色。有没有其他方法?比如编辑 discourse 文件夹内的 highlight.js 等?应该有办法吧,我注意到 highlight.js 也是开源的。

Discourse 默认包含 hightlight.js 吗?

哦,抱歉,我误读了你的主题。:person_facepalming:

是的 :slight_smile:

1 个赞

您尝试了您上一条消息中发布的“beeper”主题组件吗?

1 个赞

我没有,因为我不知道如果我应用其他主题,整个 Discourse 应用中的其他区域会是什么样子。我喜欢现在的外观和设置,只是有一些小问题。如果主题改变了外观或设置等,同时又提供了漂亮的 code blocks,那就得不偿失了。我只需要修复那个特定的问题。

您可以单独定位代码语言并覆盖自动语言检测,就像上面的帖子所提到的那样。

如果您想单独定位 Swift,可以使用 .language-swift 类。更具体地说…… code.hljs.language-swift。您可以在 CSS 中更改 Swift 的颜色。

我检查了这一点,似乎这接近 Xcode 主题。但我们将更改这两种颜色,使其更适合您的截图代码颜色。

这些颜色存在的问题是它们在黑暗模式下难以阅读。这就是为什么在 highlight.js 演示页面 上它有白色背景,我认为这就是 Discourse 对语言使用默认通用颜色组合的原因。如果我没记错的话,过去曾有一些关于在黑暗模式下难以阅读等的报告……


要将其更改为仅 Swift,您需要创建一个新的主题组件或将其添加到现有组件中。注意:这些颜色在黑暗模式下也会使用(白色背景等),因此如果您想要黑暗模式下不同的颜色,则需要创建新的颜色定义 dark-light-choose()

通用 / CSS

code.hljs.language-swift {
  background: #fff;
  color: #000;

  .xml .hljs-meta {
    color: silver;
  }

  .hljs-comment,
  .hljs-quote {
    color: #007400;
  }

  .hljs-attribute,
  .hljs-keyword,
  .hljs-literal,
  .hljs-name,
  .hljs-selector-tag,
  .hljs-tag {
    color: #aa0d91;
  }

  .hljs-template-variable,
  .hljs-variable {
    color: #3f6e74;
  }

  .hljs-code,
  .hljs-meta .hljs-string,
  .hljs-string {
    color: #c41a16;
  }

  .hljs-link,
  .hljs-regexp {
    color: #0e0eff;
  }

  .hljs-bullet,
  .hljs-number,
  .hljs-symbol,
  .hljs-title {
    color: #2b75a6;
  }

  .hljs-meta,
  .hljs-section {
    color: #643820;
  }

  .hljs-built_in,
  .hljs-class .hljs-title,
  .hljs-params,
  .hljs-title.class_,
  .hljs-type {
    color: #442fa1;
  }

  .hljs-attr {
    color: #836c28;
  }

  .hljs-subst {
    color: #000;
  }

  .hljs-formula {
    background-color: #eee;
    font-style: italic;
  }

  .hljs-addition {
    background-color: #baeeba;
  }

  .hljs-deletion {
    background-color: #ffc8bd;
  }

  .hljs-selector-class,
  .hljs-selector-id {
    color: #9b703f;
  }

  .hljs-doctag,
  .hljs-strong {
    font-weight: 700;
  }

  .hljs-emphasis {
    font-style: italic;
  }
}

之前

之后

5 个赞

一个 Theme component 会被添加到你已使用的主题中。所以它不会改变整体外观,而是添加或更改特定内容。因此,自定义代码组件只会改变代码的外观。

5 个赞

描述中说它只改变代码块,这正是你想要做的。
请阅读其他人建议的关于主题工作原理的链接。

3 个赞

太棒了,非常感谢。它奏效了 :slight_smile:

1 个赞

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.