print.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>分享</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link href="http://libs.useso.com/js/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" href="plugin/prism/prism.css">
        <style>
            html {
                color: #000;
                font-family: Helvetica, "Microsoft Yahei", sans-serif;
                font-size: 32px;
            }
            #slides>section:first-child {
                text-align: center;
            }
            #slides>section {
                box-sizing: border-box;
                padding: 0.5em 1em;
                max-width: 800px;
                margin: 3mm;
                width: 180mm;
                height: 125mm;
                //float: left;
                //border: 2px solid #555;
                //border: 0.5px solid #666;
                page-break-inside: avoid;
                overflow: hidden;
            }
            #slides>section:nth-child(odd) {
                //margin-left: 0;
                clear: left;
            }
            #slides>section:nth-child(even) {
                //margin-right: 0
            }
            #slides>section.active {
                display: block
            }
            h1, h2, h3 {
                font-family: "Microsoft JHenghei", sans-serif;
                text-align: center;
            }
            section>h1 {
                margin-top: 3em;
            }
            section>h2 {
                margin-top: 30%;
            }
            ul {
                padding-left: 1.5em;
            }
            li {
                margin: 0.8em 0;
            }
            h3+p {
                text-align: center;
            }
            h3:only-child {
                margin-top: 30%;
                text-align: center;
            }
            p:only-child {
                text-align: center;
            }
            li li {
                font-size: 80%;
            }
            img {
                max-width: 100%;
                max-height: 68mm;
            }
            img.dark {
                -webkit-filter: invert(1) contrast(1.5);
                -moz-filter: invert(1) contrast(1.5);
                filter: invert(1) contrast(1.5);
            }
            a {
                color: #000;
            }
            a:after {
                content: " (" attr(href) ")";
                word-wrap: break-word;
                word-break: break-all;
            }
            table {
                width: 100%!important;
                font-size: 80%;
            }
            pre code {
                white-space: wrap;
                word-wrap: break-word;
                font-size: 80%;
            }
        </style>
    </head>

    <body>
        <div id="slides"></div>
        <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
        <script src="plugin/markdown/marked.js"></script>
        <script>

        var slides = [];
        var index = 0;

        /**
         * translate markdown
         */
        function compileMarkdown(md) {
            return marked(md, {gfm:true});
        };

        /**
         * download slides
         */
        function getSlides(index) {
            var file = slides[index];
            var url = file.indexOf('/') > -1 ? file : ('content/' + file + '.md');
            $.get(url, function (md) {
                var mds = md.split(/-{3,10}/g);
                var html = '';
                mds.forEach(function(md){
                    html += '<section>' + compileMarkdown(md) + '</section>';
                });
                $('#slides').append(html);
                if (++index < slides.length) {
                    getSlides(index);
                }
            });
        }

        var match = /[?&]file=([\w\d-_\/~\.,]+)/.exec(location.search);
        if (!match) {
            alert('没有指定要演示的文档！');
        } else {
            var files = match[1];
            slides = files.split(',');
            getSlides(0);
        }

        </script>

    </body>
</html>