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.

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