md-block
Version:
A custom element for rendering stylable (light DOM) Markdown
132 lines (103 loc) • 2.73 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>md-block: Render styleable Markdown in your HTML</title>
<link rel="icon" href="logo.svg">
<link rel="stylesheet" href="prism.css">
<link rel="stylesheet" href="style.css">
<!-- <script src="md-block.js" type="module"></script> -->
<script src="demo.js" type="module"></script>
<script src="prism.js"></script>
</head>
<body>
<header>
<h1><md-block></h1>
<md-block>
Render styleable Markdown in your HTML.
Uses [marked](https://marked.js.org/) under the hood.
</md-block>
</header>
<main>
<md-block src="README.md" hmin="2">
[Documentation on GitHub](https://github.com/leaverou/md-block/#readme)
</md-block>
<section>
<h2 id="demos">Demos</h2>
<p>Block</p>
<script type="text/html" class="md-block-demo">
<md-block>
# Heading
Text **bold text** *italic text* ~strike~
```js
test.foo();
```
```html
<foo>
```
* List item 1
* List item 2
</md-block>
</script>
<p>Block with incorrect src and fallback content</p>
<script type="text/html" class="md-block-demo">
<md-block src="nonexistent.md">
`nonexistent.md` was *not* found
</md-block>
</script>
<p>Minimum heading level:</p>
<script type="text/html" class="md-block-demo">
<md-block hmin="3">
# Heading 3
## Heading 4
### Heading 5
#### Heading 6
##### Still heading 6
</md-block>
</script>
<p>Heading links</p>
<script type="text/html" class="md-block-demo">
<md-block hlinks>
# Heading 1
## Heading 2
### Heading 3
</md-block>
<md-block hlinks="§">
# Heading 1
## Heading 2
### Heading 3
</md-block>
</script>
<p>Inline. Note that block level syntax like headings, code blocks, or lists is not processed</p>
<script type="text/html" class="md-block-demo">
<md-span>
# Heading
Text **bold text** *italic text* ~strike~
```js
test.foo();
```
```html
<foo>
```
* List item 1
* List item 2
</md-span>
</script>
<md-block>With and without [sanitization](#handling-untrusted-content).</md-block>
<script type="text/html" class="md-block-demo">
<md-block untrusted src="data:text/markdown,A [Click me](javascript:alert('hi'))"></md-block>
<md-block src="data:text/markdown,B [Click me](javascript:alert('hi'))"></md-block>
</script>
<p>View source for more demos!</p>
</section>
</main>
<footer>
<md-span>
Made in haste, by [Lea Verou](https://lea.verou.me). Use at your own risk.
[Pull requests welcome](https://github.com/leaverou/md-block)
</md-span>
</footer>
</body>
</html>