<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>GitHub Markdown Render</title>
<link rel="stylesheet" href="https://netnr.eu.org/github-markdown-css@5.5.1/github-markdown.css" />
</head>
<body>
<textarea rows="10" placeholder="markdown content"></textarea>
<button class="nr-btn">Render</button>
<hr />
<div class="markdown-body"></div>
</body>
</html>
* {
box-sizing: border-box;
}
textarea {
width: 100%;
}
var btn = document.querySelector('.nr-btn');
btn.addEventListener('click', function () {
var content = document.querySelector('textarea').value;
btn.innerHTML = "Processing";
btn.disabled = true;
fetch('https://api.github.com/markdown', {
method: 'post',
body: JSON.stringify({
text: content,
mode: 'gfm'
})
}).then(resp => resp.text()).then(res => {
document.querySelector('.markdown-body').innerHTML = res;
}).finally(() => {
btn.innerHTML = "Render";
btn.disabled = false;
})
})