Latest commit

History

263 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

markdown-js

Yet another markdown parser, this time for JavaScript. There's a few options that precede this project but they all treat markdown to HTML conversion as a single step process. You pass markdown in and get HTML out, end of story. We had some pretty particular views on how the process should actually look, which include:

  • producing well-formed HTML. This means that em and strong nesting is important, as is the ability to output as both HTML and XHTML

  • having an intermediate representation to allow processing of parsed data (we in fact have two, both JsonML: a markdown tree and an HTML tree)

  • being easily extensible to add new dialects without having to rewrite the entire parsing mechanics

  • having a good test suite. The only test suites we could find tested massive blocks of input, and passing depended on outputting the HTML with exactly the same whitespace as the original implementation

Installation

Just the markdown library:

npm install markdown

Also install md2html to /usr/local/bin (or wherever)

npm install -g markdown

Usage

The simple way to use it with CommonJS is:

var input = "# Heading\n\nParagraph";
var output = require( "markdown" ).markdown.toHTML( input );
print( output );

If you want more control check out the documentation in lib/markdown.js which details all the methods and parameters available (including examples!). One day we'll get the docs generated and hosted somewhere for nicer browsing.

It also works in a browser; here is a complete example:

<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview)
{
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
}
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>

md2html

md2html /path/to/doc.md > /path/to/doc.html

Intermediate Representation

Internally the process to convert a chunk of markdown into a chunk of HTML has three steps:

  1. Parse the markdown into a JsonML tree. Any references found in the parsing are stored in the attribute hash of the root node under the key references.

  2. Convert the markdown tree into an HTML tree. Rename any nodes that need it (bulletlist to ul for example) and lookup any references used by links or images. Remove the references attribute once done.

  3. Stringify the HTML tree being careful not to wreck whitespace where whitespace is important (surrounding inline elements for example).

Each step of this process can be called individually if you need to do some processing or modification of the data at an intermediate stage. For example, you may want to grab a list of all URLs linked to in the document before rendering it to HTML which you could do by recursing through the HTML tree looking for a nodes.

Running tests

To run the tests under node you will need tap installed (it's listed as a devDependencies so npm install from the checkout should be enough), then do

$ ./node_modules/.bin/tap test/*.t.js

Contributing

Do the usual github fork and pull request dance. Add yourself to the contributors section of package.json too if you want to.

## License

Released under the MIT license.

About

A Markdown parser for javascript

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Latest commit

History

263 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

markdown-js

Yet another markdown parser, this time for JavaScript. There's a few options that precede this project but they all treat markdown to HTML conversion as a single step process. You pass markdown in and get HTML out, end of story. We had some pretty particular views on how the process should actually look, which include:

  • producing well-formed HTML. This means that em and strong nesting is important, as is the ability to output as both HTML and XHTML

  • having an intermediate representation to allow processing of parsed data (we in fact have two, both JsonML: a markdown tree and an HTML tree)

  • being easily extensible to add new dialects without having to rewrite the entire parsing mechanics

  • having a good test suite. The only test suites we could find tested massive blocks of input, and passing depended on outputting the HTML with exactly the same whitespace as the original implementation

Installation

Just the markdown library:

npm install markdown

Also install md2html to /usr/local/bin (or wherever)

npm install -g markdown

Usage

The simple way to use it with CommonJS is:

var input = "# Heading\n\nParagraph";
var output = require( "markdown" ).markdown.toHTML( input );
print( output );

If you want more control check out the documentation in lib/markdown.js which details all the methods and parameters available (including examples!). One day we'll get the docs generated and hosted somewhere for nicer browsing.

It also works in a browser; here is a complete example:

<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview)
{
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
}
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>

md2html

md2html /path/to/doc.md > /path/to/doc.html

Intermediate Representation

Internally the process to convert a chunk of markdown into a chunk of HTML has three steps:

  1. Parse the markdown into a JsonML tree. Any references found in the parsing are stored in the attribute hash of the root node under the key references.

  2. Convert the markdown tree into an HTML tree. Rename any nodes that need it (bulletlist to ul for example) and lookup any references used by links or images. Remove the references attribute once done.

  3. Stringify the HTML tree being careful not to wreck whitespace where whitespace is important (surrounding inline elements for example).

Each step of this process can be called individually if you need to do some processing or modification of the data at an intermediate stage. For example, you may want to grab a list of all URLs linked to in the document before rendering it to HTML which you could do by recursing through the HTML tree looking for a nodes.

Running tests

To run the tests under node you will need tap installed (it's listed as a devDependencies so npm install from the checkout should be enough), then do

$ ./node_modules/.bin/tap test/*.t.js

Contributing

Do the usual github fork and pull request dance. Add yourself to the contributors section of package.json too if you want to.

## License

Released under the MIT license.

About

A Markdown parser for javascript

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

263 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

markdown-js

Yet another markdown parser, this time for JavaScript. There's a few options that precede this project but they all treat markdown to HTML conversion as a single step process. You pass markdown in and get HTML out, end of story. We had some pretty particular views on how the process should actually look, which include:

  • producing well-formed HTML. This means that em and strong nesting is important, as is the ability to output as both HTML and XHTML

  • having an intermediate representation to allow processing of parsed data (we in fact have two, both JsonML: a markdown tree and an HTML tree)

  • being easily extensible to add new dialects without having to rewrite the entire parsing mechanics

  • having a good test suite. The only test suites we could find tested massive blocks of input, and passing depended on outputting the HTML with exactly the same whitespace as the original implementation

Installation

Just the markdown library:

npm install markdown

Also install md2html to /usr/local/bin (or wherever)

npm install -g markdown

Usage

The simple way to use it with CommonJS is:

var input = "# Heading\n\nParagraph";
var output = require( "markdown" ).markdown.toHTML( input );
print( output );

If you want more control check out the documentation in lib/markdown.js which details all the methods and parameters available (including examples!). One day we'll get the docs generated and hosted somewhere for nicer browsing.

It also works in a browser; here is a complete example:

<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview)
{
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
}
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>

md2html

md2html /path/to/doc.md > /path/to/doc.html

Intermediate Representation

Internally the process to convert a chunk of markdown into a chunk of HTML has three steps:

  1. Parse the markdown into a JsonML tree. Any references found in the parsing are stored in the attribute hash of the root node under the key references.

  2. Convert the markdown tree into an HTML tree. Rename any nodes that need it (bulletlist to ul for example) and lookup any references used by links or images. Remove the references attribute once done.

  3. Stringify the HTML tree being careful not to wreck whitespace where whitespace is important (surrounding inline elements for example).

Each step of this process can be called individually if you need to do some processing or modification of the data at an intermediate stage. For example, you may want to grab a list of all URLs linked to in the document before rendering it to HTML which you could do by recursing through the HTML tree looking for a nodes.

Running tests

To run the tests under node you will need tap installed (it's listed as a devDependencies so npm install from the checkout should be enough), then do

$ ./node_modules/.bin/tap test/*.t.js

Contributing

Do the usual github fork and pull request dance. Add yourself to the contributors section of package.json too if you want to.

## License

Released under the MIT license.

About

A Markdown parser for javascript

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

263 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

markdown-js

Yet another markdown parser, this time for JavaScript. There's a few options that precede this project but they all treat markdown to HTML conversion as a single step process. You pass markdown in and get HTML out, end of story. We had some pretty particular views on how the process should actually look, which include:

  • producing well-formed HTML. This means that em and strong nesting is important, as is the ability to output as both HTML and XHTML

  • having an intermediate representation to allow processing of parsed data (we in fact have two, both JsonML: a markdown tree and an HTML tree)

  • being easily extensible to add new dialects without having to rewrite the entire parsing mechanics

  • having a good test suite. The only test suites we could find tested massive blocks of input, and passing depended on outputting the HTML with exactly the same whitespace as the original implementation

Installation

Just the markdown library:

npm install markdown

Also install md2html to /usr/local/bin (or wherever)

npm install -g markdown

Usage

The simple way to use it with CommonJS is:

var input = "# Heading\n\nParagraph";
var output = require( "markdown" ).markdown.toHTML( input );
print( output );

If you want more control check out the documentation in lib/markdown.js which details all the methods and parameters available (including examples!). One day we'll get the docs generated and hosted somewhere for nicer browsing.

It also works in a browser; here is a complete example:

<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview)
{
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
}
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>

md2html

md2html /path/to/doc.md > /path/to/doc.html

Intermediate Representation

Internally the process to convert a chunk of markdown into a chunk of HTML has three steps:

  1. Parse the markdown into a JsonML tree. Any references found in the parsing are stored in the attribute hash of the root node under the key references.

  2. Convert the markdown tree into an HTML tree. Rename any nodes that need it (bulletlist to ul for example) and lookup any references used by links or images. Remove the references attribute once done.

  3. Stringify the HTML tree being careful not to wreck whitespace where whitespace is important (surrounding inline elements for example).

Each step of this process can be called individually if you need to do some processing or modification of the data at an intermediate stage. For example, you may want to grab a list of all URLs linked to in the document before rendering it to HTML which you could do by recursing through the HTML tree looking for a nodes.

Running tests

To run the tests under node you will need tap installed (it's listed as a devDependencies so npm install from the checkout should be enough), then do

$ ./node_modules/.bin/tap test/*.t.js

Contributing

Do the usual github fork and pull request dance. Add yourself to the contributors section of package.json too if you want to.

## License

Released under the MIT license.

About

A Markdown parser for javascript

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Latest commit

History

263 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

markdown-js

Yet another markdown parser, this time for JavaScript. There's a few options that precede this project but they all treat markdown to HTML conversion as a single step process. You pass markdown in and get HTML out, end of story. We had some pretty particular views on how the process should actually look, which include:

  • producing well-formed HTML. This means that em and strong nesting is important, as is the ability to output as both HTML and XHTML

  • having an intermediate representation to allow processing of parsed data (we in fact have two, both JsonML: a markdown tree and an HTML tree)

  • being easily extensible to add new dialects without having to rewrite the entire parsing mechanics

  • having a good test suite. The only test suites we could find tested massive blocks of input, and passing depended on outputting the HTML with exactly the same whitespace as the original implementation

Installation

Just the markdown library:

npm install markdown

Also install md2html to /usr/local/bin (or wherever)

npm install -g markdown

Usage

The simple way to use it with CommonJS is:

var input = "# Heading\n\nParagraph";
var output = require( "markdown" ).markdown.toHTML( input );
print( output );

If you want more control check out the documentation in lib/markdown.js which details all the methods and parameters available (including examples!). One day we'll get the docs generated and hosted somewhere for nicer browsing.

It also works in a browser; here is a complete example:

<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview)
{
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
}
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>

md2html

md2html /path/to/doc.md > /path/to/doc.html

Intermediate Representation

Internally the process to convert a chunk of markdown into a chunk of HTML has three steps:

  1. Parse the markdown into a JsonML tree. Any references found in the parsing are stored in the attribute hash of the root node under the key references.

  2. Convert the markdown tree into an HTML tree. Rename any nodes that need it (bulletlist to ul for example) and lookup any references used by links or images. Remove the references attribute once done.

  3. Stringify the HTML tree being careful not to wreck whitespace where whitespace is important (surrounding inline elements for example).

Each step of this process can be called individually if you need to do some processing or modification of the data at an intermediate stage. For example, you may want to grab a list of all URLs linked to in the document before rendering it to HTML which you could do by recursing through the HTML tree looking for a nodes.

Running tests

To run the tests under node you will need tap installed (it's listed as a devDependencies so npm install from the checkout should be enough), then do

$ ./node_modules/.bin/tap test/*.t.js

Contributing

Do the usual github fork and pull request dance. Add yourself to the contributors section of package.json too if you want to.

## License

Released under the MIT license.

About

A Markdown parser for javascript

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

263 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

markdown-js

Yet another markdown parser, this time for JavaScript. There's a few options that precede this project but they all treat markdown to HTML conversion as a single step process. You pass markdown in and get HTML out, end of story. We had some pretty particular views on how the process should actually look, which include:

  • producing well-formed HTML. This means that em and strong nesting is important, as is the ability to output as both HTML and XHTML

  • having an intermediate representation to allow processing of parsed data (we in fact have two, both JsonML: a markdown tree and an HTML tree)

  • being easily extensible to add new dialects without having to rewrite the entire parsing mechanics

  • having a good test suite. The only test suites we could find tested massive blocks of input, and passing depended on outputting the HTML with exactly the same whitespace as the original implementation

Installation

Just the markdown library:

npm install markdown

Also install md2html to /usr/local/bin (or wherever)

npm install -g markdown

Usage

The simple way to use it with CommonJS is:

var input = "# Heading\n\nParagraph";
var output = require( "markdown" ).markdown.toHTML( input );
print( output );

If you want more control check out the documentation in lib/markdown.js which details all the methods and parameters available (including examples!). One day we'll get the docs generated and hosted somewhere for nicer browsing.

It also works in a browser; here is a complete example:

<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview)
{
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
}
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>

md2html

md2html /path/to/doc.md > /path/to/doc.html

Intermediate Representation

Internally the process to convert a chunk of markdown into a chunk of HTML has three steps:

  1. Parse the markdown into a JsonML tree. Any references found in the parsing are stored in the attribute hash of the root node under the key references.

  2. Convert the markdown tree into an HTML tree. Rename any nodes that need it (bulletlist to ul for example) and lookup any references used by links or images. Remove the references attribute once done.

  3. Stringify the HTML tree being careful not to wreck whitespace where whitespace is important (surrounding inline elements for example).

Each step of this process can be called individually if you need to do some processing or modification of the data at an intermediate stage. For example, you may want to grab a list of all URLs linked to in the document before rendering it to HTML which you could do by recursing through the HTML tree looking for a nodes.

Running tests

To run the tests under node you will need tap installed (it's listed as a devDependencies so npm install from the checkout should be enough), then do

$ ./node_modules/.bin/tap test/*.t.js

Contributing

Do the usual github fork and pull request dance. Add yourself to the contributors section of package.json too if you want to.

## License

Released under the MIT license.

About

A Markdown parser for javascript

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

263 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

markdown-js

Yet another markdown parser, this time for JavaScript. There's a few options that precede this project but they all treat markdown to HTML conversion as a single step process. You pass markdown in and get HTML out, end of story. We had some pretty particular views on how the process should actually look, which include:

  • producing well-formed HTML. This means that em and strong nesting is important, as is the ability to output as both HTML and XHTML

  • having an intermediate representation to allow processing of parsed data (we in fact have two, both JsonML: a markdown tree and an HTML tree)

  • being easily extensible to add new dialects without having to rewrite the entire parsing mechanics

  • having a good test suite. The only test suites we could find tested massive blocks of input, and passing depended on outputting the HTML with exactly the same whitespace as the original implementation

Installation

Just the markdown library:

npm install markdown

Also install md2html to /usr/local/bin (or wherever)

npm install -g markdown

Usage

The simple way to use it with CommonJS is:

var input = "# Heading\n\nParagraph";
var output = require( "markdown" ).markdown.toHTML( input );
print( output );

If you want more control check out the documentation in lib/markdown.js which details all the methods and parameters available (including examples!). One day we'll get the docs generated and hosted somewhere for nicer browsing.

It also works in a browser; here is a complete example:

<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview)
{
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
}
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>

md2html

md2html /path/to/doc.md > /path/to/doc.html

Intermediate Representation

Internally the process to convert a chunk of markdown into a chunk of HTML has three steps:

  1. Parse the markdown into a JsonML tree. Any references found in the parsing are stored in the attribute hash of the root node under the key references.

  2. Convert the markdown tree into an HTML tree. Rename any nodes that need it (bulletlist to ul for example) and lookup any references used by links or images. Remove the references attribute once done.

  3. Stringify the HTML tree being careful not to wreck whitespace where whitespace is important (surrounding inline elements for example).

Each step of this process can be called individually if you need to do some processing or modification of the data at an intermediate stage. For example, you may want to grab a list of all URLs linked to in the document before rendering it to HTML which you could do by recursing through the HTML tree looking for a nodes.

Running tests

To run the tests under node you will need tap installed (it's listed as a devDependencies so npm install from the checkout should be enough), then do

$ ./node_modules/.bin/tap test/*.t.js

Contributing

Do the usual github fork and pull request dance. Add yourself to the contributors section of package.json too if you want to.

## License

Released under the MIT license.

About

A Markdown parser for javascript

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Latest commit

History

263 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

markdown-js

Yet another markdown parser, this time for JavaScript. There's a few options that precede this project but they all treat markdown to HTML conversion as a single step process. You pass markdown in and get HTML out, end of story. We had some pretty particular views on how the process should actually look, which include:

  • producing well-formed HTML. This means that em and strong nesting is important, as is the ability to output as both HTML and XHTML

  • having an intermediate representation to allow processing of parsed data (we in fact have two, both JsonML: a markdown tree and an HTML tree)

  • being easily extensible to add new dialects without having to rewrite the entire parsing mechanics

  • having a good test suite. The only test suites we could find tested massive blocks of input, and passing depended on outputting the HTML with exactly the same whitespace as the original implementation

Installation

Just the markdown library:

npm install markdown

Also install md2html to /usr/local/bin (or wherever)

npm install -g markdown

Usage

The simple way to use it with CommonJS is:

var input = "# Heading\n\nParagraph";
var output = require( "markdown" ).markdown.toHTML( input );
print( output );

If you want more control check out the documentation in lib/markdown.js which details all the methods and parameters available (including examples!). One day we'll get the docs generated and hosted somewhere for nicer browsing.

It also works in a browser; here is a complete example:

<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview)
{
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
}
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>

md2html

md2html /path/to/doc.md > /path/to/doc.html

Intermediate Representation

Internally the process to convert a chunk of markdown into a chunk of HTML has three steps:

  1. Parse the markdown into a JsonML tree. Any references found in the parsing are stored in the attribute hash of the root node under the key references.

  2. Convert the markdown tree into an HTML tree. Rename any nodes that need it (bulletlist to ul for example) and lookup any references used by links or images. Remove the references attribute once done.

  3. Stringify the HTML tree being careful not to wreck whitespace where whitespace is important (surrounding inline elements for example).

Each step of this process can be called individually if you need to do some processing or modification of the data at an intermediate stage. For example, you may want to grab a list of all URLs linked to in the document before rendering it to HTML which you could do by recursing through the HTML tree looking for a nodes.

Running tests

To run the tests under node you will need tap installed (it's listed as a devDependencies so npm install from the checkout should be enough), then do

$ ./node_modules/.bin/tap test/*.t.js

Contributing

Do the usual github fork and pull request dance. Add yourself to the contributors section of package.json too if you want to.

## License

Released under the MIT license.

About

A Markdown parser for javascript

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Contributors