render Markdown files ?

xxxxx

I'd love to have a rendered view of Markdown files rather than the CodeMirror raw text preview. Is there an easy way to convert markdown to html (maybe using the marked or markdown-it libs) ?

Karl

xxxxx Is there an easy way to convert markdown to html (maybe using the marked or markdown-it libs) ?

Yes, it would be possible of course. I'm not 100% sure how to implement the interface, because many (including myself) want to see the markdown in raw mode so it can be edited. You can't edit markdown directly when it's rendered as html of course.

Another challenge, is that the rendered markdown would inherit CSS styles from Files gallery, including colors <h1> header styles, and list styles (which may be reset in Files gallery).

Regardless, I think there are a few options:

Simply include an option to render markdown as HTML. In this case, we would not use CodeMirror at all, and simply render the markdown as html with some Javascript markdown-library. This means the viewer cannot toggle modes or edit the markdown.
Include a "toggle" button that toggles between raw/edit mode (using CodeMirror) and rendered HTML view (as per above).
Replace CodeMirror with a unique markdown editor plugin, for instance simplemde.com.

Karl

Karl Replace CodeMirror with a unique markdown editor plugin, for instance simplemde.com.

Simplemde.com doesn't seem to be maintained, this would be the updated fork:
https://easy-markdown-editor.tk/

xxxxx

I like all your suggestions:

settings for markdown to be editable/view-only then if view-only > rendered as raw | html would be great. it would enable users to create nice looking notes
a toggle on the to switch between edit/preview would be neat. it seems easy-markdown-editor and toast ui offer this by default , also toast-ui has full wysiwyg editing but it's quite big (minified > 500kb I think)
easy-markdown-editor seems like a good solution. it seems to be using a codemirror container too, so I suppose it would inherit the codemirror css

Karl

I was checking more last night, and there is a newer editor cherry-markdown (see demo) that seems better and most updated.

xxxxx settings for markdown to be editable/view-only then if view-only > rendered as raw | html would be great. it would enable users to create nice looking notes

This would normally use Files existing allow_edit option that applies for any text-based files. If editable, we would use split-view example as in the demo above. If not editable, I think I would still use the same plugin, preferably with a button to toggle between raw markdown and html ... It seems pointless to include a separate markdown renderer, just to render markdown in non-edit mode, and this plugin seems to have some nice view features.

xxxxx a toggle on the to switch between edit/preview would be neat. it seems easy-markdown-editor and toast ui offer this by default

Yes. Personally, I enjoy the default split-view in these markdown editors.

xxxxx also toast-ui has full wysiwyg editing but it's quite big (minified > 500kb I think)

Like a HTML editor? All the plugins seem to have wysiwyg options for editing markdown. As for the topic of HTML specifically, we could have added options for this also, but it seems like a bad idea ... While markdown will render consistently in a preview, there is no reason to believe HTML will render properly in a preview, and it could easily break Files gallery also (orphan tags), unless contained inside an <iframe>. Since there is already a CodeMirror raw HTML editor, and a button to view the html document in a new window, I think that is sufficient.

A potential problem in markdown previews, is relative links (for example links or images). Relative links would be relative to the Files gallery url of course, which could be wrong. There is probably a config option to assign relative path for markdown links, but this would be a global option of course.

Thanks for your input.

Karl

Files Gallery 0.13.0 includes Markdown preview and split view modes.

See Markdown demo:
https://demo.files.gallery/?files#markdown.md

You can modify the markdown configuration from Javascript config markdown option:

_c.config.markdown = {
    enabled: true, // markdown editor with split screen and preview enabled
    extensions: ['md', 'markdown', 'mdown', 'mkdn', 'mkd', 'mdwn', 'mkdown', 'ron'], // extensions to apply markdown editor on
    // modes array and order / default first mode is 'split' on large screens and 'edit' on small screens
    modes: matchMedia('(min-width: 576px)').matches ? ['split', 'edit', 'preview'] : ['edit', 'preview', 'split'],
    remember_mode: true, // remember current markdown mode when navigating and re-opening / if false, will always reset
    scroll_sync: true, // sync scroll in split mode
    html: (html) => html, // custom preview html parser in if someone wants to (html) => DOMPurify.sanitize(html)
    link_target: '_blank', // open markdown preview links in _blank window on click
    // markdown insert shortcuts
    shortcuts: {
        'B': ['**', '**'], // Ctrl-B bold
        'I': ['_', '_'], // Ctrl-I italic
        'K': ['[', '](https://)'], // Ctrl-K link
        'Alt-I': ['![', ']()'] // Ctrl-Alt-I image
    }
}

You can also use ctrl/cmd-P to toggle edit, live and preview modes.