-
-
Save markstos/a3275ba81585a9ced1e4f1263d95df59 to your computer and use it in GitHub Desktop.
Nginx render markdown by browser
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment