Inspired by Typora^diff

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

Table of contents

table of contents

• Table of contents
• Differences with upstream
  • Differences between sean10's fork and upstream
  • Differences between this and sean10's fork
• features
  • Headers
  • URLs
  • Images
    • Preview on hover
    • Preview inline
  • Inline code
  • LaTeX
    • Live preview
  • Emphasis
  • Blockquote
  • Horizontal rule
  • HTML tags
  • List
  • Task list
  • Mermaid
  • Table
  • Reveal source
  • Performance
  • Vim bindings
  • Spec compliant
• Extension Settings
• Known Issues
• Relevant extensions
• Typora equivalents
• FAQ
  • Q: How to make Images Preview always maximized
• DEBUG
  • Set workspace's setting markless.debug to true
• Differences

Differences with upstream

Differences between sean10's fork and upstream

• YAML/TOML frontmatter support
• Bullet points uses common bullet point symbols instead of those super stylistic symbols
• Headings are based on colors, not size
• Various bug fixes (probably a lot)

Differences between this and sean10's fork

• Reverted colorful headings, now they're based on size again
• Fix horizontal rule not displaying
• Center Horizontal rule
• Fixed LaTeX sizes

features

Headers

URLs

Images

(and gifs!)

Preview on hover

Preview inline

Inline code

LaTeX

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

Live preview

Emphasis

Blockquote

Horizontal rule

HTML tags

List

Task list

Mermaid

Use mermaid as the language specifier in the code block.

Table

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.

Add the following in settings.json for better rendering.

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

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

Q: How to make Images Preview always maximized

Set vscode settings Workbench › Panel: Opens Maximized as always.

DEBUG

Set workspace's setting markless.debug to true

Then log.debug will log to console.

Differences

	Markless	Typora
Vim bindings	☑
Extensible	☑
Open source	☑
UI Polish	▣	☑
Advanced CSS		☑
iFrame embeds*		☑