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 でも構いませんので、CDN に適切な CSS をアップロードしてインポートできるものや、テーマコンポーネントをご存知の方がいれば教えてください。

10

同意します。既存のものを上書きするのは確かに面倒です。多数のテーマは以下の場所でハイライト対応されています：

カスタムテーマを使えば、サイト独自の外観を確かに実現できます：

image
image1153×937 77.1 KB

@Johani 公式リポジトリの CSS を取得し、変換して私たちの CSS と連携させる方法を説明する howto を作成すべきではないでしょうか？

11

管理者がドロップダウンから hljs テーマを選択できるようにするテーマコンポーネントを作成しました。詳細はこちら