For instance, this is swift code func jjj () { let jj: String = "1" } [image] I want it to be coloured like the following, [image]

You can target separately the code languages and override the auto language detection like the posts above mentioned it. If you want to target swift than you can do it with .language-swift class. To be more specific… code.hljs.language-swift. And you can change swift colors in CSS. [imagem] PrettyGirl: I want it to be coloured like the following, [image] I checked this and it seems this is close to xcode theme. But we will change those two colors to suits more with your screenshot code colors. [Screenshot 2023-10-05 at 6.27.36] The problem with these colors is it is hard to read in dark mode. This is why it has in the highlight.js demo page white background and I think this is the reason why Discourse use default generic colors combo to languages. If I remember correctly there was some report in the past about it hard to read on dark mode etc… To change it to only swift you have to create a new theme component or add this to an existing one. Note: These colors will used in dark mode too (white background etc…) so if you want different colors in dark mode then you have to create new color definitions dark-light-choose(). Common / CSS code.hljs.language-swift { background: #fff; color: #000; .xml .hljs-meta { color: silver; } .hljs-comment, .hljs-quote { color: #007400; } .hljs-attribute, .hljs-keyword, .hljs-literal, .hljs-name, .hljs-selector-tag, .hljs-tag { color: #aa0d91; } .hljs-template-variable, .hljs-variable { color: #3f6e74; } .hljs-code, .hljs-meta .hljs-string, .hljs-string { color: #c41a16; } .hljs-link, .hljs-regexp { color: #0e0eff; } .hljs-bullet, .hljs-number, .hljs-symbol, .hljs-title { color: #2b75a6; } .hljs-meta, .hljs-section { color: #643820; } .hljs-built_in, .hljs-class .hljs-title, .hljs-params, .hljs-title.class_, .hljs-type { color: #442fa1; } .hljs-attr { color: #836c28; } .hljs-subst { color: #000; } .hljs-formula { background-color: #eee; font-style: italic; } .hljs-addition { background-color: #baeeba; } .hljs-deletion { background-color: #ffc8bd; } .hljs-selector-class, .hljs-selector-id { color: #9b703f; } .hljs-doctag, .hljs-strong { font-weight: 700; } .hljs-emphasis { font-style: italic; } } Before [Screenshot 2023-10-05 at 6.48.10] After [Screenshot 2023-10-05 at 7.10.05]

The color is added depending on the language. You can check whether Swift is added in the highlighted_languages and if detection still does not work, you can also manually set the language for a code block. [imagem] Selecting the programming language used in code blocks Using Discourse bookmark This guide explains how to select the programming language used in code blocks within Discourse posts, along with how to suppress syntax highlighting. person_raising_hand Required user level: All users When you enclose code using triple backticks in your posts, Discourse uses highlight.js to automatically detect and apply syntax highlighting to the code. However, you can specify the programming language if the autodetection does not work as expected. Specifying the programming…

The code block formatting is fine it was added as (without the “”) "``` swift [code here] "``` It highlights as follows, but the issue is the colour it provides, I don’t like it. It gets highlighted as below. (see the red colour “jjj”, I want to have it in blue colour. [image] But I want something like the following [image] Is it possible to edit a file etc via terminal? so I can change the default colours assigned for a specific language?

Detected languages are done through a site setting: highlighted languages. [image] Swift belongs to the list by default but does not on meta. The supported languages by this third-party library are listed here: Supported Languages — highlight.js 11.9.0 documentation edit: as explained here :face_with_peeking_eye: [imagem] Configure which programming languages are available for syntax highlighting Site Management bookmark This guide explains how to configure which programming languages are available for syntax highlighting in Discourse. person_raising_hand Required user level: Administrator Syntax highlighting enhances readability in code blocks by applying formatting based on the programming language. You can customize the languages available for syntax highlighting in Discourse. Configuring the highlighted_languages site setting To configure the list of programming languages for syntax highli… @PrettyGirl, markdown tip: you can escape backticks from a codeblock by wrapping your code by four backticks instead of three :slight_smile: ``` swift [code here] ```

Hello :waving_hand: You can also try to change colors with this theme component :slightly_smiling_face: [imagem] Custom Code Theme component discourse2 Summary Custom Code allows you to customize the font and colors for source shared on the site. eyeglasses Preview Preview on Discourse Theme Creator hammer_and_wrench Repository Link https://github.com/discourse/discourse-custom-code open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Generally, the fonts used to write code are part of the monospace family. The most known fonts are: Inc…

Thank you for the tip and the link. However, the site setting highlighted languages includes swift. It gets highlighted, but I don’t like the colours it currently highlighting. Is there any other way? editing the highlight.js inside the discourse folder etc? there should be a way isn’t it, I notice the highlight.js is also opensource. Discourse ships with hightlight.js by default?

Oh, sorry about that, I misread your topic. :person_facepalming: [imagem] PrettyGirl: Discourse ships with hightlight.js by default? Yes :slight_smile:

Did you try the theme component posted beeper your last message?

I didn’t, because, I don’t know what other areas (throughout the entire discourse app) will look different if I apply any other themes. I like the current look and settings, but just couple of issues here and there. If the theme changes other appearance or settings etc along with providing nice code blocks, that’s not worth it. I just need to fix that specific issue.

[imagem] PrettyGirl: I didn’t, because, I don’t know what other areas (throughout the entire discourse app) will look different if I apply any other themes. A #theme-component is added to the #theme you already use. So it does not change the whole look, it adds or changes something specific. So the custom code component only chages the appearence of code [imagem] About the Theme component category Theme component Theme components can be used to add front end features or change elements of your forum design. Smaller and more targeted than full themes, they can be combined with other theme components to create a bespoke forum design tailored for your community. You can find more info on how to use, create, and share your own theme components in: Installing a theme or theme component Beginner's guide to using Discourse Themes Designer's Guide to getting started with themes in Discourse Developing Dis… [imagem] About the Theme category Theme Themes are expansive customizations that change multiple elements of the style of your forum design, and often also include additional front-end features. Larger and more encompassing than theme components, themes have the ability to significantly change the look and layout of your forum. Depending on which elements are already included in a theme, it is also possible to combine other theme components with them to further individualize your site. You can find more info on how to use, create,…

[imagem] PrettyGirl: I didn’t, because, I don’t know what other areas (throughout the entire discourse app) will look different if I apply any other themes. The description says that it changes just code blocks, which is exactly what you want to do. Please read the links about how themes work that others suggested.

Como alterar as cores padrão do bloco de código fornecido?

Suporte ao Produto

Moin 5 Outubro , 2023 05:30 11

Um componente de tema Customization > Theme component é adicionado ao tema Customization > Theme que você já usa. Portanto, ele não altera a aparência geral, mas adiciona ou modifica algo específico. Assim, o componente de código personalizado altera apenas a aparência do código.

Tópico		Respostas	Vistas
Add new highlightjs languages Product Support	1	287	13 Maio , 2025
HighlightJS is auto-selecting wrong language Product Support	5	1224	17 Fevereiro , 2020
Configure which programming languages are available for syntax highlighting Site Management how-to , customization	6	2998	26 Agosto , 2024
Choosing code highlight styles Product Support	3	1338	18 Abril , 2016
Be sure to get user input on which language the preformatted text is UX	2	407	23 Março , 2024

Como alterar as cores padrão do bloco de código fornecido?

Related topics