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

JS

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);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "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);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  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"
    }
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

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"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state({
  "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"
    }
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Solid

import { createPlayground, type EmbedOptions } from 'livecodes';

export default function App() {
  const options: EmbedOptions = {
  "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"
    }
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

Ripple

import { createPlayground, type EmbedOptions } from 'livecodes';

export default component App() {
  const options: EmbedOptions = {
    "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"
      }
    }
  };
  const onMount = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  <div {ref onMount}></div>
}

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

JS

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);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "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);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  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"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

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"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state({
  "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"
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Solid

import { createPlayground, type EmbedOptions } from 'livecodes';

export default function App() {
  const options: EmbedOptions = {
  "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"
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

Ripple

import { createPlayground, type EmbedOptions } from 'livecodes';

export default component App() {
  const options: EmbedOptions = {
    "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"
    }
  };
  const onMount = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  <div {ref onMount}></div>
}

Language Info

Name

markdown

Aliases

md, mdown, mkdn

Extension

.md

Editor

script

Compiler

Marked

Version

marked: v13.0.2

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

Links

• Markdown
• Marked
• The Markdown Guide
• MDX support in LiveCodes