mirror of
https://github.com/DavidAnson/markdownlint.git
synced 2025-09-22 05:40:48 +02:00
Add interactive demo page to show how markdownlint handles user content.
This commit is contained in:
David Anson
parent
43f28b90c1
commit
dce6024e16
7 changed files with 178 additions and 1 deletions
1
.eslintignore
Normal file
1
.eslintignore
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
demo/markdownlint-browser.js
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,3 +1,4 @@
|
||||||
coverage
|
coverage
|
||||||
|
demo/markdownlint-browser.js
|
||||||
node_modules
|
node_modules
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
|
|
|
||||||
45
demo/default.css
Normal file
45
demo/default.css
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
font-family: "Segoe UI", GillSans, Helvetica, sans-serif;
|
||||||
|
font-weight: lighter;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
font-size: 140%;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
font-size: 90%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
padding: 0;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
.flex-rows {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.flex-columns {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.flex-fill {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-basis: 0;
|
||||||
|
}
|
||||||
|
.inset {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
.outlined {
|
||||||
|
border: 1px solid black;
|
||||||
|
margin: 1px;
|
||||||
|
}
|
||||||
|
.overflow-auto-scroll {
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
35
demo/default.htm
Normal file
35
demo/default.htm
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<link href="default.css" rel="stylesheet" type="text/css"/>
|
||||||
|
<meta name="description" content="Demo for markdownlint, a Node.js style checker and lint tool for Markdown files."/>
|
||||||
|
<title>markdownlint demo</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="flex-rows inset">
|
||||||
|
<div class="flex-columns">
|
||||||
|
<header>markdownlint demo</header>
|
||||||
|
<div class="flex-fill"></div>
|
||||||
|
<form>
|
||||||
|
<input id="openFile" type="file"/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="flex-fill flex-columns">
|
||||||
|
<textarea id="markdown" class="flex-fill outlined" autofocus="autofocus"></textarea>
|
||||||
|
<div id="markup" class="flex-fill outlined overflow-auto-scroll"></div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-fill flex-columns">
|
||||||
|
<div id="numbered" class="flex-fill outlined overflow-auto-scroll"></div>
|
||||||
|
<div id="violations" class="flex-fill outlined overflow-auto-scroll"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<footer>Copyright © 2015 by <a href="//dlaa.me/">David Anson</a></footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="../node_modules/markdown-it/dist/markdown-it.min.js"></script>
|
||||||
|
<script src="require-stub.js"></script>
|
||||||
|
<script src="markdownlint-browser.js"></script>
|
||||||
|
<script src="default.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
85
demo/default.js
Normal file
85
demo/default.js
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
(function main() {
|
||||||
|
// DOM elements
|
||||||
|
var markdown = document.getElementById("markdown");
|
||||||
|
var markup = document.getElementById("markup");
|
||||||
|
var numbered = document.getElementById("numbered");
|
||||||
|
var violations = document.getElementById("violations");
|
||||||
|
var form = document.getElementsByTagName("form")[0];
|
||||||
|
var openFile = document.getElementById("openFile");
|
||||||
|
|
||||||
|
// Instances
|
||||||
|
var markdownit = window.markdownit();
|
||||||
|
var newLineRe = /\r\n|\r|\n/;
|
||||||
|
|
||||||
|
// Handle input
|
||||||
|
function onMarkdownInput() {
|
||||||
|
// Markdown
|
||||||
|
var content = markdown.value;
|
||||||
|
// Markup
|
||||||
|
markup.innerHTML = markdownit.render(content);
|
||||||
|
// Numbered
|
||||||
|
numbered.innerText = content.split(newLineRe)
|
||||||
|
.map(function mapNumberedLine(line, index) {
|
||||||
|
return (index + 1) + ": " + line;
|
||||||
|
}).join("\n");
|
||||||
|
// Violations
|
||||||
|
var options = {
|
||||||
|
"strings": {
|
||||||
|
"content": content
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var results = window.markdownlint.sync(options).toString();
|
||||||
|
violations.innerText = results.split(newLineRe)
|
||||||
|
.map(function mapResultLine(line) {
|
||||||
|
return line.replace(/^content: /, "");
|
||||||
|
}).join("\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load from a string or File object
|
||||||
|
function loadMarkdown(source) {
|
||||||
|
// Reset input element
|
||||||
|
form.reset();
|
||||||
|
if (typeof source === "string") {
|
||||||
|
// Update from string
|
||||||
|
markdown.value = source;
|
||||||
|
onMarkdownInput();
|
||||||
|
} else {
|
||||||
|
// Update from File object
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onload = function readerOnload(e) {
|
||||||
|
markdown.value = e.target.result;
|
||||||
|
onMarkdownInput();
|
||||||
|
};
|
||||||
|
reader.readAsText(source);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle drag-and-drop
|
||||||
|
function onDragOver(e) {
|
||||||
|
if (e.dataTransfer && e.dataTransfer.dropEffect) {
|
||||||
|
e.dataTransfer.dropEffect = "link";
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function onDrop(e) {
|
||||||
|
if (e.dataTransfer && e.dataTransfer.files) {
|
||||||
|
loadMarkdown(e.dataTransfer.files[0]);
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle file open
|
||||||
|
function onOpenFileChange(e) {
|
||||||
|
if (e.target && e.target.files) {
|
||||||
|
loadMarkdown(e.target.files[0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add event listeners
|
||||||
|
document.body.addEventListener("dragover", onDragOver);
|
||||||
|
document.body.addEventListener("drop", onDrop);
|
||||||
|
openFile.addEventListener("change", onOpenFileChange);
|
||||||
|
markdown.addEventListener("input", onMarkdownInput);
|
||||||
|
}());
|
||||||
8
demo/require-stub.js
Normal file
8
demo/require-stub.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Aliases "markdown-it" (expected) for "markdownit" (exported)
|
||||||
|
function require(module) {
|
||||||
|
if (module === "markdown-it") {
|
||||||
|
return window.markdownit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -15,13 +15,15 @@
|
||||||
"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 --rule \"no-console: 0, no-shadow: 0\" example",
|
"lint": "eslint lib test & eslint --env browser --global markdownit --global markdownlint --rule \"no-unused-vars: 0\" demo & eslint --rule \"no-console: 0, no-shadow: 0\" example",
|
||||||
|
"build-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"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"markdown-it": "^4.1.1"
|
"markdown-it": "^4.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"browserify": "^10.0.0",
|
||||||
"eslint": "^0.19.0",
|
"eslint": "^0.19.0",
|
||||||
"istanbul": "^0.3.8",
|
"istanbul": "^0.3.8",
|
||||||
"nodeunit": "^0.9.1",
|
"nodeunit": "^0.9.1",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue