insane VS marked

Since marked doesn't do it for you, make sure you sanitize the user input (the text on the user profiles) before rendering it to visitors.

Some libraries for doing that with good defaults:

- https://github.com/cure53/DOMPurify

- https://github.com/apostrophecms/sanitize-html

- https://github.com/bevacqua/insane

(right now your site looks vulnerable to XSS)

Vue does not have as much support for Vue as there is for React. Examples are markdown-it, Remark.js, marked.js. But hopefully in the future, there should be more support, and after much research, I picked marked.js because it has the most stars and has zero vulnerability. Marked does not sanitize (meaning it does not secure HTML documents from attacks like cross-site scripting (XSS) ) marked output HTML as that feature is deprecated and has vulnerability but however, it supports the use of other libraries to secure output HTML such as DOMPurify (recommended), sanitize-html or insane.

The first step is to install marked. This is a markedown parser that will convert our markdown content into HTML. Run the command below to install marked.

I'm using @std/front-matter package along with marked as my blog runs on Deno, but FM would work with anything that has markdown files in folders.

To tackle this, I created an issue detailing my planned approach. I intended to use Marked to conditionally render certain markdown elements into HTML. After diving deep into Marked's documentation, I discovered this was indeed possible - you can simply disable the elements you don't want to render into HTML!

Now that I knew what I knew, it was time to start. Before I even began to consider how to solve this, I knew how these large projects feel about dependencies, so I went to the package.json file to check and see if there were things that I could work with. And what do you know? highlight.js was already included! What I immediately thought of was perhaps using the marked parser in addition to highlight.js to create and use my code blocks. But after quite a lot of time attempting this, I realized that hand-rolling this solution would not only take a lot of time but would also require a lot of code.

We'll start by initializing a Node project inside a chosen folder (nodejs-blog for me) with and installing a couple of dependencies that I feel like will make our lives easier, like Express, EJS, Marked, the good ol' body-parser and gray-matter.

Blog posts, as you've already noticed, are markdown files with attributes which are converted to static HTML on build using Marked and Front Matter.

The Marked package, with which we will display the markdown format.

Next, install gray-matter to extract metadata from the front matter of markdown files, and marked to convert the markdown files to HTML:

📑 Marked Markdown parser. Use it to create your own markdown editor.

Vrite SDK provides a few built-in input and output transformers. These are functions, with standardized signatures to process the content from and into Vrite. In this case, gfmInputTransformer is essentially a GitHub Flavored Markdown parser, using Marked.js under the hood.