apicloudcom.github.io/md-preview.html at master · tomtam/apicloudcom.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html>

<!-- Mirrored from docs.apicloud.com/md-preview.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 27 May 2017 08:31:10 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Markdown Preview</title>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="bower_components/highlightjs/styles/solarized_light.css">
        <link rel="stylesheet" href="styles/raneto.css">
        <style type="text/css">
            #markdownwritearea{
                padding: 10px;
            }
            .content{padding: 20px;}
            .content .title{border-bottom: none;}
            .content pre code{
                background-color: transparent;
            }
            .main{
                overflow: hidden;
            }
            #type-area{
                float: left; width: 50%; padding-right: 10px;
            }
            #markdowntest{
                float: right; width: 50%; padding-left: 10px;
            }
            #markdownwritearea{
                margin: 0px; height: 400px; width: 100%;resize: none;
                margin-bottom: 10px;
            }
            button{
                padding: 6px 20px; display: inline-block; margin-right: 10px;
            }
            .tip{
                display: none;
                color: #F24F3A;
            }
        </style>
    </head>
    <body>
    <section class="content">
        <h1 class="title">Markdown 在线预览</h1>
        <div class="main">
            <div id="type-area">
                <textarea id="markdownwritearea"># Markdown preview in browser</textarea>
                <button id="markdowntestsubmit">预览</button>
                <button id="clear">清除</button>
                <button id="copy" data-clipboard-target="markdownwritearea">复制</button>
                <span class="tip">已复制到剪贴板</span>
            </div>
            <div id="markdowntest">
            </div>
        </div>
    </section>

    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/highlightjs/highlight.pack.js"></script>
    <script type="text/javascript" src="scripts/ZeroClipboard.min.js"></script>
    <script type="text/javascript" src="scripts/marked.min.js"></script>
    <script type="text/javascript">
        var markdowntest = document.getElementById('markdowntest');
        var markdownwritearea = document.getElementById('markdownwritearea');
        var markdowntestsubmit = document.getElementById('markdowntestsubmit');
        markdowntest.innerHTML = marked(markdownwritearea.value);
        var sendtest = function(){
            var text = markdownwritearea.value;
            markdowntest.innerHTML = marked(text);
        };
        $(markdowntestsubmit).on('click', function(){
            sendtest();
            hljs.initHighlighting();
        });
        $(markdownwritearea).on('input', sendtest);
        $('#copy').on('click',function(){
            markdownwritearea.select();
        });

        $('#clear').on('click',function(){
            $(markdownwritearea).val('');
            $(markdowntest).html('');
        });

        var client = new ZeroClipboard(document.getElementById('copy'));
        client.on( "ready", function( readyEvent ) {
            client.on( 'aftercopy', function(event) {
                $('.tip').hide().fadeIn();
            } );
        } );

    </script>

    </body>

<!-- Mirrored from docs.apicloud.com/md-preview.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 27 May 2017 08:31:10 GMT -->
</html>