Rendering Markdown

Markdown is a common text-based file format that is often used for writing documentation, blogs and more. In this example we are going convert markdown content to HTML and send it to the browser.

First, let’s install the @deno/gfm package that can transform markdown to html.

Run deno install jsr:@deno/gfm
Create a markdown file like content.md:

path/to/content.md

## some heading

and some interesting text here

> oh look a blockquote

Add a route that renders that file

main.ts

import { CSS, render as renderMarkdown } from "@deno/gfm";

const CONTENT = `## some heading

and some interesting text here

> oh look a blockquote
`;

const app = new App();

app.get("/", async (ctx) => {
  const content = await Deno.readTextFile("path/to/content.md");
  const html = renderMarkdown(content);

  return await ctx.render(
    <div>
      <h1>Here comes a markdown post:</h1>
      <style dangerouslySetInnerHTML={{ __html: CSS }} />
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>,
  );
});

Other libraries

There are several other popular libraries besides @deno/gfm that can be used to render markdown. The most common ones are:

Rendering Markdown

Other libraries#

Other libraries