Vscode-markdown: Markdown-optimized theme (todo: add default dark+ theme support)

[borekb]

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 :)

[yzhang-gh]

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.

[borekb]

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.

[borekb]

That extension is actually surprisingly little code..

[yzhang-gh]

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.

[yzhang-gh]

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

[borekb]

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.

---

---

---

[yzhang-gh]

OK, thanks. Will do it during the weekend.

[athrunsun]

@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.

[yzhang-gh]

Material Theme, a pretty nice theme.

[yzhang-gh]

Available here

[athrunsun]

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

[yzhang-gh]

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.

[athrunsun]

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

[yzhang-gh]

You mean stable version? maybe next weekend.

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

[athrunsun]

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

[borekb]

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.

1. Image previews are nice :)

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

[yzhang-gh]

I will get back to this later

[borekb]

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

[yzhang-gh]

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

[yzhang-gh]

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?

[borekb]

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..

[yzhang-gh]

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)

[borekb]

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.

[borekb]

The "light" styling looks nice!

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

[borekb]

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:

[yzhang-gh]

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

[borekb]

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..

[borekb]

Blue looks very good for links, IMO. 👍

I'd probably distinguish plain links and images.

[yzhang-gh]

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.

[yzhang-gh]

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).

[athrunsun]

@neilsustc Cool! The fewer extensions to install, the better!

[borekb]

Very cool indeed, I'll be testing the newest build today. Thanks!

[borekb]

This is how it looks on my PC with the default dark theme:

Some of the colors look different than in your screenshot (code and I believe also links).

Overall, I very much like the direction, thanks again.

[yzhang-gh]

The colors are same but look different in the context of different themes. I chose them based on the Material theme. As I mentioned in the beginning, the color pattern is hard to choose. I have no good idea now.

[borekb]

Can the colors be specified relative to a theme? For example, "make bold 10% lighter than normal color", "make URL 85% less saturated", etc.?

[yzhang-gh]

We cannot access the theme colors programmatically to my knowledge...

[borekb]

There will be edge cases.. This is a highlighted search result in the default dark theme:

[yzhang-gh]

😔 (also no good solution)

[borekb]

That's a shame because it looks really good. Maybe just enable this is one of the well-known themes is active? For example, you could ship support for the default light, default dark and Material themes. I know this is not ideal, by far, but without relative colors, I cannot imagine any other way.

[borekb]

Is it possible that this highlighting would cause performance problems? My document is not large (1-2 pages of text) and I'm seeing some slowness, sometimes, but am not sure at all what can be causing it. Just reporting it just in case...

[yzhang-gh]

Maybe just enable this is one of the well-known themes is active?

It is doable. But if you would like to adopt the Material theme, I am happy to have no more theme to adapt. 😂

I'm seeing some slowness

What kind of slowness are you seeing? the styles applying or delay on typing?
(The styles will be updated after stopping typing for 100ms)

[borekb]

:) I'd say supporting the default themes is a must though.

[borekb]

About the slowness: it is during typing, the editor is lagging significantly, even if just moving the cursor around. I have now tried to uninstall the latest build and all seems to be OK but I don't want to draw any conclusions yet.

[yzhang-gh]

The lag is also reported in #181. But I cannot reliably reproduce it. And it is wired as you are editing a not large file. If you by any chance find out the reproduction steps, please let me know. An insensitive test file will be even better.

[yzhang-gh]

Bad news. It seems that we cannot know what theme is used with vscode API (Microsoft/vscode#12668).

I'm wrong. We can know it using vscode.workspace.getConfiguration().get<string>('workbench.colorTheme')

[maranomynet]

The Changelog introduces this as a new feature - but yet I see no difference in my Markdown documents. Strikethroughs receive no styling. (I'm using the "Dark+ (Default dark)" theme)

I've tried installing and applying Material Theme and Highlight extension (and restarting VSCode), but no change.

What do I need to do in order to get the benefit of this change?

[yzhang-gh]

It is enabled by default and no longer depends on the Highlight extension.

Do you see any error in the dev console (menubar>help>toggle dev tools)?

[maranomynet]

No errors or warnings at all.

I'm using VSCode v1.24.1 and Markdown All in One v1.5.0

My markdown related settings are as follows:

    "markdown.extension.italic.indicator": "_",
    "[markdown]": {
        "editor.fontSize": 14,
        "editor.wordWrap": "bounded",
        "editor.lineNumbers": "off",
        "files.trimTrailingWhitespace": false,
    },

...and resetting (removing) all my User settings does not fix it.

[maranomynet]

Ah, I've noticed that this only affects unsaved Markdown "documents" – i.e. If I open a new tab and set it to Markdown and jot down some notes/todo, then strikethrough styling doesn't appear until I hit save and choose a filename with .md extension.

This unexpected discrepancy feels like a bug.

[yzhang-gh]

Good catch. Already fixed in the CI build.

[borekb]

About the slowness mentioned in https://github.com/neilsustc/vscode-markdown/issues/185#issuecomment-394628756, it seems that it takes quite a long time, like a minute, for a document to fully load and highlight itself. It then returns to normal. The bad thing is that colorizing happens also when opening MD in a diff editor.

[yzhang-gh]

I don't experience the slowness recently. But you made me remember one thing that one other extension was reported to conflict with this one. I don't remember the exact name. I suggest doing another test that disable all other extensions except for this one. #141.

[borekb]

After some experiments, it seems to be caused by MarkDown Link Suggestions, or maybe the fact that I'm editing markdown files in a monorepo with a lot of MD files in them and VSCode seems to background-check all of them when the first MD document is opened – it just takes time when some linting / checking extensions are installed. I really hope VSCode fixes that (related thread: https://github.com/DavidAnson/vscode-markdownlint/issues/38).

[linsui]

I don't understand how to highlight. Does it take effect automatically?What will it be in Light+ theme? Will math code hightlight?
我没看懂怎么使代码高亮。请问，它是自动生效的吗？在Light+主题里应该是什么样子？支持数学代码的高亮吗？我的代码里数学部分并未高亮显示。

[yzhang-gh]

这个 issue 是对个别语法（默认有且仅有删除线，代码块）进行修饰，整体的 Markdown 语法高亮是由 vscode 官方提供，默认就有

对于数学部分，因为 Markdown 本身是不支持数学公式的，所以依赖官方的语法没办法高亮

[linsui]

意思是能够高亮的语法是固定的，只能在此基础上进行修饰，是吗？感谢回答

[yzhang-gh]

对的，除非直接去改 vscode 官方提供的语法；简单的还好，但是数学公式就太复杂了，并且不在 Markdown 语法里

[maranomynet]

@neilsustc I see version 1.5.1 has been released, but the issue with unsaved markdown documents hasn't been fixed. Which release will that be in?

[yzhang-gh]

I wrongly published the new version with an old repository... 😂

You can still use the latest CI build which includes the fix.

[borekb]

@neilsustc Just wanted to thank you for this, I've been using the simplified theme for the past couple of days and it is awesome!

[yzhang-gh]

Happy to know it 😄. But the default dark+ theme support is not done yet.

Left to someone who is interested.

[borekb]

I'm on dark+ and it works reasonably well.