Skip to content

update markdown rendering approach #1133

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

Merged
merged 2 commits into from
Feb 12, 2022
Merged

update markdown rendering approach #1133

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
072feea
update markdown rendering approach
miguelcobain Feb 12, 2022
84149ab
Merge branch 'master' into markdown-update
miguelcobain Feb 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions addon/components/docs-code-highlight/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import css from 'highlight.js/lib/languages/css';
import handlebars from 'highlight.js/lib/languages/handlebars';
import htmlbars from 'highlight.js/lib/languages/htmlbars';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

htmlbars is no longer a thing in highlight.js, being replaced with just handlebars.

import json from 'highlight.js/lib/languages/json';
import xml from 'highlight.js/lib/languages/xml';
import diff from 'highlight.js/lib/languages/diff';
Expand All @@ -16,8 +15,8 @@ hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('js', javascript);
hljs.registerLanguage('css', css);
hljs.registerLanguage('handlebars', handlebars);
hljs.registerLanguage('htmlbars', htmlbars);
hljs.registerLanguage('hbs', htmlbars);
hljs.registerLanguage('htmlbars', handlebars);
hljs.registerLanguage('hbs', handlebars);
hljs.registerLanguage('json', json);
hljs.registerLanguage('xml', xml);
hljs.registerLanguage('diff', diff);
Expand All @@ -28,6 +27,6 @@ hljs.registerLanguage('ts', typescript);

export default class DocsCodeHighlight extends Component {
setupElement(element) {
hljs.highlightBlock(element);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

highlightBlock method was deprecated, being replaced with highlightElement.

hljs.highlightElement(element);
}
}
2 changes: 1 addition & 1 deletion addon/components/docs-demo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export default class DocsDemo extends Component {
case 'hbs':
case 'md':
label = 'template.hbs';
language = 'htmlbars';
language = 'handlebars';
break;
default:
label = 'script.js';
Expand Down
153 changes: 94 additions & 59 deletions addon/utils/compile-markdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import marked from 'marked';
import { marked } from 'marked';
import { parse as htmlParse } from 'node-html-parser';
import { parse as hbsParse } from '@handlebars/parser';
import lineColumn from 'line-column';

import hljs from 'highlight.js/lib/core';

// Installed languages
import javascript from 'highlight.js/lib/languages/javascript';
import css from 'highlight.js/lib/languages/css';
import handlebars from 'highlight.js/lib/languages/handlebars';
import htmlbars from 'highlight.js/lib/languages/htmlbars';
import json from 'highlight.js/lib/languages/json';
import xml from 'highlight.js/lib/languages/xml';
import diff from 'highlight.js/lib/languages/diff';
Expand All @@ -17,8 +19,8 @@ hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('js', javascript);
hljs.registerLanguage('css', css);
hljs.registerLanguage('handlebars', handlebars);
hljs.registerLanguage('htmlbars', htmlbars);
hljs.registerLanguage('hbs', htmlbars);
hljs.registerLanguage('hbs', handlebars);
hljs.registerLanguage('htmlbars', handlebars);
hljs.registerLanguage('json', json);
hljs.registerLanguage('xml', xml);
hljs.registerLanguage('diff', diff);
Expand All @@ -27,6 +29,90 @@ hljs.registerLanguage('sh', shell);
hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('ts', typescript);

const htmlComponent = {
name: 'htmlComponent',
level: 'block',
start(src) {
// stop text tokenizer at the next potential match.
// we're only interested in html blocks that begin in a new line
let match = src.match(/\n<[^/^\s>]/);
return match && match.index;
},
tokenizer(src) {
let openingRule = /^<([^/^\s>]+)\s?[\s\S]*?>/;
let openingMatch = openingRule.exec(src);

if (openingMatch) {
let openingTag = openingMatch[1];

let root = htmlParse(src);

for (let el of root.childNodes) {
if (el.rawTagName === openingTag) {
let finalMatch = src.substring(el.range[0], el.range[1]);

return {
type: 'htmlComponent',
raw: finalMatch,
text: finalMatch,
tokens: [],
};
}
}
}
},
renderer(token) {
return `\n<p>${token.text}</p>\n`;
},
};

const hbsComponent = {
name: 'hbsComponent',
level: 'block',
start(src) {
// stop text tokenizer at the next potential match.
// we're only interested in hbs blocks that begin in a new line
let match = src.match(/\n{{#\S/);
return match && match.index;
},
tokenizer(src) {
let openingRule = /^{{#([A-Za-z-]+)[\S\s]+?}}/;
let openingMatch = openingRule.exec(src);

if (openingMatch) {
let openingTag = openingMatch[1];

let root = hbsParse(src);

for (let el of root.body) {
if (el.path && el.path.original === openingTag) {
let start = lineColumn(src).toIndex([
el.loc.start.line,
el.loc.start.column,
]);
let end = lineColumn(src).toIndex([
el.loc.end.line,
el.loc.end.column,
]);
let finalMatch = src.substring(start, end + 1);

return {
type: 'hbsComponent',
raw: finalMatch,
text: finalMatch,
tokens: [],
};
}
}
}
},
renderer(token) {
return `\n<p>${token.text}</p>\n`;
},
};

marked.use({ extensions: [htmlComponent, hbsComponent] });

/**
This function is used when `compileMarkdown` encounters code blocks while
rendering Markdown source.
Expand Down Expand Up @@ -98,63 +184,12 @@ export function highlightCode(code, language) {
@param {object} options? Options. Pass `targetHandlebars: true` if turning MD into HBS
*/
export default function compileMarkdown(source, config) {
let tokens = marked.lexer(source);
let markedOptions = {
highlight: highlightCode,
renderer: new HBSRenderer(config),
};

if (config && config.targetHandlebars) {
tokens = compactParagraphs(tokens);
}

return `<div class="docs-md">${marked
.parser(tokens, markedOptions)
.trim()}</div>`;
}

// Whitespace can imply paragraphs in Markdown, which can result
// in interleaving between <p> tags and block component invocations,
// so this scans the Marked tokens to turn things like this:
// <p>{{#my-component}}<p>
// <p>{{/my-component}}</p>
// Into this:
// <p>{{#my-component}} {{/my-component}}</p>
function compactParagraphs(tokens) {
let compacted = [];

compacted.links = tokens.links;

let balance = 0;
for (let token of tokens) {
if (balance === 0) {
compacted.push(token);
} else if (token.text) {
let last = compacted[compacted.length - 1];
last.text = `${last.text} ${token.text}`;
}

let tokenText = token.text || '';
let textWithoutCode = tokenText.replace(/`[\s\S]*?`/g, '');

if (token.type === 'code') {
textWithoutCode = '';
}

balance += count(/{{#/g, textWithoutCode);
balance += count(/<[A-Z]/g, textWithoutCode);
balance -= count(/[A-Z][^<>]+\/>/g, textWithoutCode);
balance -= count(/{{\//g, textWithoutCode);
balance -= count(/<\/[A-Z]/g, textWithoutCode);
}

return compacted;
}

function count(regex, string) {
let total = 0;
while (regex.exec(string)) total++;
return total;
return `<div class="docs-md">${marked.parse(source, markedOptions)}</div>`;
}

class HBSRenderer extends marked.Renderer {
Expand Down Expand Up @@ -246,8 +281,8 @@ class HBSRenderer extends marked.Renderer {
}

tablecell(content, flags) {
const type = flags.header ? 'th' : 'td';
const tag = flags.align
let type = flags.header ? 'th' : 'td';
let tag = flags.align
? '<' +
type +
' align="' +
Expand All @@ -266,7 +301,7 @@ class HBSRenderer extends marked.Renderer {
}

link(href, title, text) {
const titleAttribute = title ? `title="${title}"` : '';
let titleAttribute = title ? `title="${title}"` : '';
return `<a href="${href}" ${titleAttribute} class="docs-md__a">${text}</a>`;
}
}
7 changes: 5 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@glimmer/component": "^1.0.4",
"@glimmer/syntax": "^0.83.1",
"@glimmer/tracking": "^1.0.4",
"@handlebars/parser": "^2.1.0",
"broccoli-bridge": "^1.0.0",
"broccoli-caching-writer": "^3.0.3",
"broccoli-filter": "^1.3.0",
Expand Down Expand Up @@ -74,14 +75,16 @@
"execa": "5.1.1",
"fs-extra": "^10.0.0",
"git-repo-info": "^2.1.1",
"highlight.js": "^10.7.2",
"highlight.js": "^11.4.0",
"hosted-git-info": "^4.0.2",
"html-entities": "^2.3.2",
"jsdom": "^19.0.0",
"json-api-serializer": "^2.6.6",
"line-column": "^1.0.2",
"lodash": "^4.17.15",
"lunr": "^2.3.7",
"marked": "^0.8.2",
"marked": "^4.0.12",
"node-html-parser": "^5.2.0",
"pad-start": "^1.0.2",
"parse-git-config": "^3.0.0",
"postcss": "^8.3.6",
Expand Down
Loading