Code block feature in the rich text editor is too unattractive

[hoixding]

Operating system

Windows

Joplin version

3.0.13

Editor

Rich Text Editor

What issue do you have?

The default code block feature in the rich text editor is too unattractive. Is there any way to optimize it? For example, with CSS styles or plugins.

[Daeraxa]

You are free to edit the CSS, you should be able to target pre.hljs.

Introduction to customising Joplin (userchrome.css & userstyle.css)

Joplin has several internal stylesheets that control what Joplin looks like to the user. However two have been provided that allow the user to customise the app. Joplin uses its built-in styles but these two files can be used to override those styles. These files are just like the Cascading Style Sheets (CSS) used when creating web-sites. The files are called userchrome.css and userstyle.css. userchrome.css allows styling of the app itself, including the Markdown Editor, userstyle.css allows s…

[hoixding]

I add it in userstyle.css
pre.hljs {
font-family: Source Code Pro;
font-size: 14px; /* Adjust font size as needed /
color: #333; / Dark gray text /
border: 1px solid black;
padding: 10px;
margin: 5px;
line-height: 1em; / Adjust the value as needed */
}