markstos/md-renderer.html

## md-renderer.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>

## nginx.conf
location = /__md_file {
      # This block is for internal use only
      internal;
      allow all;

      add_header 'Vary' 'Accept';

      default_type text/html;
      # Serve requests to /__md_file using this HTML file
      alias /data/www/md/md-renderer.html;
}

# Disallow direct requests to the HTML file.
location = /md/md-renderer.html {
      deny  all;
}

location ~* \.md {
       # A hack: Use the non-standard 418 status code page to render the Markdown as HTML
       # JavaScript on that page will request the page with an Accept: text/markdown header
       # Nginx will return that directly and the JavaScript will format it.
       error_page 418 = /__md_file;

       add_header 'Vary' 'Accept';

       # Only proceed if there's a Markdown file on the server that matches the URL.
       if (!-f $request_filename) {
            break;
       }

       # Unless the client specifically asks for Markdown,
       # return the non-standard 418 status code, which we handle above
       if ($http_accept !~* "text/markdown") {
          return 418;
       }
}
	<!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>
	location = /__md_file {
	# This block is for internal use only
	internal;
	allow all;

	add_header 'Vary' 'Accept';

	default_type text/html;
	# Serve requests to /__md_file using this HTML file
	alias /data/www/md/md-renderer.html;
	}

	# Disallow direct requests to the HTML file.
	location = /md/md-renderer.html {
	deny all;
	}

	location ~* \.md {
	# A hack: Use the non-standard 418 status code page to render the Markdown as HTML
	# JavaScript on that page will request the page with an Accept: text/markdown header
	# Nginx will return that directly and the JavaScript will format it.
	error_page 418 = /__md_file;

	add_header 'Vary' 'Accept';

	# Only proceed if there's a Markdown file on the server that matches the URL.
	if (!-f $request_filename) {
	break;
	}

	# Unless the client specifically asks for Markdown,
	# return the non-standard 418 status code, which we handle above
	if ($http_accept !~* "text/markdown") {
	return 418;
	}
	}