vscode-markdown

vscode-markdown copied to clipboard

I'm not sure if this is technically possible and within the scope of this extension but it would be awesome if I could get theming for my Markdown documents. Right now, I get reasonable syntax highlighting by VSCode, something like this:

But dedicated Markdown editors try to be more helpful, for example, the actual URL is toned down not to visually distract. This is an example from Caret:

So this is basically a suggestion to improve the rendering, if you think that's a good idea and if an extension can actually do that :)

This is completely feasible (using vscode decorations).

Another way is to use Highlight extension. I use it to add strikethrough effect to Markdown files. And here is my configuration

"highlight.regexes": {
    "(~~.+?~~)": [
        {
            "textDecoration": "line-through"
        }
    ]
}

In fact you are already able to achieve those effects using this extension (setting color, backgroundColor, ...).

It is powerful enough so I might not like to reinvent the wheel for now.

That's a great tip! How about just recommending to install the Highlights extension, and if it is, hooking into it and shipping some set of rules as part of All in One Markdown? The advantage would be that I would not need to maintain my own set of rules.

That extension is actually surprisingly little code..

That is right, this feature is technically very simple. I just really like the modularity of using that standalone extension.

I think I can programmatically inject a set of Markdown highlight rules if the user has installed this Highlight extension.

And could you tell me your configurations for reference? The color pattern is not an easy choice, considering the various themes users use.

I don't currently have any Highlight customizations. I'll post a couple of screenshots in both light and dark modes, sorry that I don't have anything more specific.

---

---

---

OK, thanks. Will do it during the weekend.

@neilsustc I'm sorry if my question is not related - but what theme were you using when you took screenshots in README.md? I feel that theme is good enough.

Material Theme, a pretty nice theme.

Available here

@neilsustc Are those syntax decorations only available in Material Theme you mentioned or it has nothing to do with the theme I use?

You need to install Highlight extension. This extension (Markdown) will inject some highlight configurations for you if it detect the existence of the Highlight extension.

@neilsustc OK, thanks for the instructions. When are you planning to release the syntax decorations change of this extension?

You mean stable version? maybe next weekend.

If you want to try it in advance, go ahead to download the latest build (here)

@neilsustc OK, thanks! I'll wait for the next weekend.

Wow this is awesome! Already much better than the stock look & feel.

I'll post some specific feedback, based on a couple of examples:

VSCode:

Caret:

1. How would it look if VSCode + All in One MD also used base text color for things like bold and italic?
   • BTW, I'd keep blue for headings – they are almost treated as symbols in VSCode.
2. code rendering is subtler in Caret which I probably prefer. Again, the base color is same as main text.

3. Image previews are nice :)

But thank you, even the toned down links are a big improvement.

I will get back to this later

The Highlight extension might not be entirely bug-free :)

That might be a problem of my regexes. There are a lot of corner cases...

I am going to add another option plainTheme/distractionFreeMode. But I cannot figure out a good name. I think there should already be a conventional name for it. Do you have any suggestion?

Not sure I'm afraid.. maybe "Zen" mode? But that's probably overused already :) "Distraction free" is not a bad name, IMO. "Focused", "plain", "minimal", "lite", something like that..

VSCode has its "Zen mode". Maybe just use markdown.extension.syntaxDecorations. + lite/plain/....

---

Image previews seems not feasible. But I know an extension named Image Preview who shows image preview on hover. Then there is one more question, would you also like to tone down the image links?

(You can download the latest CI build to test)

You mean this extension? For me, the goal would be to be able to scroll the document and see images instantly. If that cannot be done in VSCode, that's fine.

The "light" styling looks nice!

Tone down images? Probably yes (harder to me to tell without seeing it :) ).

It is possible that your regexes would influence TypeScript files? I see `template strings` highlighted, when I disable the Highlight extension, it goes away. But I don't think Highlight comes with any default rules.

Example:

You need to clean your highlight settings. Those rules were added when you installed the previous build of this extension.

(Just delete all the settings added by this extension. They will be updated every time this extension is activated)

---

BTW, how about adding a little blue to link text

Oh, I didn't realize my settings are updated. I use Settings Sync so am thinking whether auto-updated settings would be a problem or not. Generally, I'd prefer only my own, manual-only updates to settings.json but I understand the approach you're taking here.

Hmm.. still not sure about it, it doesn't feel right. It might also be problematic for users that use the Highlight extension already and have some custom rules; you won't be able to add your rules easily, will you?

It might be safer to create your own highlight.regexes-like config with some default rules, I'd be able to overwrite them in my settings.json if I want to but if not, everything would still work fine. Slightly controversial thing here is the bundling of Highlight code – I understand why you'd rather not do that but on the other hand, your extensions would be self-contained and it's not a lot of code..

Blue looks very good for links, IMO. 👍

I'd probably distinguish plain links and images.

This will not touch your custom rules. But I agree that it is not a perfect way now. (It makes my user settings even longer. So I am also not happy with it.)

I will reconsider it later.

Removed the dependency on Highlight extension in the latest CI build.

And the new look

Known issue: one character bold or italic blocks are not styled (hard corner cases for regular expressions).