-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
146 lines (142 loc) · 5.06 KB
/
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
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE HTML>
<html>
<head>
<title>Marky Marked</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./dist/marky-marked.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400Italic,700,700Italic' rel='stylesheet' type='text/css'>
<style>
body {
font-size: 1rem;
font-family: Open Sans, sans-serif;
margin: 50px auto 50px auto;
max-width: 1200px;
}
.markdown-container .container:nth-child(2) {
margin-top: 20px;
}
.container {
box-sizing: border-box;
width: 100%;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
}
.html-container {
box-sizing: border-box;
width: 100%;
height: auto;
padding-top: 3rem;
padding-left: 10px;
padding-right: 10px;
margin-left: auto;
margin-right: auto;
clear: both;
}
h1.heading {
font-size: 2rem;
font-family: Cardo, serif;
margin-left: 20px;
}
h1.heading a {
margin-left: 2rem;
color: #DA70D6;
}
h1.heading a:focus,
h1.heading a:hover {
color: #00B0FF;
outline: none;
border: none;
}
h2.heading {
font-size: 1.5rem;
font-family: Cardo, serif;
margin-left: 20px;
}
textarea.marky-editor {
box-sizing: border-box;
width: 100%;
height: 250px;
font-family: inherit;
line-height: 18px;
}
#output {
box-sizing: border-box;
height: 300px;
border: 1px solid #919191;
padding: 0.7rem;
overflow: scroll;
}
#html-output {
box-sizing: border-box;
border: 1px solid #919191;
min-height: 500px;
padding: 2rem;
box-shadow: rgba(0,0,0,0.3) 0 19px 60px,rgba(0,0,0,0.22) 0 15px 20px;
}
blockquote {
color: gray;
background-color: #ededed;
border-left: 5px solid gray;
padding-left: 10px;
}
code {
font-style: normal;
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
}
@media all and (min-width: 768px) {
textarea.marky-editor,
#output {
width: 100%;
}
h1.heading {
font-size: 2.5rem;
}
}
@media all and (min-width: 1150px) {
.container {
width: 49.8%;
float: left;
}
}
</style>
</head>
<body>
<div class="markdown-container">
<div class="container">
<h1 class="heading">Marky Marked<a href="https://github.com/patrickfatrick/marky-marked" target="_blank"><i class="fa fa-github-alt"></i></a></h1>
<marky-mark></marky-mark>
</div>
<div class="container">
<h2 class="heading">Markdown => HTML</h2>
<div id="output"></div>
</div>
</div>
<div class="html-container">
<h2 class="heading">HTML => Rendered page</h2>
<div id="html-output"></div>
</div>
<script src="./dist/marky-marked.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var markyMarked = markymark(document.querySelector('marky-mark'))
var editor = document.querySelector('textarea.marky-editor')
var htmlOutput = document.getElementById('html-output')
markyMarked.on('markychange', function () {
document.getElementById('output').textContent = markyMarked.html
htmlOutput.innerHTML = ''
htmlOutput.insertAdjacentHTML('afterbegin', markyMarked.html)
})
editor.value = '# Marky Marked\r\n\n_A `<textarea>` so sweet you\'ll be feeling good vibrations._\r\n\nMarky Marked is a _lightweight_ (less than 15KB minified and gzipped) in-browser content editor combining the point-and-click accessibility of a WYSIWYG editor with the simplicity and power of Markdown syntax. Supported in all modern desktop browsers as well as IE11.\r\n\nIts dependencies are:\r\n\n- [marked](https://github.com/chjj/marked), which handles the heavylifting for the Markdown parsing.\r\n- [contra/emitter](https://github.com/bevacqua/contra#λemitterthing-options)\r\n- [harsh](https://github.com/patrickfatrick/harsh)\r\n- Optional: [Font Awesome](http://fontawesome.io/), unless you want to roll your own icons.\r\n\nMarky Marked is designed with the concept of immutable data in mind, so instead of having a state constantly overwriting itself, Marky Marked has persistent state management allowing for things like undo/redo by simply recalling the state at any given point.\r\n\n## Installation\r\n\nYou can install Marky Marked in the following ways:\r\n\n```\r\nnpm install marky-marked --save\r\njspm install npm:marky-marked\r\nbower install marky-marked\r\ngit clone git:github.com/patrickfatrick/marky-marked.git\r\n```\r\n\nFeel free to interact with this page by typing into or changing the contents of the Marky Marked editor in the top left, or start fresh by hitting the undo button. Enjoy!\r\n\n> Marky Marked was made by Patrick Fricano and you can find the repo [here](https://github.com/patrickfatrick/marky-marked), which has more information about usage.'
editor.setSelectionRange(0, 0)
markyMarked.emit('markyupdate')
})
</script>
</body>
</html>