# Codeblock Theme Picker
**URL:** https://meta.discourse.org/t/codeblock-theme-picker/146396
**Category:** Theme component
**Tags:** official, codeblock-theme-picker
**Created:** [April 1, 2020, 6:53am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396 "2020-04-01T06:53:35Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [April 1, 2020, 6:53am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/1 "2020-04-01T06:53:35Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Codeblock Theme Picker** will allow you to easily change the theme used in code blocks. |
| š | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/codeblock-theme-picker) |
| š | **Repository Link** | [https://github.com/discourse/hljs-theme-picker](https://github.com/discourse/hljs-theme-picker) |
| š | **New to Discourse Themes?** | [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. š
>
> [ā **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=codeblock-theme-picker "Ask for support on configuring and using Codeblock Theme Picker") [š **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=codeblock-theme-picker "A bug report means something is broken, preventing normal/typical use of the theme component") [š **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=codeblock-theme-picker "Discussion about the user interface of Codeblock Theme Picker, and how features are presented (including language and UI elements)") [š” **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=codeblock-theme-picker "Discussion about how existing Codeblock Theme Picker features can be improved or enhanced, and how proposed new features could work")
### Features
This is just a handful of the available options. This component includes [all 90 options](https://highlightjs.org/static/demo/) offered in the hljs repository.
> ā¹ 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:
ā 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](https://highlightjs.org/static/demo/) 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](https://highlightjs.org/static/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 (ā¤) is too big to add here, but you can see them [here](https://github.com/discourse/hljs-theme-picker/tree/master/assets).
> :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 document**
> >
> > Perform check on document:
---
### Author:  [@MuZhou233](https://meta.discourse.org/u/MuZhou233)
#### Post date: [February 28, 2021, 12:01pm UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/16 "2021-02-28T12:01:37Z")
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.
---
### Author:  [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [February 28, 2021, 1:48pm UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/17 "2021-02-28T13:48:24Z")
This super theme component would be even better if the selected codeblock style was also selectable as a user preference.
---
### Author:  [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [August 28, 2021, 10:15pm UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/18 "2021-08-28T22:15:17Z")
Seconded. As user preference would be very cool.
---
### Author:  [@Reaxgrim](https://meta.discourse.org/u/Reaxgrim)
#### Post date: [September 4, 2021, 2:12am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/19 "2021-09-04T02:12:10Z")
Anyway to show line numbers?
---
### Author:  [@SkyLin](https://meta.discourse.org/u/SkyLin)
#### Post date: [October 29, 2021, 3:56am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/20 "2021-10-29T03:56:23Z")
> [@Johani](#):
>
> This component includes [all 90 options](https://highlightjs.org/static/demo/) offered in the hljs repository.
Great theme component.
One question, there are 242 themes on [highlight.js demo](https://highlightjs.org/static/demo/). For example, āGithub Dark Dimmedā as attached image.
Is there any way to solve this issue? Thanks for advice.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [October 29, 2021, 8:05am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/21 "2021-10-29T08:05:16Z")
> [@SkyLin](#):
>
> there are 242 themes on [highlight.js demo](https://highlightjs.org/static/demo/)
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](https://github.com/highlightjs/highlight.js/releases/tag/11.0.0)
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.
---
### Author:  [@vincentp](https://meta.discourse.org/u/vincentp)
#### Post date: [August 2, 2022, 2:11am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/22 "2022-08-02T02:11:35Z")
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.
---
### Author:  [@erisdisqordia](https://meta.discourse.org/u/erisdisqordia)
#### Post date: [September 3, 2022, 4:34am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/23 "2022-09-03T04:34:42Z")
confirm syntax highlighting is broken here too on the latest beta
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [September 20, 2022, 3:53pm UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/24 "2022-09-20T15:53:46Z")
@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](https://github.com/discourse/hljs-theme-picker/pull/3)
It includes an update to highlight.js version 11 themes (core has [been updated](https://github.com/discourse/discourse/pull/18282) to highlight.js version 11 too) and fixes for styles missing the correct specificity.
---
### Author:  [@Dennis\_P\_Z](https://meta.discourse.org/u/Dennis_P_Z)
#### Post date: [October 23, 2023, 9:36pm UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/25 "2023-10-23T21:36:56Z")
I got this error when I tried to install the component
```plaintext
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).
```
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [October 24, 2023, 7:16am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/26 "2023-10-24T07:16:24Z")
Did you do this bit š
> [@jordan-vidrine](#):
>
> 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:
>
> 
>
> ā You have to do this before you install the component, otherwise it wonāt work.
---
### Author:  [@Dennis\_P\_Z](https://meta.discourse.org/u/Dennis_P_Z)
#### Post date: [October 24, 2023, 7:31am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/27 "2023-10-24T07:31:07Z")
Ooh noo, Iām going to do that š¤
---
### Author:  [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [May 15, 2024, 5:17pm UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/28 "2024-05-15T17:17:32Z")
Just found this theme componentāso glad this exists! I notice that the setting `hljs dark match` does not seem to work.
For example, we have `hljs theme` set to `atom-one-light` (to which there also exists, `atom-one-dark`).
Upon refreshing, the `atom-one-light` takes while in dark mode, but the code block does not switch to dark when switching to dark modeāit stays as light.
---
### Author:  [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)
#### Post date: [June 3, 2024, 3:35pm UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/29 "2024-06-03T15:35:15Z")
I received this error message when installing theme components, hoping someone could guide the community on how to fix them
---
### Author:  [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [June 3, 2024, 3:45pm UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/30 "2024-06-03T15:45:42Z")
Did you add `css` to the allowed theme extensions list?
> [@jordan-vidrine](#):
>
> 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:
>
> 
>
> ā You have to do this before you install the component, otherwise it wonāt work.
---
### Author:  [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)
#### Post date: [June 3, 2024, 4:39pm UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/31 "2024-06-03T16:39:28Z")
Thank you, it work ^^
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [November 12, 2024, 2:52am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/32 "2024-11-12T02:52:23Z")
Note:
> [@Discourse](#):
>
> visit [the hljs demo page](https://highlightjs.org/static/demo/) to
> [@Discourse](#):
>
> look here [Weāre not a CDN - highlight.js](https://highlightjs.org/static/demo/)
It should be:
> [@Update or remove highlight.js demo link](https://meta.discourse.org/t/update-or-remove-highlight-js-demo-link/304538/1):
>
> the link should be [Demo - highlight.js](https://highlightjs.org/demo)
---
### Author:  [@cnlanny](https://meta.discourse.org/u/cnlanny)
#### Post date: [January 19, 2026, 11:37am UTC](https://meta.discourse.org/t/codeblock-theme-picker/146396/33 "2026-01-19T11:37:31Z")
**It seems that this theme component is broken in the latest version.**
**I have already added `css` to the `theme_authorized_extensions` setting and tried reinstalling the component, but the code block styles are still not applying.**
**Could you please verify this? Thanks.**