Skip to main content

Markdown

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid HTML.

Markdown is now one of the world's most popular markup languages.

Note

Please note that MDX is also supported in LiveCodes and is documented here.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "## Markdown\n\n_Hello_ **World**\n\nOrdered List:\n\n1. item\n2. item\n3. item\n\nUnordered list:\n\n- item\n- item\n- item\n\nLink:\n\n[link](https://livecodes.io)\n\nImage:\n\n![image](https://placehold.co/300x200)\n\nTable:\n\n| header 1 | header 2 |\n| -------- | -------- |\n| cell 1   | cell 2   |\n| cell 3   | cell 4   |\n\nQuote:\n\n> blockquote\n\nCode:\n\n```python\nprint(\"Hello, World!\")\n```\n"
    }
  }
};
createPlayground('#container', options);

Styles​

By default, no styes are added. Only HTML output is generated from the Markdown code.

If you want to style the result page similar to GitHub Markdown, you can use github-markdown-css. Note that the body needs to have a class="markdown-body" for the styles to be applied.

Script Editor (JS)
document.body.classList.add('markdown-body');

Example:

show code
import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "template": "markdown",
    "activeEditor": "style",
    "css": "@import 'github-markdown-css';\n\n.markdown-body {\n  box-sizing: border-box;\n  min-width: 200px;\n  max-width: 980px;\n  margin: 0 auto;\n  padding: 45px;\n}\n\n@media (max-width: 767px) {\n  .markdown-body {\n    padding: 15px;\n  }\n}\n"
  }
};
createPlayground('#container', options);

Code Blocks​

Syntax highlighting is provided for code blocks using highlight.js.

Mermaid Diagrams​

Mermaid diagrams are also supported. See Mermaid documentation for usage.

Example:

```mermaid
graph TD
  A-->B
  A-->C
  B-->D
```

Language Info​

Name​

markdown

Aliases​

md, mdown, mkdn

Extension​

.md

Editor​

script

Compiler​

Marked

Version​

marked: v17.0.4

Code Formatting​

Using Prettier.

Custom Settings​

Custom settings added to the property markdown are passed as a JSON object to marked.parse. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "markdown": {
    "gfm": true,
    "breaks": true
  }
}

Starter Template​

https://livecodes.io/?template=markdown

Sponsors