-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
222 lines (183 loc) · 10.6 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
216
217
218
219
220
221
222
<!doctype html>
<html>
<head>
<title>marky-markdown tester</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/g/[email protected],[email protected](styles/tomorrow.min.css)">
<link rel="stylesheet" href="app.css">
</head>
<body>
<header>
<h1>marky-markdown tester</h1>
<form id="options" action="#">
<label>version:
<select id="version">
<option value="11.2.0">11.2.0</option>
<option value="11.0.0">11.0.0</option>
<option value="10.1.4">10.1.4</option>
<option value="10.1.3">10.1.3</option>
<option value="10.0.1">10.0.1</option>
<option value="9.0.1">9.0.1</option>
<option value="9.0.0">9.0.0</option>
</select>
</label>
<label><input type="checkbox" id="sanitize" checked> sanitize</label>
<label><input type="checkbox" id="linkify" checked> linkify</label>
<label><input type="checkbox" id="highlightSyntax" checked> highlightSyntax</label>
<label><input type="checkbox" id="prefixHeadingIds" checked> prefixHeadingIds</label>
<label><input type="checkbox" id="enableHeadingLinkIcons" checked> enableHeadingLinkIcons</label>
<label><input type="checkbox" id="serveImagesWithCDN"> serveImagesWithCDN</label>
<!-- debug option is only really useful on the command line -->
<!-- <label><input type="checkbox" data-option="debug"> debug</label> -->
<label><input type="checkbox" id="package"> package <input type="text" id="packageContents"></label>
</form>
<div id="editor-controls">
<button id="clear-editor">Clear editor</button>
</div>
<form id="output-controls" action="#">
<input type="radio" name="outputType" value="html" id="htmlView" checked><label for="htmlView">HTML</label>
<input type="radio" name="outputType" value="source" id="sourceView"><label for="sourceView">Source</label>
<input type="radio" name="outputType" value="debug" id="debugView"><label for="debugView">Debug</label>
</form>
</header>
<section id="main">
<section id="editor-container"><textarea id="editor">
# marky-markdown
`marky-markdown` is a markdown parser, written in NodeJS, that aims for
parity with [GitHub-style markdown]. It is built on top of [`markdown-it`],
a [CommonMark] markdown parser. You can use marky-markdown:
- [programmatically in NodeJS]
- [in your terminal]
- [in the browser] *does not yet support syntax highlighting
`marky-markdown` is the thing that parses package READMEs on
http://www.npmjs.com. If you see a markdown parsing bug there,
[file an issue here]!
[file an issue here]: https://github.com/npm/marky-markdown/issues
[GitHub-style markdown]: https://help.github.com/articles/basic-writing-and-formatting-syntax/
[CommonMark]: http://spec.commonmark.org/
[`markdown-it`]: https://github.com/markdown-it/markdown-it
[programmatically in NodeJS]: #programmatic-usage
[in your terminal]: #command-line-usage
[in the browser]: #in-the-browser
## Node Version Support
marky-markdown strives to support all LTS, current, and maintenance
versions of Node.js. When a version of Node.js is EOL, we will EOL
support for that version for marky-markdown.
For more information on Node.js LTS and support, click [here](https://github.com/nodejs/LTS).
- marky-markdown < `9.0.0` supports `0.10`, `0.12`, `iojs`, `4`, `5`
- marky-markdown >= `9.0.0` supports `0.12`, `4`, `6`
## Installation
```sh
npm install marky-markdown --save
```
## Programmatic Usage
marky-markdown exports a single function. For basic use, that function
takes a single argument: a string to convert.
```js
var marky = require("marky-markdown")
var html = marky("# hello, I'm markdown")
```
### Options
The exported function takes an optional options object
as its second argument:
```js
marky("some trusted string", {sanitize: false})
```
The default options are as follows:
```js
{
sanitize: true, // remove script tags and stuff
linkify: true, // turn orphan URLs into hyperlinks
highlightSyntax: true, // run highlights on fenced code blocks
prefixHeadingIds: true, // prevent DOM id collisions
enableHeadingLinkIcons: true, // render icons inside generated section links
serveImagesWithCDN: false, // use npm's CDN to proxy images over HTTPS
debug: false, // console.log() all the things
package: null // npm package metadata
}
```
## Command-line Usage
You can use marky-markdown to parse markdown files in the shell.
The easiest way to do this is to install globally:
```
npm i -g marky-markdown
marky-markdown some.md > some.html
```
## In the Browser
This module mostly works in the browser, with the exception of the `highlights` module.
You can `require('marky-markdown')` in scripts you browserify yourself,
or just use the standalone file in [dist/marky-markdown.js].
Note: Usage with [webpack](https://webpack.github.io/) requires that your
`webpack.config.js` configure a loader (such as
[json-loader](https://github.com/webpack/json-loader)) for .json files.
## Tests
```sh
npm install
npm test
```
## What it does
- Parses markdown with [markdown-it](https://github.com/markdown-it/markdown-it), a fast and [commonmark-compliant](http://commonmark.org/) parser.
- Removes broken and malicious user input with [sanitize-html](https://www.npmjs.com/package/sanitize-html)
- Applies syntax highlighting to [GitHub-flavored code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) using the [highlights](https://www.npmjs.com/package/highlights) library from [Atom](https://atom.io/).
- Converts `:emoji:`-style [shortcuts](http://www.emoji-cheat-sheet.com/) to unicode emojis.
- Converts headings (h1, h2, etc) into anchored hyperlinks.
- Converts relative GitHub links to their absolute equivalents.
- Converts relative GitHub images sources to their GitHub raw equivalents.
- Converts insecure Gravatar URLs to HTTPS.
- Converts list items with leading `[ ]` and `[x]` into [GitHub-style task lists](https://github.com/blog/1825-task-lists-in-all-markdown-documents)
- Wraps embedded YouTube videos so they can be styled.
- Parses and sanitizes `package.description` as markdown.
- Applies CSS classes to redundant content that closely matches npm package name and description.
- Applies CSS classes to badge images, so we can do something interesting with them one day.
### npm packages
Pass in an npm `package` object to do stuff like rewriting relative URLs
to their absolute equivalent on GitHub, normalizing package metadata
with redundant readme content, etc
```js
var package = {
name: "foo",
description: "foo is a thing",
repository: {
type: "git",
url: "https://github.com/kung/foo"
}
}
marky(
"# hello, I am the foo readme",
{package: package}
)
```
## Dependencies
- [github-slugger](https://github.com/Flet/github-slugger): Generate a slug just like GitHub does for markdown headings
- [github-url-to-object](https://github.com/zeke/github-url-to-object): Extract user, repo, and other interesting properties from GitHub URLs
- [highlights](https://github.com/atom/highlights): Syntax highlighter
- [highlights-tokens](https://github.com/zeke/highlights-tokens): A list of the language tokens used by the Atom.app [highlights](https://www.npmjs.com/package/highlights) syntax highlighter
- [innertext](https://github.com/revin/innertext): Extract the `innerText` from a snippet of HTML
- [is-badge](https://github.com/wooorm/is-badge): Check if a URL is a badge
- [lodash](https://github.com/lodash/lodash): A utility library delivering consistency, customization, performance, & extras.
- [markdown-it](https://github.com/markdown-it/markdown-it): Markdown-it - modern pluggable markdown parser.
- [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji): Markdown-it-emoji extension for Markdown-it that parses markdown emoji syntax to unicode.
- [markdown-it-expand-tabs](https://github.com/revin/markdown-it-expand-tabs): Replace leading tabs with spaces in fenced code blocks
- [markdown-it-lazy-headers](https://github.com/Galadirith/markdown-it-lazy-headers): Lazy ATX headers plugin for markdown-it
- [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists): Render GitHub-style [task lists](https://github.com/blog/1375-task-lists-in-gfm-issues-pulls-comments)
- [property-ttl](https://github.com/soldair/property-ttl): Save memory by nulling out a property after ttl if it has not been accessed
- [sanitize-html](https://github.com/punkave/sanitize-html): Clean up user-submitted HTML, preserving whitelisted elements and whitelisted attributes on a per-element basis
- [similarity](https://github.com/zeke/similarity): How similar are these two strings?
Extra syntax highlighting, in addition to what comes with [highlights](https://www.npmjs.com/package/highlights):
- [atom-language-diff](https://github.com/revin/atom-language-diff): Diff/patch files
- [atom-language-nginx](https://github.com/hnagato/atom-language-nginx): [NGINX](http://nginx.org/) configuration files
- [language-dart](https://github.com/Daegalus/atom-language-dart): [Dart](https://www.dartlang.org/) language
- [language-erlang](https://github.com/jonathanmarvens/atom-language-erlang): [Erlang](http://www.erlang.org/) language
- [language-glsl](https://github.com/hughsk/language-glsl): [OpenGL Shading Language](https://www.opengl.org/documentation/glsl/) files
- [language-haxe](https://github.com/theRemix/language-haxe): [Haxe](http://haxe.org/) language
- [language-ini](https://github.com/jacobbednarz/atom-language-ini): .ini configuration files
- [language-rust](https://github.com/zargony/atom-language-rust): [Rust](http://www.rust-lang.org/) language
- [language-stylus](https://github.com/matthojo/language-stylus): [Stylus](http://stylus-lang.com/) CSS preprocessor
## License
ISC
</textarea></section>
<section id="output-container"><section id="output" class="markdown-body"></section></section>
</section>
<script src="https://cdn.jsdelivr.net/g/[email protected](highlight.min.js+languages/nginx.min.js+languages/diff.min.js+languages/dart.min.js+languages/erlang.min.js+languages/rust.min.js+languages/glsl.min.js+languages/haxe.min.js+languages/ini.min.js+languages/stylus.min.js+languages/bash.min.js+languages/markdown.min.js+languages/erb.min.js+languages/clojure.min.js+languages/cpp.min.js+languages/css.min.js+languages/go.min.js+languages/java.min.js+languages/javascript.min.js+languages/json.min.js+languages/less.min.js+languages/makefile.min.js+languages/perl.min.js+languages/php.min.js+languages/python.min.js+languages/ruby.min.js+languages/scss.min.js+languages/sql.min.js+languages/xml.min.js+languages/yaml.min.js),[email protected](min/ace.js+min/mode-markdown.js+min/theme-tomorrow.js)"></script>
<script src="app.js"></script>
</body>
</html>