[Widget] Markdown Preview

[rauenzi]

Trilium-MarkdownPreview - Link

A widget for Trilium Notes for live previewing markdown files with support for anchors, images, and sync scroll.

Why?

I know Trilium isn't a markdown editor, but I still use markdown for other things like my GitHub READMEs and I like storing everything in one place--Trilium. The only problem was, I couldn't preview my markdown files, and that's super helpful to have before I go pushing a commit. After looking, I couldn't find an existing widget for it, so I decided to make my own.

Preview

Features

• Preview markdown notes in real time
• Global and per-note styles
• Embed local images
• Clickable in-page anchor links
• Syncable scrollbars
• GFM-compliant with tables and more

Installation

1. Create a new code note with JS Frontend type. Copy and paste widget.js into the note.
   • Be sure to add the #widget attribute to the note
2. Attach the marked.min.js file to the note either via drag-n-drop or import.
3. (optional) Create one (or more) child code notes of CSS type and fill it with any global markdown styles.

Syntax Highlighting (optional)

If you want your codeblocks to have syntax highlighting, follow these steps:

1. Attach the highlight.min.js file to the note either via drag-n-drop or import.
2. (optional) Attach the pre-made syntax styles from styles.css as a child note of the main widget.

Usage

Create a code note with markdown type. Then, to make a note previewable, simply add the #markdownPreview attribute to it. (You may have to switch notes afterward for the preview to appear.)

After that, just start writing in markdown on the code editor side. You'll see the preview update with you as you go.

More Info

For more information on usage configuration, or to see some demo videos, go checkout the repository on GitHub.

[Nriver]

It's a legendary enhancement for Markdown support.

[Nriver]

The code highlight works great!

[rauenzi]

Glad to hear it 😄

[rauenzi]

Dropping this here for anyone that may be interested in markdown-related stuff: I'm working on a new plugin/widget...

4PRLrkAgjI.mp4

[Nriver]

Feel free to add your creations to the list https://github.com/Nriver/awesome-trilium

[rauenzi]

I definitely will when it's done! I just wanted to show this off as a proof-of-concept! 😄

[yqook]

The widget is amazing! It makes Trilium has more possibility. But there is a bug:
If you have a direct child note type of CSS , the 'CSS' will be applied globally when you view the parent note.

[rauenzi]

I'm not sure I understand, can you be a bit more specific? The CSS note is a child of the widget? Or of a markdown note?

If it's the child of a markdown note, do you mean it's also affecting other markdown notes?

[yqook]

Sorry for the poor english. Hope the picture can explain the problem clearly:

[yqook]

Add:

• The parent note "Any type of parent note" doesn't have any attribute.

[rauenzi]

Nriver ended up making a similar issue on the repo which helped me debug it. Change line 155 from

        if (this.note) {

to

        if (this.note && this.isEnabled()) {

And then reload and the bug should be fixed!