49 lines
1.9 KiB
JavaScript
49 lines
1.9 KiB
JavaScript
const GithubSlugger = require('github-slugger');
|
|
|
|
const OCTICON_LINK_ICON_SVG = [
|
|
// Basically copied from Github's HTML. Also see
|
|
// <https://stackoverflow.com/a/34249810/12005228>. I wonder what other
|
|
// attributes can be thrown out to make this image smaller? After all, it is
|
|
// duplicated for each and every heading.
|
|
'<svg class="octicon octicon-link" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">',
|
|
'<path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path>',
|
|
'</svg>',
|
|
].join('');
|
|
|
|
function markdownItHeaderAnchors(md) {
|
|
let slugger = new GithubSlugger();
|
|
|
|
let defaultRender =
|
|
md.renderer.rules.heading_open ||
|
|
((tokens, idx, options, _env, self) => self.renderToken(tokens, idx, options));
|
|
|
|
// eslint-disable-next-line camelcase
|
|
md.renderer.rules.heading_open = (tokens, idx, opts, env, self) => {
|
|
let renderedHeadingOpen = defaultRender(tokens, idx, opts, env, self);
|
|
|
|
let innerText = '';
|
|
let headingContentToken = tokens[idx + 1];
|
|
headingContentToken.children.forEach((child) => {
|
|
switch (child.type) {
|
|
case 'html_block':
|
|
case 'html_inline':
|
|
break;
|
|
case 'emoji':
|
|
innerText += child.markup;
|
|
break;
|
|
default:
|
|
innerText += child.content;
|
|
}
|
|
});
|
|
|
|
if (innerText.length > 0) {
|
|
let id = md.utils.escapeHtml(slugger.slug(innerText));
|
|
renderedHeadingOpen += `<a id="${id}" class="anchor" href="#${id}" aria-hidden="true">${OCTICON_LINK_ICON_SVG}</a>`;
|
|
}
|
|
|
|
return renderedHeadingOpen;
|
|
};
|
|
}
|
|
|
|
module.exports = markdownItHeaderAnchors;
|