-
-
Save afeish/c4cbe9b736c085fd24549469675460db to your computer and use it in GitHub Desktop.
Nginx config to render markdown files (client side)
This file contains 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 /__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; | |
| } | |
| } |
This file contains 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://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> |
Is there any way to modify this to work with PHP files?
thanks!
A Big Thank You for Posting.
Great work!
Wow just awesome. Thanks.
Worked in my machine. Thanks for the solution!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great stuff! Thanks a lot! Is it possible to embed images somehow? I tried to place the image next to the md file and tried with several urls for the image, but haven't succeeded.
-- EDIT: it works with absoulte URLs.