Skip to content

Instantly share code, notes, and snippets.

@ScottJWalter
Forked from afeish/md-renderer.conf
Last active January 22, 2024 11:12
Show Gist options
  • Save ScottJWalter/fdd76a9c4299eee81b3d34acd4f7c838 to your computer and use it in GitHub Desktop.
Save ScottJWalter/fdd76a9c4299eee81b3d34acd4f7c838 to your computer and use it in GitHub Desktop.
Nginx config to render markdown files (client side) #nginx #markdown
location /__special {
internal;
allow all;
root /usr/share/nginx/html/__special;
}
location = /__md_file {
internal;
allow all;
add_header 'Vary' 'Accept';
default_type text/html;
alias /usr/share/nginx/html/__special/md-renderer.html;
}
location ~* \.md {
error_page 418 = /__md_file;
add_header 'Vary' 'Accept';
if (!-f $request_filename) {
break;
}
# if no "text/markdown" in "accept" header:
# redirect to /__md_file to serve html renderer
if ($http_accept !~* "text/markdown") {
return 418;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css">
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.min.js"></script>
<style rel="stylesheet">code.error {line-height:2rem;font-size:2rem;color:#F43;padding:2rem;display: block;}</style>
<script>
const FILENAME = location.pathname;
const set = (t) => document.getElementById('content').innerHTML = t;
const pull = fetch(FILENAME, {headers: {'Accept': 'text/markdown'}})
.then((res) => {
if (!res.ok)
throw new Error(`${res.statusText} (${res.status})`);
return res.text()
})
</script>
<script defer>
pull.then((text) => set(marked(text)))
.catch((err) => set(`<code class="error">Failed to load ${FILENAME}: ${err.message}</code>`))
</script>
</head>
<body>
<div class="container box" style="margin:5rem auto;padding:4rem">
<div id="content"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment