dotfiles/script-resources/markdown2htmldoc/markdown-it-header-anchors.js
2021-12-16 14:57:24 +01:00

48 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;