Files
repomirror/data/web/md-renderer.html
2022-12-07 11:50:06 +03:00

58 lines
2.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/milligram/1.4.1/milligram.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.1.2/styles/github.min.css">
<script type="application/javascript" src="https://cdn.bootcdn.net/ajax/libs/marked/1.1.1/marked.min.js"></script>
<script type="application/javascript" src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<style rel="stylesheet">
body {
color: #24292e;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
.container {
margin: 5rem auto;
padding: 4rem;
border: 1px solid #eaecef;
}
.container h1 {
padding-bottom: .3em;
border-bottom: 1px solid #eaecef;
}
code.error {
display: block;
padding: 2rem;
color: #F43;
font-size: 2rem;
line-height: 2rem;
}
</style>
<script>
marked.setOptions({
renderer: new marked.Renderer(),
highlight: function (code, lang) {
const validLanguage = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(validLanguage, code).value;
}
});
const targetFile = location.pathname;
const modify = (t) => document.getElementById('content').innerHTML = t;
const request = fetch(targetFile, {headers: {'Accept': 'text/markdown'}}).then((res) => {
if (!res.ok)
throw new Error(`${res.statusText} (${res.status})`);
return res.text()
})
</script>
<script defer>
request.then((text) => modify(marked(text)))
.catch((err) => modify(`<code class="error">Failed to load ${targetFile}: ${err.message}</code>`))
</script>
</head>
<body>
<div class="container">
<div id="content" />
</div>
</body>
</html>