-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
215 lines (173 loc) · 8.96 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A simple, open-source applet that makes it easy to print and view markdown and while easing the eyes with appealing typography.">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Markdown, Humanized — A Pleasant Way to Print + View Markdown</title>
<!-- <link rel="stylesheet" href="css/vendor/typeplate.css">-->
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.png">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Alegreya:400,400i,700,700i">
</head>
<body>
<div class="container">
<header class="site-header ui">
<!-- <a href="http://markdowner.github.io" class="unstyled-anchor">-->
<!-- <h1 class="beta title">Markdown<br>-->
<img src="img/logo2.png" alt="Markdown Humanized Logo"><br>
<!-- Humanized</h1>-->
<!-- </a>--><br>
<h3 class="subtitle"><em>A Pleasant Way to Print <span class="amp">&</span> View <a href="#modal-markdown" class="call-modal" title="Learn what Markdown is and its basic syntax">Markdown</a></em> </h3>
<hr style="margin-top: 40px;"><br><br>
</header>
<div class="content" id="content">
<iframe name="myiframe" style="display: none;"></iframe>
<form action="#" onsubmit="markdownHumanize(); return false" target="myiframe">
<textarea class="content-input" id="content-input" placeholder="Paste your text here." required></textarea><br clear="all">
<div class="settings-bar">
<label class="custom-select">I’m writing for:
<select name="tone" id="tone-select">
<option value="classy">Typographers</option>
<option value="everyday">Regular People</option>
<option value="academic">Scholars</option>
<option value="jolly">Children</option>
<option value="hipster">Hipsters</option>
</select>
</label>
<button class="submit-button humanize-button" type="submit" style="margin-bottom: 20px;">Humanize »</button>
</div>
</form>
</div> <!-- END CONTENT -->
<br clear="all">
<footer class="site-footer ui attribution">
<hr class="plain" style="margin-bottom:0;margin-top:0px;">
<p class="ti0" style="margin-top: 10px;"><a href="#modal-about" class="call-modal" title="Learn more about this site">about this site</a> •
<a href="#modal-markdown" class="call-modal" title="Learn what Markdown is and its basic syntax">markdown reference</a></p>
<div class="share-button" style="margin: 0 auto;"></div><br>
<p><em>Built with ☕ by <a href="https://www.curiositry.com">curiositry </a> ( <a href="http://twitter.com/curiositry">@curiositry</a> on Twitter).</p><p><a href="https://www.autodidacts.io/#/portal/support">Buy me a coffee</a></p><p style="text-indent:0;"> Handsome typography made possible by <a href="http://typeplate.com">Typeplate</a> <span class="amp">&</span> <a href="http://brick.im">Brick Webfonts.</a></em></p>
</footer>
</div> <!-- END CONTAINER -->
<!-- A modal with its content -->
<section class="semantic-content" id="modal-about"
tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="modal-label">About</h2>
</header>
<div class="modal-content" style="font-size:.8em;">
<p>This site is an afternoon hack created to fill a need of my own: <strong>the ability to print and view Markdown in a appealing and typographically tasteful manner.</strong> </p>
<h3>current features include:</h3>
<ul>
<li>• Instantly parse markdown into a pleasant reading experience.</li>
<li>• Multiple typography presets to fit with different tones of document.</li>
<li>• Mathematics rendering from TEX or MathML code using MathJax</li>
<li>• Easily print or download a .PDF of your document</li>
<li>• Your document never leaves you computer; it’s 100% client side.</li>
</ul><br>
<p>I am continuing to improve the site; checkout the TODO file on github to see where it’s headed, or submit a pull request. </p>
</div>
<footer>
<div style="margin-top: 15px;text-align: center;"><div class="share-button-2 m0a"></div><br><em >Want to help out? Tell your friends about this site!</em></div>
</footer>
</div>
<!-- Use Hash-Bang to maintain scroll position when closing modal -->
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal">×</a>
</section>
<!-- Markdown cheatsheet -->
<section class="semantic-content" id="modal-markdown"
tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-inner">
<header>
<h2 id="modal-label">Markdown Cheatsheet</h2>
</header>
<div class="modal-content" style="font-size:.8em;">
<span>Markdown:</span><br>
<pre>*This text will be italic*</pre>
<span>Output:</span><br>
<em>This text will be italic</em>
<br><br>
<pre>**This text will be bold**</pre>
<strong>This text will be bold</strong>
<br><br>
<pre>[Link Text](http://example.com)</pre>
<a href="http://example.com">Link Text</a>
<br><br>
<pre>
>This is a large blockquote from another author, and it will be indented. You will need to put a right angle bracket at the start of each paragraph.
>Like this. Here is another paragraph in the blockquote.
</pre><br>
<blockquote>
<p>
This is a large blockquote from another author, and it will be indented. You will need to put a right angle bracket at the start of each paragraph.</p>
</blockquote>
<pre>A horizontal rule:
--------------</pre><br>
A horizontal rule:
<hr>
<br><br>
<pre></pre>
<img src="http://markdowner.github.io/img/markdown-humanized-2.png" alt="Alt Text">
<br><br>
<pre>Tex Math: $$\Delta p \Delta x \geq {h \over 4 \pi}$$ </pre>
Tex Math:<br>
<img src="img/math-sample.png" width="200px" alt="Math sample"><br><br>
If you want a literal asterisk, underscore, or any other character that is used in markdown, put a backslash before it:<br><br>
<pre>\*This will not be italic\*</pre>
*This will not be italic*
</div>
<footer>
<div style="margin-top: 15px;text-align: center;"><a href="http://wikipedia.org/wiki/Markdown">Markdown</a> is a plain-text markup language with simple syntax that you can learn in minutes. Because of its <a href="http://brettterpstra.com/2011/08/31/why-markdown-a-two-minute-explanation/">many</a> <a href="http://lifehacker.com/5943320/what-is-markdown-and-why-is-it-better-for-my-to-do-lists-and-notes"> advantages</a>, it is widely used by writers and bloggers.</div>
</footer>
</div>
<a href="#!" class="modal-close" title="Close this modal"
data-dismiss="modal">×</a>
</section>
<a href="https://github.com/markdowner/markdowner.github.io" class="ui github-ribbon">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
<script async type="text/javascript" src="js/vendor/marked.min.js"></script>
<script async type="text/javascript" src="js/humanize.js"></script>
<script>
var config = {
url: "http://markdowner.github.io",
title: "Markdown, Humanized",
text: "A Pleasant Way to Print & View Markdown" ,
image: "http://markdowner.github.io/img/markdown-humanized.png",
networks: {
google_plus: {
enabled: true,
},
twitter: {
enabled: true,
description: "Markdown, Humanized: A pleasant way to print & view markdown — via @curiositry . ",
},
facebook: {
enabled: true,
},
pinterest: {
enabled: true,
},
email: {
enabled: true,
title: "Markdown, Humanized: a pleasant way to print & view markdown",
description: "I ran across this neat open-source applet and thought you might be interested: http://markdowner.github.io",
}
}
}
var share = new Share(".share-button", config);
var share2 = new Share(".share-button-2", config);
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-51283399-1', 'markdowner.github.io');
ga('send', 'pageview');
</script>
</body>
</html>