Add introductory text to demo, default all links to target=_blank.

This commit is contained in:
David Anson 2015-05-07 09:15:41 -07:00
parent 8aa3ee66e4
commit 661073b249
4 changed files with 58 additions and 3 deletions

View file

@ -6,6 +6,27 @@ body {
font-family: "Segoe UI", GillSans, Helvetica, sans-serif; font-family: "Segoe UI", GillSans, Helvetica, sans-serif;
font-weight: lighter; font-weight: lighter;
} }
blockquote {
background: rgba(0, 0, 0, 0.05);
}
h1 {
font-size: 130%;
}
h2 {
font-size: 125%;
}
h3 {
font-size: 120%;
}
h4 {
font-size: 115%;
}
h5 {
font-size: 110%;
}
h6 {
font-size: 105%;
}
header { header {
font-size: 140%; font-size: 140%;
font-weight: bold; font-weight: bold;
@ -50,6 +71,7 @@ textarea {
.outlined { .outlined {
border: 1px solid black; border: 1px solid black;
margin: 2px; margin: 2px;
padding-left: 3px;
} }
.overflow-auto-scroll { .overflow-auto-scroll {
overflow-x: auto; overflow-x: auto;

View file

@ -6,6 +6,7 @@
<link rel="shortcut icon" href="favicon.ico"/> <link rel="shortcut icon" href="favicon.ico"/>
<meta name="description" content="Demo for markdownlint, a Node.js style checker and lint tool for Markdown files."/> <meta name="description" content="Demo for markdownlint, a Node.js style checker and lint tool for Markdown files."/>
<title>markdownlint demo</title> <title>markdownlint demo</title>
<base target="_blank"/>
</head> </head>
<body> <body>
<div class="flex-rows"> <div class="flex-rows">

View file

@ -35,6 +35,9 @@
var options = { var options = {
"strings": { "strings": {
"content": content "content": content
},
"config": {
"MD013": false
} }
}; };
var results = window.markdownlint.sync(options).toString(); var results = window.markdownlint.sync(options).toString();
@ -44,8 +47,8 @@
function replacer(match, p1, p2, p3) { function replacer(match, p1, p2, p3) {
var ruleRef = rulesMd + "#" + p2.toLowerCase() + "---" + var ruleRef = rulesMd + "#" + p2.toLowerCase() + "---" +
p3.toLowerCase().replace(/ /g, "-"); p3.toLowerCase().replace(/ /g, "-");
return "&nbsp;<a href='#" + p1 + "'><em>" + p1 + "</em></a> - " + return "<a href='#" + p1 + "'><em>" + p1 + "</em></a> - " +
"<a href='" + ruleRef + "' target='_blank'>" + p2 + "</a> " + p3; "<a href='" + ruleRef + "'>" + p2 + "</a> " + p3;
}); });
}).join("<br/>"); }).join("<br/>");
} }
@ -110,4 +113,33 @@
openFile.addEventListener("change", onOpenFileChange); openFile.addEventListener("change", onOpenFileChange);
markdown.addEventListener("input", onMarkdownInput); markdown.addEventListener("input", onMarkdownInput);
violations.addEventListener("click", onLineNumberClick, true); violations.addEventListener("click", onLineNumberClick, true);
/*eslint-disable max-len */
markdown.value = [
"## Introduction",
"",
"`markdownlint` is a [Node.js](https://nodejs.org/)/[io.js](https://iojs.org/) style checker and lint tool for [Markdown](http://en.wikipedia.org/wiki/Markdown) files to automatically validate content, prevent rendering problems, and promote consistency.",
"This page offers an easy way to try it out interactively!",
"",
"#### Instructions",
"",
"Type or paste `Markdown ` content in the upper-left box, drag-and-drop a file, or open one with the chooser at the top.",
"Content gets parsed and displayed in the upper-right box; rule violations (if any) show up in the lower-right box.",
"Click a violation for information about it or click its line number to highlighted it in the lower-left box.",
"",
"> *Note*: [All rules](https://github.com/DavidAnson/markdownlint/blob/master/doc/Rules.md) are enabled except for [MD013 Line length](https://github.com/DavidAnson/markdownlint/blob/master/doc/Rules.md#md013---line-length). ",
"",
"",
"#### Resources",
"* [`markdownlint` on GitHub](https://github.com/DavidAnson/markdownlint)",
"* [`markdownlint` on npm](https://www.npmjs.com/package/markdownlint)",
"* [Markdown specification](http://daringfireball.net/projects/markdown/)",
"*\t[CommonMark specification](http://commonmark.org/)",
"",
"#### Thanks",
"",
"[`markdownlint/Ruby`](https://github.com/mivok/markdownlint) for the inspiration and [`markdown-it`](https://github.com/markdown-it/markdown-it) for the parser and interactive demo idea!"
].join("\n");
/*eslint-enable max-len */
onMarkdownInput();
}()); }());

View file

@ -15,7 +15,7 @@
"test": "nodeunit", "test": "nodeunit",
"test-cover": "istanbul cover node_modules/nodeunit/bin/nodeunit", "test-cover": "istanbul cover node_modules/nodeunit/bin/nodeunit",
"debug": "node debug node_modules/nodeunit/bin/nodeunit", "debug": "node debug node_modules/nodeunit/bin/nodeunit",
"lint": "eslint lib test & eslint --env browser --global markdownit --global markdownlint --rule \"no-unused-vars: 0, no-extend-native: 0\" demo & eslint --rule \"no-console: 0, no-shadow: 0\" example", "lint": "eslint lib test & eslint --env browser --global markdownit --global markdownlint --rule \"no-unused-vars: 0, no-extend-native: 0, max-statements: 0\" demo & eslint --rule \"no-console: 0, no-shadow: 0\" example",
"build-demo": "copy node_modules\\markdown-it\\dist\\markdown-it.min.js demo & browserify lib/markdownlint.js --standalone markdownlint --exclude markdown-it --outfile demo/markdownlint-browser.js", "build-demo": "copy node_modules\\markdown-it\\dist\\markdown-it.min.js demo & browserify lib/markdownlint.js --standalone markdownlint --exclude markdown-it --outfile demo/markdownlint-browser.js",
"example": "npm install through2 & cd example & node standalone.js & grunt markdownlint & gulp markdownlint" "example": "npm install through2 & cd example & node standalone.js & grunt markdownlint & gulp markdownlint"
}, },