Codeblock Theme Picker

This is a theme component that will allow you to easily change the theme used in code blocks

Repository link
https://github.com/discourse/hljs-theme-picker

Preview:
Discourse Theme Creator

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.

Here’s how you can do that.

How do I install a Theme or Theme 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 highlight.js demo

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.

31 Likes