Markdown

Markdown is a popular markup language to write content that is converted to HTML. This format is enabled by default and is useful for pages with long text like posts or articles.

Creating pages in Markdown

To create a page using Markdown, just add a file with .md extension to your site. You can also add extra variables by including a front matter, a block delimited by two triple-dashed lines with YAML code:

---
title: Welcome to my page
layout: layouts/main.njk
---

# Welcome

**This is my first post** using lume
I hope you like it!

The Markdown code is stored in the content variable:

<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}
  </body>
</html>

md filter

The Markdown plugin also register the md filter that renders any string value as Markdown and output a HTML. The filter also accepts an argument to render the Markdown in inline mode.

<!-- Render to HTML code -->
<div>{{ text | md }}<div>

<!-- Single line rendering, without the paragraph wrap: -->
<p>{{ text | md(true) }}<p>

Configure the Markdown plugin

In _config.ts, the second argument of lume() is used to configure the plugins that are enabled by default (like this!). Use it to configure the markdown plugin.

import lume from "lume/mod.ts";

// Markdown plugin configuration
const markdown = {};

// Apply the plugin config
const site = lume({}, { markdown });

Plugins

Lume uses markdown-it as the markdown parser, with the following plugins enabled:

markdown-it-deflist to add support for definition lists (<dl> tag).
markdown-it-attrs to add support for CSS classes and other attributes using {}.

Use the property plugins to replace them. For example, to add the markdown-it-anchor plugin:

import anchor from "https://jspm.dev/markdown-it-anchor";

// Set the markdown plugins
const markdown = {
  plugins: [anchor],
};

This will override the default plugins with yours. If you only want to add more plugins without remove the defaults, use the keepDefaultPlugins option:

// Add more markdown plugins without override the defaults
const markdown = {
  plugins: [anchor],
  keepDefaultPlugins: true,
};

Use the options property to change the markdown-it settings:

// Change markdown-it configuration
const markdown = {
  options: {
    breaks: false,
    xhtmlOut: true,
  },
};