Markdown Page

This page is about pages created with the Markdown extension (.md).

Format

The content of a md file may be configured to be one of the 3 options below. By default, we use the mdc format.

Mdc Rules

For the support of markdown component like <Foo />, the following rules applies:

• All elements should be closed. <br> is not valid <br/> is
• The standard URL bracket syntax <http://www.example.com> is not valid
• No Markdown indented code or indented list, you need to use xhtml element
• Block level tag should be alone on their own line. See section below

One tag block level element on one line

The parser does the distinction between inline (in a paragraph) and block element based on the tag position

If the tag is on its own line, surrounded by blank lines or block-level content, it's a block otherwise it's an inline tag.

For instance, these th HTML elements are incorrect. They are seen as being inline element

html⎘ Copy
<th>Head</th>

and results in a paragraph

html⎘ Copy
<p>
    <th>Head</th>
</p>

You need to write the tag in its own line. The correct way is:

html⎘ Copy
<th>
    Head
</th>

Mdx Rules

Mdx follows the mdc rules and the style prop expects a object of style properties, not a string.

For example:

• this is not correct style="margin-right=2em;"
• this is correct: style={{marginRight: '2em'}}

Transform programmatically Markdown to React

We export 2 functions so that you can use as server Markdown processing programmatically:

Example:

javascript⎘ Copy
import {markdownToPageSync, markdownToComponentSync} from "@combostrap/interact/markdown";

let component = markdownToComponentSync("**Hello World**", {rootTagName: "span"});
let page = markdownToPageSync("## Hello World", {format: 'md'})

For a real examples, check the following middlewares source code:

• local-markdown-pages.tsx - local fetch
• github-markdown.tsx - remote fetch

These 2 transformations functions includes all registered unifed plugins (remark and rehype)

Configuration

• The default format may be set in the markdown node of the configuration file
• The configured remark and rehype plugins are also applied.