mirror of
https://github.com/danbulant/markdown-wasm
synced 2026-05-19 20:38:43 +00:00
269 lines
6.4 KiB
HTML
269 lines
6.4 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>markdown-wasm demo</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<link rel="stylesheet" href="https://rsms.me/raster/raster.css?v=8">
|
|
<script type="text/javascript" src="markdown.js"></script>
|
|
<script type="text/javascript" async src="highlight.js"></script>
|
|
<style type="text/css">
|
|
|
|
:root {
|
|
--fontSize: 14px;
|
|
}
|
|
|
|
c.label { font-weight:500; letter-spacing:0; color:#999; }
|
|
|
|
c.input, c.output {
|
|
max-width:50vw;
|
|
}
|
|
|
|
c.textarea {
|
|
display: flex;
|
|
justify-content: stretch;
|
|
}
|
|
c.textarea textarea {
|
|
flex: 1 1 auto;
|
|
min-height: 50vh;
|
|
border: 2px solid black;
|
|
border-radius: 3px;
|
|
padding: 1rem;
|
|
font-size: 14px;
|
|
}
|
|
c.textarea textarea:focus {
|
|
outline: none;
|
|
border-color: var(--blue);
|
|
}
|
|
|
|
blockquote {
|
|
padding-left: var(--lineHeight);
|
|
border-left: 2px solid #ccc;
|
|
}
|
|
|
|
h1 > a.anchor,
|
|
h2 > a.anchor,
|
|
h3 > a.anchor,
|
|
h4 > a.anchor,
|
|
h5 > a.anchor,
|
|
h6 > a.anchor {
|
|
display: inline-block;
|
|
float: left;
|
|
height: 1.2em;
|
|
width: 1em;
|
|
margin-left: -1em;
|
|
position: relative;
|
|
outline: none;
|
|
}
|
|
/*.anchor:target { background: yellow; }*/
|
|
h1 > a.anchor:before,
|
|
h2 > a.anchor:before,
|
|
h3 > a.anchor:before,
|
|
h4 > a.anchor:before,
|
|
h5 > a.anchor:before,
|
|
h6 > a.anchor:before {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
opacity: 0.2;
|
|
right:0;
|
|
top:0;
|
|
width: 1em;
|
|
font-weight:300;
|
|
line-height: inherit;
|
|
content: ""; /* U+E08F */
|
|
text-align: center;
|
|
}
|
|
h1 > a.anchor:hover:before,
|
|
h2 > a.anchor:hover:before,
|
|
h3 > a.anchor:hover:before,
|
|
h4 > a.anchor:hover:before,
|
|
h5 > a.anchor:hover:before,
|
|
h6 > a.anchor:hover:before {
|
|
visibility: visible;
|
|
opacity:0.8;
|
|
}
|
|
h1 > a.anchor:focus:before,
|
|
h2 > a.anchor:focus:before,
|
|
h3 > a.anchor:focus:before,
|
|
h4 > a.anchor:focus:before,
|
|
h5 > a.anchor:focus:before,
|
|
h6 > a.anchor:focus:before,
|
|
h1:hover .anchor:before,
|
|
h2:hover .anchor:before,
|
|
h3:hover .anchor:before,
|
|
h4:hover .anchor:before,
|
|
h5:hover .anchor:before,
|
|
h6:hover .anchor:before {
|
|
visibility: visible;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<grid columns=2 class=_debug>
|
|
<c><h1>Markdown-wasm demo</h1></c>
|
|
<c>
|
|
<p>
|
|
Fast Markdown parser and HTML renderer implemented in WebAssembly.
|
|
<a href="https://github.com/rsms/markdown-wasm">Get it from GitHub</a>
|
|
</p>
|
|
</c>
|
|
|
|
<c class=label>Type some Markdown here</c>
|
|
<c class=label>HTML output from markdown-wasm</c>
|
|
|
|
<c class="input textarea"><textarea class="code" id="markdown-input"># Example
|
|
|
|
A third of the distance across the Beach, the meadow ends and sand begins. This slopes gradually up for another third of the distance, to the foot of the sand hills, which seem tumbled into their places by some mighty power, sometimes three tiers of them deep, sometimes two, _and sometimes only one._ A third of the distance across the Beach, the meadow ends and sand begins.
|
|
|
|
The outline of this inner shore is most irregular, curving and bending in and out and back upon itself, making coves and points and creeks and channels, and often pushing out in flats with not water enough on them at low tide to wet your ankles.
|
|
|
|
## Subtitle
|
|
|
|
This is another fine paragraph
|
|
|
|
### Smaller subtitle
|
|
|
|
This is a paragraph `with` ~style~ *italic* _italic_ **bold** __bold__
|
|
|
|
|
|
|
|
*Hello [link](https://rsms.me/) lol*
|
|
|
|
Hello [*link*](https://rsms.me/) lol "cat"
|
|
|
|
Hello from *[link](https://rsms.me/)* to __everyone__ `reading this`
|
|
|
|
Here's an [**important** anchor link](#example).
|
|
|
|
line 1
|
|
line 2
|
|
|
|
Code & Poetry
|
|
-------------
|
|
|
|
You can also indent
|
|
blocks to display
|
|
code or poetry.
|
|
|
|
Indented code/poetry blocks
|
|
can be hard-wrapped.
|
|
|
|
**Or, wrap your code in three backticks:**
|
|
|
|
```js
|
|
function codeBlocks() {
|
|
return "Can be inserted"
|
|
}
|
|
```
|
|
|
|
|
|
### Embedded HTML
|
|
|
|
With default settings, markdown-wasm allows embedded HTML.
|
|
|
|
> It has been disabled in this demo for safety reasons, by means of setting `ParseFlags.NO_HTML`.
|
|
> Not setting the `NO_HTML` flag allows embedding HTML like this:
|
|
|
|
<input type=“text” value=“type”></input>
|
|
|
|
|
|
### Block Quotes
|
|
|
|
> You can insert quotes by
|
|
> preceeding each line with `>`.
|
|
>
|
|
> Blockquotes can also contain line
|
|
> breaks.
|
|
|
|
|
|
## Lists
|
|
|
|
### Unordered lists
|
|
|
|
- Unordered
|
|
- Lists
|
|
- Hello
|
|
|
|
### Ordered lists
|
|
|
|
1. Ordered
|
|
2. Lists
|
|
4. Numbers are ignored
|
|
1. Ordered
|
|
|
|
121) Ordered lists can start
|
|
122) with any number and
|
|
123) use . as well as ) as a separator.
|
|
|
|
### Task lists
|
|
|
|
- [ ] Task 1
|
|
- [x] Task 2
|
|
- [ ] Task 3
|
|
- Regular list item
|
|
|
|
## Tables
|
|
|
|
| Column 1 | Column 2 | Column 3 | Column 4
|
|
|----------|:---------|:--------:|---------:
|
|
| default | left | center | right
|
|
|
|
### Table of image file types
|
|
|
|
| Header | Mime type | Extensions | Description
|
|
|---------------------------|--------------|------------|-------------
|
|
| `89 50 4E 47 0D 0A 1A 0A` | image/png | png | PNG image
|
|
| `47 49 46 38 39 61` | image/gif | gif | GIF image
|
|
| `FF D8 FF` | image/jpeg | jpg jpeg | JPEG image
|
|
| `4D 4D 00 2B` | image/tiff | tif tiff | TIFF image
|
|
| `42 4D` | image/bmp | bmp | Bitmap image
|
|
| `00 00 01 00` | image/x-icon | ico | Icon image
|
|
|
|
|
|
</textarea></c>
|
|
<c class="output" id="html-output">
|
|
<div title="Loading markdown module...">•••</div>
|
|
</c>
|
|
</grid>
|
|
|
|
<script type="text/javascript">
|
|
|
|
// await the loading of the web assembly module
|
|
window["markdown"].ready.then(markdown => {
|
|
|
|
const inputEl = document.getElementById("markdown-input")
|
|
const outputEl = document.getElementById("html-output")
|
|
let hljsTimer
|
|
|
|
function update() {
|
|
let source = inputEl.value
|
|
let html = markdown.parse(source, {
|
|
parseFlags: markdown.ParseFlags.DEFAULT | markdown.ParseFlags.NO_HTML,
|
|
})
|
|
outputEl.innerHTML = html
|
|
updateCodeHighlight()
|
|
}
|
|
|
|
function updateCodeHighlight() {
|
|
clearTimeout(hljsTimer)
|
|
if (typeof hljs == "undefined") {
|
|
hljsTimer = setTimeout(updateCodeSyntaxHighlighting, 500)
|
|
return
|
|
}
|
|
document.querySelectorAll('pre code[class^="language-"]').forEach(block => {
|
|
hljs.highlightBlock(block)
|
|
})
|
|
}
|
|
|
|
inputEl.addEventListener("input", update)
|
|
update()
|
|
|
|
// load the markdown module to make it playable in the browser console
|
|
console.log("markdown module API:", markdown)
|
|
|
|
})</script>
|
|
<link rel="stylesheet" href="highlight.css">
|
|
</body>
|
|
</html>
|