Last active
April 23, 2017 05:47
-
-
Save hyrious/634a24b1172e007d99058c7b7da08d9b to your computer and use it in GitHub Desktop.
preview *.md using marked.js, highlight.js, MathJax.js, and erb
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
@echo off | |
if "%~1" == "" goto no_param | |
:main | |
call erb filename="%~1" %~dp0\prmd.tt > "%TEMP%\%~n1.html" | |
start "" "%TEMP%\%~n1.html" | |
goto :EOF | |
:no_param | |
echo Please specify a *.md file. | |
goto :EOF |
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> | |
<head> | |
<meta charset="utf-8"/> | |
<title><%= File.basename filename, '.*' %></title> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/github-gist.min.css"> | |
<style> | |
#content{box-sizing:border-box;width:980px;margin:0 auto;padding:45px;word-wrap:break-word;background-color:#fff;border:1px solid #ddd;border-radius:3px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Segoe UI",Arial,"PingFang SC", "Microsoft YaHei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:16px;line-height:1.5}#content pre code{font-size:85%;line-height:1.45;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,"PingFang SC", "Microsoft YaHei",monospace}#content::before{display:table;content:""}#content::after{display:table;clear:both;content:""}#content>*:first-child{margin-top:0 !important}#content>*:last-child{margin-bottom:0 !important}#content a:not([href]){color:inherit;text-decoration:none}#content .absent{color:#cb2431}#content .anchor{float:left;padding-right:4px;margin-left:-20px;line-height:1}#content .anchor:focus{outline:none}#content p,#content blockquote,#content ul,#content ol,#content dl,#content table,#content pre{margin-top:0;margin-bottom:16px}#content hr{height:.25em;padding:0;margin:24px 0;background-color:#e1e4e8;border:0}#content blockquote{padding:0 1em;color:#6a737d;border-left:.25em solid #dfe2e5}#content blockquote>:first-child{margin-top:0}#content blockquote>:last-child{margin-bottom:0}#content kbd{display:inline-block;padding:3px 5px;font-size:11px;line-height:10px;color:#444d56;vertical-align:middle;background-color:#fafbfc;border:solid 1px #c6cbd1;border-bottom-color:#959da5;border-radius:3px;box-shadow:inset 0 -1px 0 #959da5}#content h1,#content h2,#content h3,#content h4,#content h5,#content h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}#content h1 .octicon-link,#content h2 .octicon-link,#content h3 .octicon-link,#content h4 .octicon-link,#content h5 .octicon-link,#content h6 .octicon-link{color:#1b1f23;vertical-align:middle;visibility:hidden}#content h1:hover .anchor,#content h2:hover .anchor,#content h3:hover .anchor,#content h4:hover .anchor,#content h5:hover .anchor,#content h6:hover .anchor{text-decoration:none}#content h1:hover .anchor .octicon-link,#content h2:hover .anchor .octicon-link,#content h3:hover .anchor .octicon-link,#content h4:hover .anchor .octicon-link,#content h5:hover .anchor .octicon-link,#content h6:hover .anchor .octicon-link{visibility:visible}#content h1 tt,#content h1 code,#content h2 tt,#content h2 code,#content h3 tt,#content h3 code,#content h4 tt,#content h4 code,#content h5 tt,#content h5 code,#content h6 tt,#content h6 code{font-size:inherit}#content h1{padding-bottom:.3em;font-size:2em;border-bottom:1px solid #eaecef}#content h2{padding-bottom:.3em;font-size:1.5em;border-bottom:1px solid #eaecef}#content h3{font-size:1.25em}#content h4{font-size:1em}#content h5{font-size:.875em}#content h6{font-size:.85em;color:#6a737d}#content ul,#content ol{padding-left:2em}#content ul.no-list,#content ol.no-list{padding:0;list-style-type:none}#content ul ul,#content ul ol,#content ol ol,#content ol ul{margin-top:0;margin-bottom:0}#content li>p{margin-top:16px}#content li+li{margin-top:.25em}#content dl{padding:0}#content dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:600}#content dl dd{padding:0 16px;margin-bottom:16px}#content table{display:block;width:100%;overflow:auto}#content table th{font-weight:600}#content table th,#content table td{padding:6px 13px;border:1px solid #dfe2e5}#content table tr{background-color:#fff;border-top:1px solid #c6cbd1}#content table tr:nth-child(2n){background-color:#f6f8fa}#content table img{background-color:transparent}#content img{max-width:100%;box-sizing:content-box;background-color:#fff}#content img[align=right]{padding-left:20px}#content img[align=left]{padding-right:20px}#content .emoji{max-width:none;vertical-align:text-top;background-color:transparent}#content span.frame{display:block;overflow:hidden}#content span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid #dfe2e5}#content span.frame span img{display:block;float:left}#content span.frame span span{display:block;padding:5px 0 0;clear:both;color:#24292e}#content span.align-center{display:block;overflow:hidden;clear:both}#content span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}#content span.align-center span img{margin:0 auto;text-align:center}#content span.align-right{display:block;overflow:hidden;clear:both}#content span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}#content span.align-right span img{margin:0;text-align:right}#content span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}#content span.float-left span{margin:13px 0 0}#content span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}#content span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}#content code,#content tt{padding:0;padding-top:.2em;padding-bottom:.2em;margin:0;font-size:85%;background-color:rgba(27,31,35,0.05);border-radius:3px}#content code::before,#content code::after,#content tt::before,#content tt::after{letter-spacing:-.2em;content:"\00a0"}#content code br,#content tt br{display:none}#content del code{text-decoration:inherit}#content pre{word-wrap:normal}#content pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0} | |
</style> | |
<script type="text/x-mathjax-config"> | |
MathJax.Hub.Config({ | |
showMathMenu: false, | |
showProcessingMessages: false, | |
messageStyle: "none", | |
tex2jax: { | |
inlineMath: [['$','$'], ['\\(','\\)']] | |
} | |
}); | |
</script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script> | |
</head> | |
<body> | |
<article id="hidden" style="display: none"> | |
<%= File.read(filename).strip %> | |
</article> | |
<div id="content"></div> | |
<script> | |
document.getElementById('content').innerHTML = | |
marked(document.getElementById('hidden').innerHTML); | |
</script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script> | |
<script>hljs.initHighlightingOnLoad();</script> | |
<script type="text/javascript" async | |
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML,Safe"> | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment