Andreas/markdownlint
1
0
Fork 0
mirror of https://github.com/DavidAnson/markdownlint.git synced 2025-09-22 05:40:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Add interactive demo page to show how markdownlint handles user content.

Browse source
This commit is contained in:
David Anson 2015-05-03 21:50:25 -07:00
parent 43f28b90c1
commit dce6024e16
7 changed files with 178 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.eslintignore Normal file
View file

@ -0,0 +1 @@
demo/markdownlint-browser.js

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
coverage
demo/markdownlint-browser.js
node_modules
npm-debug.log

45
demo/default.css Normal file
View 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
View 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 &copy; 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
View 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
View file

@ -0,0 +1,8 @@
"use strict";
// Aliases "markdown-it" (expected) for "markdownit" (exported)
function require(module) {
if (module === "markdown-it") {
return window.markdownit;
}
}

4
package.json
View file

@ -15,13 +15,15 @@
"test": "nodeunit",
"test-cover": "istanbul cover 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"
},
"dependencies": {
"markdown-it": "^4.1.1"
},
"devDependencies": {
"browserify": "^10.0.0",
"eslint": "^0.19.0",
"istanbul": "^0.3.8",
"nodeunit": "^0.9.1",