Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat(markdown): teach markdown how to highlight code #759

Merged
merged 2 commits into from May 17, 2016
Merged

Feat(markdown): teach markdown how to highlight code #759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fa47cdb
Feat(markdown): teach markdown how to highlight code
marcoscaceres May 13, 2016
619aaf5
Feat(karam.conf.js): serve hightlighter and beutifier
marcoscaceres May 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
67 changes: 53 additions & 14 deletions js/core/markdown.js
View file
Open in desktop
Expand Up @@ -43,19 +43,56 @@
* The whitespace of pre elements are left alone.
**/
"use strict";
define(["marked", "core/utils"], function (marked, utils) {
define([
"marked",
"core/utils",
"highlight",
"beautify-html",
"core/beautify-options",
], function(marked, utils, hljs, beautify, beautifyOps) {
var defaultLanguages = Object.freeze([
"css",
"html",
"js",
"json",
"xml",
]);

hljs.configure({
tabReplace: " ", // 2 spaces
});

marked.setOptions({
sanitize: false,
gfm: true,
highlight: makeHighlightHelper(),
});

function makeHighlightHelper() {
var div = document.createElement("div");
return function(code, language) {
var leftPadding = utils.calculateLeftPad(code);
var normalizedCode;
if (leftPadding) {
var leftPaddingMatcher = new RegExp("^ {" + leftPadding + "}", "gm");
normalizedCode = code.replace(leftPaddingMatcher, "");
} else {
normalizedCode = code;
}
div.innerHTML = normalizedCode;
var cleanCode = div.textContent;
var possibleLanguages = [].concat(language || defaultLanguages);
var highlightedCode = hljs.highlightAuto(cleanCode, possibleLanguages);
return highlightedCode.value;
};
}

function toHTML(text) {
// As markdown is pulled from HTML > is already escaped, and
// thus blockquotes aren't picked up by the parser. This fixes
// it.
var cleanText = text.replace(/>/g, ">");
var normalizedLeftPad = utils.normalizePadding(cleanText);
var html = marked(normalizedLeftPad);
var normalizedLeftPad = utils.normalizePadding(text);
// As markdown is pulled from HTML, > is already escaped and
// so blockquotes aren't picked up by the parser. This fixes it.
var potentialMarkdown = normalizedLeftPad.replace(/>/g, ">");
var html = marked(potentialMarkdown);
return html;
}

Expand Down Expand Up @@ -86,7 +123,6 @@ define(["marked", "core/utils"], function (marked, utils) {
};
}


function makeBuilder(doc) {
var root = doc.createDocumentFragment();
var stack = [root];
Expand Down Expand Up @@ -202,23 +238,26 @@ define(["marked", "core/utils"], function (marked, utils) {
var processBlockLevelElements = processElements("section, .issue, .note, .req");

return {
run: function (conf, doc, cb, msg) {
run: function(conf, doc, cb, msg) {
msg.pub("start", "core/markdown");
if (conf.format === "markdown") {
// We transplant the UI to do the markdown processing
var rsUI = doc.getElementById("respec-ui");
rsUI.remove();
// The new body will replace the old body
var newBody = doc.createElement("body");
newBody.innerHTML = doc.body.innerHTML;
// Marked expects markdown be flush against the left margin
// so we need to normalize the inner text of some block
// elements.
var html = toHTML(doc.body.innerHTML);
// Now we create a new body and replace the old body
var newBody = doc.createElement("body");
newBody.innerHTML = html;
processBlockLevelElements(newBody);
var dirtyHTML = toHTML(newBody.innerHTML);
// Markdown parsing sometimes inserts empty p tags
var cleanHTML = dirtyHTML.replace(/<p>\s*<\/p>/gm, "");
var beautifulHTML = beautify.html_beautify(cleanHTML, beautifyOps);
newBody.innerHTML = beautifulHTML;
// Restructure the document properly
var fragment = structure(newBody, doc);

// Frankenstein the whole thing back together
newBody.appendChild(fragment);
newBody.appendChild(rsUI);
Expand Down
10 changes: 10 additions & 0 deletions karma.conf.js
View file
Open in desktop
Expand Up @@ -77,6 +77,16 @@ module.exports = function(config) {
included: false,
served: true,
},
{
pattern: "./node_modules/highlightjs/*.js",
included: false,
served: true,
},
{
pattern: "./node_modules/js-beautify/js/lib/*.js",
included: false,
served: true,
},
"tests/spec/SpecHelper.js",
"tests/test-main.js",
],
Expand Down