Codeblock Theme Picker

:discourse2: Summary Codeblock Theme Picker will allow you to easily change the theme used in code blocks.
:eyeglasses: Preview Preview on theme-creator.discourse.org
: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

Samples

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

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

Version requirements

This component will only work on Discourse version 2.4.1 and higher. If your site is running an older version, it won’t do anything.

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

There’s only one setting. It’s a dropdown that contains a list of all the options. If you need to see what the options look like, have a look here Examples - 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.

41 Likes

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 Likes

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 Likes

This component seems to be broken in the latest betas - highlighting no longer works correctly when it’s installed. I removed the component from the themes and it started working again - I just don’t get to chose the highlighting theme.

2 Likes

confirm syntax highlighting is broken here too on the latest beta

@Falco just merged a fix for this component: DEV: Update highlight.js to version 11 by xfalcox · Pull Request #3 · discourse/hljs-theme-picker · GitHub

It includes an update to highlight.js version 11 themes (core has been updated to highlight.js version 11 too) and fixes for styles missing the correct specificity.

2 Likes

I got this error when I tried to install the component

Error creating upload asset: a11y-dark. Original filename Sorry, the file you are trying to upload is not authorized (authorized extensions: wasm, jpg, jpeg, png, woff, woff2, svg, eot, ttf, otf, gif, webp, avif, js).

Did you do this bit :point_down:

1 Like

Ooh noo, I’m going to do that :hugs:

1 Like