Customize markdown rendering in NR

General
1

Hi there!

Is it (easily …) possible to set / modify how markdown is rendered in NR?

I use Obsidian and like the bigger font for # Heading level 1 compared to ## Heading level 2

However, I prefer NR’s color for code and the nicer bullets changing w/ indentation.

The possibiliy to collapse a section would also be great!

Cheers, Uwe

2

Where in Node-RED? There are various places where Markdown might be rendered.

3

If you mean the frontend, then they all use the same base function --> RED.utils.renderMarkdown.

4

Sorry for the confusion.

Yes the front end. Markdown rendered in comments. And yes, I see 1543 lines of code. This is the place.

Is it (easily …) possible to set / modify how markdown is rendered in NR?

Easily. Fiddling with this code, building NR is not an option.

I take that as an answer no to the question.

Cheers, Uwe

5

For me that is easy.

Your emphasis on "easily" is purely a personal perspective. I cannot judge what is easy for you, just as you cannot judge what is easy for me.

6

This doesn't require any code changes or modification of Node-RED.

Under the editorTheme property in your settings file is a way to provide a file of custom CSS that is applied to the editor. As you just want to change the styling of the headers, that's the way to do it.

I'm not near my laptop to give you a more specific pointer as to which style to modify, but wanted to at least point you on the right track.

7

Thank you for your hints. However, I am just a user of NR enjoying the “Low-code programming” approach to create simple solutions to my problems.

I happily create flows, I can understand and write basic JS code in function nodes, I use JSON and I can change configuration files in a basic way on the Pi.

CSS and the like is out of my scope. For me, this is not “Low-code programming”.

Cheers, Uwe

PS I just (re-) discovered that level 3 headings can be expanded/collapsed.

Bildschirmfoto 2025-08-03 um 13.56.13
Bildschirmfoto 2025-08-03 um 13.56.13852×713 62.4 KB

8

Just in case you want to try it:

In settings.js, immediately after

    editorTheme: {

Add these 3 lines (change the path /home/pi/.node-red/editor.css to something appropriate for your setup)

page: {
        css: "/home/pi/.node-red/editor.css"
},

And create the css file containing eg

.red-ui-help h1 {
        font-size: 3em;
}

Then restart Node-red.
This styles h1 elements within a div with class red-ui-help.
3em; is probably too big. 2 - 2.5em; may be just right.

image
image582×696 21.5 KB

1 Like
9

Brilliant. Thank you!

1 Like
10

Hi Uwe, at the moment there's no easy way to change how markdown is rendered in NR like you can in Obsidian. You can't adjust things like heading sizes directly, but you're right that NR has a cleaner look when it comes to code blocks and bullet points. The way bullets change with indentation is a nice touch. Collapsible sections would be a great feature too. Hopefully they add more customization options in the future.

11

@tonni6030 that just isn’t correct. As described in the other replies it is possible to provide custom CSS to modify the appearance/size of the headers.