[Idea]: support for syntax highlighting in the Notebooks Notes Editor

[fabricefrebel]

What are you trying to do?

Notes are very useful for example to create a personnal todo list, a purchase list... where you can retrieve data by asking the LLM. This is very powerful also with with a local LLM because the quantity of data is quite low but with rich personal information.

What feels difficult or missing today?

Visualization of the Note is quite difficult.

What outcome would help?

The text editor (Markdown) with right column rendering is perfect.
An improved color rendering could help a lot when editing the Markdown (editor on the left side).
The possibility to use or edit a css file for the rendering( renderer on the right side) would also help for a better visualization.

How do you handle this today?

I use the tool as it is (already very useful).

Additional context, examples, or possible directions

No response

How would you like to participate?

• I can add use cases or join the product/design discussion.
• I can help explore the technical approach.
• I can help implement an approved work item.
• I can test or validate a proposed solution.

Before posting

• I searched existing Discussions and Issues for related proposals.

[lfnovo]

Thanks — and nice use case: small, rich personal data + a local LLM is exactly the kind of setup we want to keep first-class.

I dug into the code, and there are two different things hiding in "improved color rendering":

1. The editor pane already has markdown syntax highlighting (we use @uiw/react-md-editor, and it's enabled) — but I found a real defect while checking: the editor is hardcoded to light mode, ignoring the app theme. If you use Open Notebook in dark mode, the editing experience is genuinely jarring, and that alone may explain a lot of the "visualization is difficult." That's a small, well-defined fix — I'm opening a work item for it. Out of curiosity: do you use dark mode?
2. Beyond that: what would "improved" look like for you concretely — editor colors that match the app theme, code-block highlighting inside the editor, something else?

On the custom CSS file for the preview: before committing to that, I'd like to understand what you'd change with it. A user-CSS hook is a real maintenance surface (it breaks whenever the DOM changes), and we just consolidated theming into a token system. For your lists use case, would better default rendering — e.g. nicer task-list checkboxes, tighter list density — get you most of the way? If there's a concrete gap the defaults can't cover, that's worth knowing.

Status: exploring — with the dark-mode editor fix graduating immediately as a work item.

[fabricefrebel]

Hi, thanks for considering this request.

1. I'm using 'Light Mode'.

2. I'm thinking about color highlighting that helps ease reading, especially:

• In the editor side (left):
  • Having the title in color (all text starting with #)
  • Using different colors for different bullet point symbols could improve readability (less essential)
  • When highlighting a word (by double-clicking on it), all identical words are automatically highlighted - this is a very practical feature that adds visibility.
• Regarding the renderer (right side), custom CSS might not be necessary. The only missing feature is proper bullet rendering. Lists created with bullets (using *, - symbols) are currently rendered as indents.

3. A third idea (this should probably be added in a separate case) is the possibility to insert images in Markdown. The goal is to mimic the classical image copy/paste behavior in text editors. Let me explain how I've added this feature in standard Markdown editors:
   a. First, the user copies the image from the clipboard (screen capture or using any other tool)
   b. Press Ctrl+Shift+V in the OpenNotebook editor
   c. A window appears requesting an image name; enter the name (e.g., myimage) and press ENTER
   d. The image is saved to the hard drive (notebook_data\images) directory
   e. The following command is automatically added to the Notebook at the cursor location: ! [myimage] (open_notebook_directory\notebook_data\images\myimage.png)

I added this feature in Notepadd++ using AutoHotkey (Windows only) and a Python script to get the image from the clipboard. I'll try to extend my macro to get it working with OpenNotebook but this could be a native feature.

I hope this helps.

[lfnovo]

Your "bullets render as indents" is a real bug, and I could confirm it in the code: our CSS reset (Tailwind's preflight) sets list-style: none on every list, and the editor's preview stylesheet never restores the marker for top-level lists — so -/* lists show as bare indentation, and numbered lists lose their numbers the same way. The fix is tiny; work item: #1299.

On the editor side:

• Headings and list markers in color — this is editor theming, the same surface as the dark-mode fix (Notes markdown editor hardcodes light mode, ignoring the app theme #1268), so I've added it there rather than opening a separate item.
• Double-click highlights every occurrence — not planned. The editor is a styled textarea; that behavior needs a code-editor engine underneath, and swapping engines isn't on the table for this alone. Saying it plainly so you don't wait on it.

Your third point — pasting an image from the clipboard into a note — is a separate need, and a good one: it means notes carrying attachments, which they can't today (notes are plain markdown in the database). I've logged it as evidence in the images thread, #566, where display and storage of images are being shaped together. Your AutoHotkey flow is a clear description of the target behavior.

Status: exploring — list bug graduated (#1299), editor colors folded into #1268, image paste routed to #566.

[lfnovo]

Closing the loop: both defects graduated from this thread are fixed on main and will ship in the next release — the editor now follows the app theme (#1268, via #1294) and preview lists show their bullets and numbers again (#1299, via #1300). Headings and list markers pick up the theme colors as part of the first fix.

The remaining need from your post — pasting an image from the clipboard into a note — lives in #566, where notes with attachments are being shaped together with image display. Follow that thread if you want to weigh in.

Status: resolved — everything here either shipped or has a home. If the next release doesn't behave as described, reopen this one or comment on the issue.