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.

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

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

[memeplex]

@yzhang-gh one think I dislike of markdown.extension.syntax.plainTheme is that it doesn't limit itself to the URL but also changes the description of the link. For example, for the Noctis theme, this is the original:

and this is after enabling markdown.extension.syntax.plainTheme:

The behavior is a bit invasive, notice for example the inconsistency between wikilinks and regular links after the change. Can it be restricted to the URL or at least made configurable? Thanks.

[yzhang-gh]

This feature was developed a long time ago. I agree that it would be better to introduce some options in the future.

[yzhang-gh]

Hi all, we now have an experimental feature as shown in #1136 (thank @yy0931).
There is a packaged .vsix for anyone interested to try out. Feel free to provide any comment/feedback there.

[JoJoJotarou]

Using editor.tokenColorCustomizations is an easy way to implement, and I think that's the theme's job.

It look like this:

settings.json:

  "editor.tokenColorCustomizations": {
    "[Spacemacs - dark]": {
      "textMateRules": [
        {
          "scope": [
            // control bold markup light and shade
            "punctuation.definition.bold.markdown",
            // control italic markup light and shade
            "punctuation.definition.italic.markdown",
            // control strikethrough markup light and shade
            "punctuation.definition.strikethrough.markdown",
            // control link markup light and shade
            "meta.link.reference.markdown",
            "meta.link.reference.def.markdown",
            "meta.link.inline.markdown",
            // control quote markup light and shade
            "punctuation.definition.quote.begin.markdown",
            // control separator markup light and shade
            "meta.separator.markdown",
            // control list markup light and shade
            "punctuation.definition.list.begin.markdown",
            // control image markup light and shade
            "meta.image.reference.markdown",
            "meta.image.inline.markdown",
            // control fenced_code markup light and shade
            "punctuation.definition.markdown",
            // control inline_code markup light and shade
            "punctuation.definition.raw.markdown",
          ],
          "settings": {
            "foreground": "#6c6c6c"
          }
        },
        {
          "scope": [
            "markup.heading.markdown",
          ],
          "settings": {
            "fontStyle": "italic bold",
            "foreground": "#CE537A"
          }
        },
        {
          "scope": [
            "markup.bold.markdown"
          ],
          "settings": {
            "fontStyle": "bold",
            "foreground": "#d99d65",
          }
        },
        {
          "scope": [
            "markup.italic.markdown",
          ],
          "settings": {
            "fontStyle": "italic",
            "foreground": "#d99d65",
          }
        },
        {
          "scope": [
            "string.other.link.title.markdown",
            "string.other.link.description.markdown",
            "markup.inline.raw.string.markdown",
            "constant.other.reference.link.markdown",
            "markup.quote.markdown",
            "fenced_code.block.language.markdown",
            "markup.strikethrough.markdown",
            "string.other.link.description.title.markdown",
          ],
          "settings": {
            "foreground": "#d99d65",
          }
        },
      ]
    }
  }

open a markdown file then Ctrl+Shift+P and type inspect Editor Tokens and Scopes to get Scope. Hope it helps😀

[yzhang-gh]

@JoJoJotarou Thank you for the information.

This feature has not been actively maintained since 2018 while tokenColorCustomizations was not yet implemented. But it is true that this feature is a bit outdated now.