Code block syntax highlighting differs drastically between editing and reading modes

[ramsey]

When I'm working with notes that contain code blocks, the syntax highlighting of the code is very different between the editing and reading modes.

My expectation is that the syntax highlighting would use the same highlighting in both editing and reading modes.

I'm not sure which version is intended to be the "correct" form of syntax highlighting, but the highlighting I see in editing mode looks nicer (to me).

Example of syntax highlighting in editing mode

Example of syntax highlighting in reading mode

Reference source

For reference, here is the Markdown source I used in the example screenshots:

## Example

```python
def binary_search(arr, item):  
    low = 0  
    high = len(arr) - 1  
  
    while low <= high:  
        mid = low + ((high - low) // 2)
        guess = arr[mid]  
        if guess == item:  
            return mid  
        elif guess > item:  
            high = mid - 1  
        else:  
            low = mid + 1  
  
    return None

item_count = sys.maxsize  
item_to_find = random.randint(1, item_count)
items = range(1, item_count + 1)

print(f'Item {item_to_find} is at index {binary_search(items, item_to_find)} in the list.')
```

[Chrismettal]

Thanks for reporting this.

I haven't yet had the time to deep dive into this, but looking into other themes, even the default Obsidian theme, this behavior seems to be pretty much present in whatever theme I test. Mostly with the same colors even.

[Chrismettal]

I've yet to find an example of a theme that manages to make codeblocks look the same in preview and editing form and I think I see why.

In the editing view, the input variables to your example would be themeable as cm-hmd-codeblock.cm-variable:

But in the reading view, function variables aren't "adressable" at all, making them use the standard text color:

And the function itself in the editing view would be cm-def.cm-hmd-codeblock:

While in the reading view, this would be themed via token.function:

So I can make sure that Dracula colors are used "wherever possible" in code spans, but I doubt I'll be able to make them look identical in both views, while following the original Dracula color guides.

[ramsey]

Thanks for taking a look. Is this a bug in Obsidian's reading view, then?

[Chrismettal]

I hesitate calling it "bugged", but the way Obsidian renders the reading view does make it difficult to impossible to keep the coloring exactly the same for code blocks.

I'll add overrides for the colors that can be themed so they at least match Dracula theming though.

[ramsey]

Thanks!

[Chrismettal]

I added code block theming with Version 1.1.0 just now.

Tried to align the code views as best as Obsidian allows. In the editing view, many things share the same CSS tag, namely cm-hmd-codeblock which doesn't allow me to theme every aspect of the code like a regular IDE, but we should now approach true Dracula colors better.

This is an example of the Dracula theme with your example in VSCode:

This is what the editing view looks like now (Most of what shows up as the white foreground color uses the cm-hmd-codeblock, thus isn't possible to be individually themed as of now.

Reading view looks pretty similar, but for example the "None" in line 15 is themed as a keyword in the editing view, while it is tagged as a boolean in the reading view.

I gotta admit though, I leaned heavily on your example and haven't gone out of my way to look for all possible keywords that might require theming. If you have example code where portions stick out after 1.1.0 feel free to reopen and paste them here.

[ramsey]

This looks great. Thanks!

[EDM115]

These changes indeed look awesome !
But I'm just wondering, it is possible to bring back the old background color of code blocks ? On big files it helped making a clear difference between them and regular text (ex. I use them without any language property to list the commits of the day during my internship, and now I just have big chunks of text showing in my files whereas before I clearly distinguished them as being less important than their summary above)

[ramsey]

@EDM115 That's a good point. In IDEs using Dracula, the background is the same color as the whole page in Obsidian, so making it lighter behind code listings tends to wash out the colors. I wonder if the background color could be darker as a way to offset the code blocks from text?

[EDM115]

I wonder if the background color could be darker as a way to offset the code blocks from text?

Well I believe the background color is already Background (#282A36), and there's no darker color (https://draculatheme.com/contribute)
My best idea would be to revert code block's background to Current Line (#44475A), as it was before. Or if it's not readable, then maybe it would be possible to have a border around code blocks that is Current Line

[Chrismettal]

Good points both.
I felt the original light background color messed with the text contrast too much and didn't think a distinction was required. I did notice however that between editing an reading view, the background of single line code differs still.

Maybe there is a way to put a border of the lighter background color around the code blocks, instead of changing the background entirely?

Let me try a few mockups of what might work.