search

microsoft / PowerToys

Windows system utilities to maximize productivity
MIT License
111.37k stars 6.56k forks source link

Syntax highlighting for Markdown preview #1841

Open AbhyudayaSharma opened 4 years ago

AbhyudayaSharma commented 4 years ago

Markdown preview does not do any syntax highlighting. Please enable syntax highlighting. This will prevent me from opening vscode for every README that I come across.

crutkas commented 4 years ago

can you share an MD and what you expect it to look like?

AbhyudayaSharma commented 4 years ago

@crutkas from one of my repositories:

image

Expected (as on GitHub):

image

AbhyudayaSharma commented 4 years ago

Oh and the first line of the code block in the preview has extra margin to the left.

crutkas commented 4 years ago

would this maybe be something you'd be interested in adding in?

aminya commented 4 years ago

It would be nice to have syntax highlighting for the preview of all different files, not just markdown. Like Rust, C++, Python, etc.

Jay-o-Way commented 2 years ago

CC @Aaron-Junker

crutkas commented 2 years ago

this is totally different rendering systems @jay-o-way. markdown previewers do fully rendered and GitHub chances are has more magic css than we do.

Here is common.md rendered vs https://github.com/microsoft/PowerToys/blob/main/doc/devdocs/common.md image

Aaron-Junker commented 2 years ago

I personally don't see us taking the effort of integrating a system like GitHub has.

Jay-o-Way commented 2 years ago

Yeah, next thing will be to add custom colors too. Can't we leverage something that exists? Like VS (Code) settings?

crutkas commented 2 years ago

actually, if we can get Monaco to preview it, this could work. It is doing markdown to HTML and then does a webview2.

https://github.com/microsoft/PowerToys/blob/main/src/modules/previewpane/MarkdownPreviewHandler/MarkdownPreviewHandlerControl.cs

crutkas commented 2 years ago

maybe it is possible ...

from https://stackoverflow.com/questions/51171733/how-to-get-markdown-preview-in-the-monaco-editor

import { renderMarkdown } from "monaco-editor/esm/vs/base/browser/markdownRenderer"

const htmlResult = renderMarkdown({
            value: samplemarkdownData
        }).innerHTML;
Aaron-Junker commented 2 years ago

import { renderMarkdown } from "monaco-editor/esm/vs/base/browser/markdownRenderer"

const htmlResult = renderMarkdown({ value: samplemarkdownData }).innerHTML;

This does not work it processes code blocks in markdown just like the normal markdown previewer. image.

Or did I understand you wrong.