Preview markdown inline and extend the capabilities through existing VS Code extensions.

Headers

URLs

Reference links like [text][1], with [1]: url elsewhere in the document, look the same. Markless: Move Link URLs to the End of the Document (also a quick fix on links) turns every [text](https://github.com/tejasvi/markless/blob/HEAD/url) into such a link, which keeps long URLs from making lines wrap early.

Images

(and gifs!)

Paths are relative to the markdown file, or to the workspace folder when they start with /, as in the built-in markdown preview. Images in HTML <img> tags are shown too.

Preview on hover

Preview inline

Inline code

Code blocks

LaTeX

$..$ for inline blocks and $$..$$ for multiline blocks.

Live preview

Emphasis

Highlight

==text== is highlighted. The color can be changed with markless.highlightBackground in workbench.colorCustomizations.

Blockquote

Horizontal rule

HTML tags

List

Ordered lists keep their numbers. The symbols of unordered lists are set with markless.listBullets, for example ["•", "◦", "▪"] for the usual round bullets or [] to keep the markers as typed.

Task list

Mermaid

Use mermaid as the language specifier in the code block. A diagram is scaled to the lines of its code block; add lines to the block to make it bigger.

Diagrams are drawn by a view in the Markless side bar, which is shown for a moment when the first diagram is rendered.

Table

Front matter

YAML (---) and TOML (+++) front matter is left as it is.

Reveal source

The concealed elements near the cursor are auto-revealed.

To show all concealed elements, use the toggle button on the top-right. Alternatively, use the provided Ctrl+Shift+m shortcut. To reveal only the current line, toggle with Ctrl+Shift+space.

Performance

The extension intelligently parses only the visible text for large files and employs caching extensively. Entire rendering takes well under 100ms.

Vim bindings

The implementation uses the native editor instead of Custom UI. All extensions should work as expected including Neo Vim.

Spec compliant

The parser follows the Github Flavoured Markdown (thus Commonmark) spec. It prevents inconsistency with the formats exported with spec compliant renderers.

Extension Settings

Look under Markless section to selectively turn off the eye candies.

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "markup.list",
            "settings": {
                "foreground": "#6c7500",
                },
        },
        {
            "scope": "markup.bold",
            "settings": {
                "fontStyle": "bold",
            },
        },
        {
            "scope": "markup.heading",
            "settings": {
                "fontStyle": "bold",
            },
        },
        {
            "scope": "markup.inline.raw",
            "settings": {
                "fontStyle": "bold",
                "foreground": "#707070",
            },
        },
        {
            "scope": "string.other.link.title.markdown",
            "settings": {
                "fontStyle": "underline",
            },
        },
    ],
},

Known Issues

Bracket pair colorizers interfere with the rendering. If you use one, install the patched version which excludes the markdown files.

With word wrap on, lines with [text](https://github.com/tejasvi/markless/blob/HEAD/url) links wrap earlier than needed: VS Code decides where to wrap from the full text, including the hidden URLs, and extensions cannot change that. Moving the URLs to the end of the document (see URLs) avoids it.

Relevant extensions

• Keyboard Shortcuts, Tables and TOC
• Wikilinks, Backlinks, Tags
• Image paste
• Todo lists
• Snippets
• Linting
• Custom CSS
• Vim bindings
• One of yours

Typora equivalents

• Markdown editor
• Mark Text
• Zettlr
• Noteworthy

FAQ

The Comments panel opens when I open a file with images

Image previews are comment threads, and VS Code opens the Comments panel for the first file with comments. Set "comments.openView": "never" to stop it.

How do I keep image previews collapsed?

Set "markless.inlineImage.autoPreview": false. Each preview can then be expanded from the comment icon next to its line.

Contributing

See CONTRIBUTING.md to build, debug and test the extension.

Differences