Hide markdown syntaxes like Typora does

[yy0931]

Proposal

Take a look at this prototype. I did not know that VSCode could hide characters until I found vscode-inline-fold extension. There is already markdown.extension.syntax.plainTheme configuration (https://github.com/yzhang-gh/vscode-markdown/issues/185) that serves the same purpose but this is much better. ~~This feature should be especially useful when you have links with long URLs.~~ (edit: There is a problem with line breaks being done in the original number of characters (see ^1 and the upstream issue) so it may not be suitable for links for now.)

Source code:

import vscode from "vscode"

export const activate = (context: vscode.ExtensionContext) => {
    const decorationType = vscode.window.createTextEditorDecorationType({ textDecoration: "none; display: none;" })

    const updateDecorations = () => {
        const editor = vscode.window.activeTextEditor
        if (editor === undefined) { return }
        if (editor.document.languageId !== "markdown") {
            editor.setDecorations(decorationType, [])
            return
        }

        const selectedLines = new Set<number>()
        for (const sel of editor.selections) {
            for (let i = sel.start.line; i <= sel.end.line; i++) {
                selectedLines.add(i)
            }
        }

        const ranges: vscode.Range[] = []
        for (let i = 0; i < editor.document.lineCount; i++) {
            if (selectedLines.has(i)) { continue }
            const line = editor.document.lineAt(i)
            for (const match of line.text.matchAll(/(?<!\\)\*|\([^)]*\)|\[|\]/g)) {  // FIXME: Use a markdown parser
                ranges.push(new vscode.Range(line.range.start.line, match.index!, line.range.end.line, match.index! + match[0].length))
            }
        }
        editor.setDecorations(decorationType, ranges)
    }

    updateDecorations()
    context.subscriptions.push(
        vscode.window.onDidChangeActiveTextEditor(() => { updateDecorations() }),
        vscode.workspace.onDidChangeTextDocument(() => { updateDecorations() }),
        vscode.window.onDidChangeTextEditorSelection(() => { updateDecorations() })
    )
}

export const deactivate = () => { }

References

https://github.com/yzhang-gh/vscode-markdown/issues/929

[yy0931]

If you like it I can work on a PR.

[yzhang-gh]

This is quite interesting.

PRs are always welcome. At least we can make it an experimental feature if it is not stable enough.