/
unminified-index.html
134 lines (133 loc) · 6.5 KB
/
unminified-index.html
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="icon" type="image/png" href="md-16x16.png" sizes="16x16"> -->
<link rel="shortcut icon" href="favicon.ico" />
<title>Online Markdown to HTML Demo</title>
<link href="css/foundation/foundation.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome-4.5.0/font-awesome.min.css">
<link rel="stylesheet" href="css/filetree.min.css">
<link rel="stylesheet" href="css/style.min.css">
<!--<link type="text/css" rel="stylesheet" href="../../../libs/syntax_highlighter/css/shCoreDefault.css"/>-->
<!--<link type="text/css" rel="stylesheet" href="../../../libs/syntax_highlighter/css/shCoreMidnight.css"/>-->
<!--<link type="text/css" rel="stylesheet" href="../../../libs/syntax_highlighter/css/shCoreMDUltra.css"/>-->
<!--<link type="text/css" rel="stylesheet" href="../../../libs/syntax_highlighter/css/shCoreEmacs.css"/>-->
<!--<link type="text/css" rel="stylesheet" href="../../../libs/syntax_highlighter/css/shCoreFadeToGrey.css"/>-->
<!--<link type="text/css" rel="stylesheet" href="../../../libs/syntax_highlighter/css/shCoreDjango.css"/>-->
<link type="text/css" rel="stylesheet" href="../../../libs/syntax_highlighter/css/shCoreEclipse.css"/>
<style>
.page-container{
margin:20px;}
.tight{
margin:0 3px 3px 0px;}
.tiny{
text-transform: uppercase;}
.rendered h3{
color: #777;}
.btn-readme, .links{
float: right;
}
.button-clear{
background: #0d5280;
}
#plain_html{
margin-top: 58px;
}
.down-arrow, .up-arrow{
cursor: pointer;
}
.down-arrow::before{
content: '⇓'; /* ⇓ ⇓ ⇓ ⇓ ⇓ */
}
.up-arrow::before{
content: '⇑'; /* ⇑ ⇑ ⇑ ⇑ ⇑ */
}
</style>
</head>
<body>
<div class="page-container">
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<div class="header">
<h1 class="text-center">Markdown to HTML Converter</h1>
<h4 class="text-center">See me on <a href="https://github.com/csengstrom/md2html-online">GitHub</a> and <a href="http://codebehold.com">codebehold.com</a></h4>
<div class="row">
<div class="large-8 medium-12 small-12 columns">
<div class="row">
<div class="small-12 columns">
<div class="tight">Insert Example Markdown (Blue Buttons), paste, or author below</div>
<button id="btn_headings" type="button" class="tiny button tight">headings</button>
<button id="btn_ul" type="button" class="tiny button tight">list</button>
<button id="btn_code" type="button" class="tiny button tight">code</button>
<button id="btn_md_all" type="button" class="tiny button tight">combined</button>
<button id="btn_filetree" type="button" class="tiny button tight">filetree</button>
<button id="btn_cheatsheet" type="button" class="tiny button tight secondary">cheatsheet (new page)</button>
<button id="btn_readme" type="button" class="tiny button tight alert btn-readme">README.md</button>
</div>
</div>
<textarea name="plain" id="plain_text" cols="115" rows="12" placeholder="Enter or paste markdown text here."></textarea>
<button id="btn_convert" type="button" class="small button">CONVERT</button>
<button id="btn_clear" type="button" class="small button button-clear">Clear</button>
<span class="links">
<i class="fa fa-github fa-lg"></i> <a href="https://github.com/csengstrom/md2html-online">GitHub</a>
|
<i class="fa fa-wordpress fa-1"></i> <a href="http://codebehold.com/2016/02/19/markdown-to-html/">Blog</a>
</span>
</div>
<div class="large-4 medium-12 small-12 columns">
<textarea name="plain" id="plain_html" cols="115" rows="12" placeholder="Text converted from markdown to HTML will appear here."></textarea>
<button id="btn_copy_to_clipboard" type="button" class="clip-btn small button" data-clipboard-target="#plain_html" data-clipboard-action="copy">Cut to Clipboard</button>
<span class="copy-status"></span>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="small-8 columns">
<h3>Rendered HTML <span id="expand-contract_arrow" class="down-arrow" alt="roll up/down top section"></span></h3>
</div>
<div class="small-4 columns rendered">
<select id="font_selector" class="custom-select">
<option selected>Font Selection</option>
<option value="1">Arial</option>
<option value="2">Arial Narrow</option>
<option value="3">Verdana</option>
<option value="4">Trebuchet</option>
<option value="5">Tahoma</option>
<option value="6">Times New Roman</option>
<option value="7">Palatino</option>
<option value="8">Georgia</option>
<option value="9">Courier New</option>
<option value="9">Lucida Sans</option>
</select>
</div>
</div>
<div class="row">
<div class="large-12 columns rendered">
<div id="rendered_content"></div>
</div>
</div>
<div id="test"></div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
</div> <!--end page-container-->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!--<script src="js/jquery/jquery.min.js"></script>-->
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<!--<script type="text/javascript" src="../../../libs/syntax_highlighter/js/shCore.js"></script>-->
<!--<script type="text/javascript" src="../../../libs/syntax_highlighter/js/shBrushJScript.js"></script>-->
<!--<script type="text/javascript" src="../../../libs/syntax_highlighter/js/shBrushCss.js"></script>-->
<!--<script type="text/javascript" src="../../../libs/syntax_highlighter/js/shBrushXml.js"></script>-->
<!--<script type="text/javascript" src="../../../libs/syntax_highlighter/js/shBrushBash.js"></script>-->
<!--<script type="text/javascript" src="../../../libs/syntax_highlighter/js/shBrushCpp.js"></script>-->
<!--<script type="text/javascript" src="../../../libs/syntax_highlighter/js/shBrushCSharp.js"></script>-->
<!--<script type="text/javascript" src="../../../libs/syntax_highlighter/js/shBrushDiff.js"></script>-->
<!--<script type="text/javascript" src="../../../libs/syntax_highlighter/js/shBrushJava.js"></script>-->
<!--<script type="text/javascript" src="../../../libs/syntax_highlighter/js/shBrushSass.js"></script>-->
<!--<script src="js/foundation.foundation.js"></script>-->
<!--<script src="js/clipboard.min.js"></script>-->
<!--<script src="js/file-drop/jQuery.FileDrop.all.js"></script>-->
<!--<script src="js/marked-lib/marked.js"></script>-->
<script src="js/app.min.js"></script>
</body>
</html>