Change highlight.js styles?

支持
1

I have customized the colors of my Discourse instance to use a dark background color, however syntax highlighting does not look good anymore.

What is the easiest way to tell highlight.js to use a different style?

2

Admin, customize, css

3

Oh right, thanks Jeff.

4

Unfortunately it looks like it isn’t working correctly.

I copy/pasted the CSS from the Agate theme to a new section in Admin / Customize / CSS:

Pasted image1350×1206 74.4 KB

However I get the following results:

Pasted image1350×1206 153 KB

(Link to the page: Some thoughts on beta 1.4 - appleseed Users Forum)

Notice that the .hljs-string color is #f99 which does not match the declared style of this class in the Agate theme:

.hljs-string,
.hljs-bullet {
  color: #a2fca2;
}

Not sure what I’m doing wrong. Any clue?

5

Looks like I would need to add !important to each CSS property…

Is anyone aware of a better solution?

Edit: it doesn’t look like the !important solution would even work…

6

Nope, it’s because the default has a higher specificity - .hljs-tag .hljs-string . You need to replicate the theme’s rule with that selector.

7

Thanks @riking, I hadn’t seen this.

Unfortunately that means it’s basically impossible to try highlight.js themes (from their demo page) to find one that fits the color palette of my Discourse instance without inspecting and tweaking them, one rule at a time…

So I guess my original question remains: what’s the (second) easiest way to try an highlight.js theme with Discourse?

9

再次顶一下，以防有人已经找到了导入更美观、色彩更丰富的代码语法高亮样式的好方法？希望效果能更像现代代码编辑器的视图。

自定义 CSS 是可以接受的解决方案，不知是否有人已将合适的 CSS 放在 CDN 上供导入，或者有没有相关的主题组件？

10

我同意，覆盖我们现有的内容确实有点繁琐。高亮显示的主题库位于：

自定义主题确实可以为网站带来独特的视觉效果：

image
image1153×937 77.1 KB

@Johani 我们是否应该制作一个 howto 教程，解释如何从 官方仓库 提取 CSS，进行转换，并使其与我们的 CSS 兼容？

11

我制作了一个主题组件，允许管理员从下拉菜单中选择 hljs 主题。更多详情请点击：