Codeblock 主题选择器

:discourse2: Summary Codeblock Theme Picker will allow you to easily change the theme used in code blocks.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/hljs-theme-picker
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

This is just a handful of the available options. This component includes all 90 options offered in the hljs repository.

:information_source: While all the options are included in this component, it will only load the one you pick. So, there’s no overhead.

How to use it

Due to the way this component is wired up, it will require a small change to one of your site settings.

  1. Head to your.site.com/admin/site_settings/
  2. Search for theme_authorized_extensions
  3. Add css to that list.

Like so:

:warning: You have to do this before you install the component, otherwise it won’t work.

Once that’s done, you can install the component just like any other component.

Settings

Name Description
hljs theme Select the theme you want code blocks to use. You can visit the hljs demo page to preview the themes
hljs dark match Load dark color scheme if available

If you need to see what the options look like, have a look here We're not a CDN - highlight.js

Once you decide on a hljs theme to use, you can search the dropdown for the one you want and save the setting. You will need to refresh the page in order for everything to start working.

Credits

All of the hljs themes included in this component have copyright information in their respective files. The list of all of those authors (:heart:) is too big to add here, but you can see them here.


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T13:25:37Z

Check documentPerform check on document:
42 个赞

This theme is very useful and running in my site for a long time. How ever I suddenly found it has a problem on firefox. The custom css file blocked by the following header X-Content-Type-Options: nosniff. Console shows that css file MIME type is text/html. No matter which theme I choise the problem still happen on firefox but chrome is fine.

This super theme component would be even better if the selected codeblock style was also selectable as a user preference.

5 个赞

Seconded. As user preference would be very cool.

Anyway to show line numbers?

Great theme component.

One question, there are 242 themes on highlight.js demo. For example, “Github Dark Dimmed” as attached image.

Is there any way to solve this issue? Thanks for advice.

Unfortunately, this is a little bit involved.

Discourse runs version 10.6.0 of highlight-js. Most of the extra themes missing right now - base16 - require version 11.0

The issue is that that version introduces some breaking changes and deprecations. Have a look here

Release Version 11 · highlightjs/highlight.js · GitHub

So, this means that the current options are going to stay the same for a while. First, the highlight-js version needs to be updated in tests-passed in Discourse. Then we’d need to wait for a stable release. Updating the themes (even the current ones) would put us in a bad state where it’s guesswork whether the theme works properly on your site or not.

4 个赞

此组件在最新的 Beta 版本中似乎已损坏 - 安装后,高亮显示不再正常工作。我从主题中删除了该组件,它又开始正常工作了 - 我只是无法选择高亮显示主题。

2 个赞

确认最新测试版在这里的语法高亮也已损坏

@Falco 合并了一个针对此组件的修复程序:DEV: Update highlight.js to version 11 by xfalcox · Pull Request #3 · discourse/hljs-theme-picker · GitHub

它包括对 highlight.js 11 版主题的更新(核心也已更新至 highlight.js 11 版),并修复了样式缺少正确特异性的问题。

2 个赞

安装组件时遇到此错误

创建上传资源时出错: a11y-dark。原始文件名抱歉,您尝试上传的文件未获授权(授权扩展名:wasm、jpg、jpeg、png、woff、woff2、svg、eot、ttf、otf、gif、webp、avif、js)。

你做了这个部分 :point_down:

1 个赞

哦不,我要这么做了 :拥抱:

1 个赞

我刚发现这个主题组件,很高兴它存在!我注意到 hljs dark match 设置似乎不起作用。

例如,我们将 hljs theme 设置为 atom-one-light(也有 atom-one-dark)。

刷新后,atom-one-light 在暗模式下生效,但切换到暗模式时代码块不会切换到暗色——它仍然是浅色。


安装主题组件时收到此错误消息,希望有人能指导社区如何修复它们

您是否将 css 添加到了允许的主题扩展列表中?

1 个赞

谢谢,它奏效了 ^^

1 个赞

注意:

应该是: