(Feature request) Shared notes - Can it render markdown?

[letshin]

Describe feature

Not sure if this is already possible - can shared notes render markdown to RTF?

Additional Information

No response

[zadam]

Hi, I'm not sure what you mean. Trilium does not really use Markdown, it's a WYSIWYG note-taking tool. I also don't know what is RTF (apart from an obsolete MS format).

[letshin]

Hi there Zadam. Sorry. I was/am confused between the note types. When its note type: text from what I understand Trilium uses CKEditor for some Markdown autoformatting. Whilst using note type: markdown, the markdown code is highlighted within Trilium itself, but while sharing the markdown-type code through the generated link, only the code is shown, and it is not converted into any formatting. Is there any way to have the markdown rendered whilst being shared? I know the docs mentioned CSS styling, but I don't think its applicable here?

The alternative is of course, to type it in the text format but it does feel somewhat easier to be able to type in pure markdown without CKEditor converting it on the fly.

[zadam]

Sorry for late response. What you want is not possible, Trilium simply doesn't support Markdown formatting. Markdown will be displayed as plain text.

[wunter8]

I figured out a way to get you close by including Showdown.js via JS.

1. Create a note of type Text. Inside the text note, insert a plain text code block, and put all your markdown inside it. In this example, I copied all the markdown from Showdown's demo editor

2. Create a note of type JS Backend. Copy this script into the code note:

   
   function loadScript(url, callback)
   {
   // Adding the script tag to the head
   var head = document.head;
   var script = document.createElement('script');
   script.src = url;
   
   // Then bind the event to the callback function.
   // There are several events for cross browser compatibility.
   script.onreadystatechange = callback;
   script.onload = callback;
   
   // Fire the loading
   head.appendChild(script);
   }

var convertToHtml = function() { var converter = new showdown.Converter(); var newHtml = converter.makeHtml(document.getElementById('content').children[0].children[0].innerText);

document.getElementById('content').innerHTML = newHtml;

}

loadScript('https://cdn.jsdelivr.net/npm/showdown@2.0.3/dist/showdown.min.js', convertToHtml);

![js-backend-note](https://user-images.githubusercontent.com/8421688/160453631-2e04d0cd-3931-4ca8-b3f7-0addf8e2a924.png) (ignore the code in the picture; I updated the script)

3. Add the `shareJs` relation to the `Text` and have it point to the `JS Backend` note. (see attributes in first image above)
4. (optional) Add the `shareAlias` attribute to the `Text` note to create a readable URL
5. Share the `Text` note and the `JS Backend` note

When you load the shared `Text` note page, you will see the markdown for a split second while the Showdown.js file loads, then it will be converted into stylized HTML. With some extra CSS and JS, you could probably hide the plain markdown, show a loading spinner, then show the rendered markdown once everything is done.

Before rendering:

![pre-render-example](https://user-images.githubusercontent.com/8421688/160454087-e0e04ee4-f494-48e0-bd54-ce1715ecfda7.png)

After rendering:

![rendered-example](https://user-images.githubusercontent.com/8421688/160453717-39c510b8-047c-4412-b81e-815bd3b8f75f.png)

Let me know if you have any questions!

[sigaloid]

Pardon me if I don't understand, but sharing notes that contain formatting with the built-in Trilium interface already render with shared notes.

Type `code test` in a note and share it, the code block will be rendered. Same as typing '#' and adding a header and such.

[wunter8]

This is changing markdown text in the code block in Trilium into rendered, stylized HTML in the shared note. For example, converting

# Introduction

## Download tarball

* bullet one
* bullet two
* bullet three

to

<h1>Introduction</h1>

<h2>Download tarball</h2>

<ul>
    <li>bullet one</li>
    <li>bullet two</li>
    <li>bullet three</li>
</ul>

which gets rendered as

Introduction

Download tarball

• bullet one
• bullet two
• bullet three

This allows you to write markdown in Trilium and convert it to HTML when it is shared.

[sigaloid]

Yes, but you can also just type in those things into Trilium and they get rendered. Using any of these buttons is de-facto Markdown (Ctrl-B to bold, Ctrl-I to italicize, etc). These do get rendered as HTML normally when shared.

[wunter8]

Correct. I agree that if you want rendered HTML in a shared note, it's easier just to type it with the headers and everything else in the Trilium note itself. But the question was asking about converting markdown in a note into HTML in a shared note, so that's the problem I was trying to solve.

I know some people prefer taking notes in markdown instead of worrying about clicking around to add headers and bullet points and things. Also, some people might be transferring markdown notes from other tools. This is to help in those cases.

[sigaloid]

Ah, I understand now, thanks!

[jaroslawhartman]

Thank you for the hints but I was not able to get @wunter8 's recipe working.

Eventually I used any MarkDown capable editor (e.g. Visual Studio Code + MD plugin), copied my raw text there, rendered preview and copied it back to Trillium.