Core

Markdown

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:

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,
  },
};