myst-to-html
Version:
Export from MyST mdast to HTML
166 lines (165 loc) • 6.68 kB
JavaScript
import { defaultHandlers, toHast, all } from 'mdast-util-to-hast';
import { u } from 'unist-builder';
import classNames from 'classnames';
const abbreviation = (h, node) => h(node, 'abbr', { title: node.title }, all(h, node));
const subscript = (h, node) => h(node, 'sub', all(h, node));
const superscript = (h, node) => h(node, 'sup', all(h, node));
const image = (h, node) => h(node, 'img', {
src: node.url,
alt: node.alt,
title: node.title,
class: classNames(node.align ? `align-${node.align}` : '', node.class) || undefined,
height: node.height,
width: node.width,
});
const caption = (h, node) => h(node, 'figcaption', all(h, node));
const legend = (h, node) => h(node, 'div', { class: 'legend' }, all(h, node));
const container = (h, node) => h(node, 'figure', {
id: node.identifier || node.label || undefined,
class: classNames({ numbered: node.enumerated !== false }, node.class) || undefined,
}, all(h, node));
const admonitionTitle = (h, node) => h(node, 'p', { class: 'admonition-title' }, all(h, node));
const admonition = (h, node) => h(node, 'aside', {
class: classNames({
[node.class]: node.class, // The custom class is first!!
admonition: true,
[node.kind]: node.kind && node.kind !== 'admonition',
}),
}, all(h, node));
const captionNumber = (h, node) => {
var _a, _b;
const captionKind = ((_a = node.kind) === null || _a === void 0 ? void 0 : _a.charAt(0).toUpperCase()) + ((_b = node.kind) === null || _b === void 0 ? void 0 : _b.slice(1));
return h(node, 'span', { class: 'caption-number' }, [u('text', `${captionKind} ${node.value}`)]);
};
const math = (h, node) => {
const attrs = { id: node.identifier || undefined, class: 'math-display' };
if (node.value.indexOf('\n') !== -1) {
const mathHast = h(node, 'div', attrs, [u('text', node.value)]);
return h(node, 'pre', [mathHast]);
}
return h(node, 'div', attrs, [u('text', node.value.replace(/\r?\n|\r/g, ' '))]);
};
const inlineMath = (h, node) => {
return h(node, 'span', { class: 'math-inline' }, [
u('text', node.value.replace(/\r?\n|\r/g, ' ')),
]);
};
const definitionList = (h, node) => h(node, 'dl', all(h, node));
const definitionTerm = (h, node) => h(node, 'dt', all(h, node));
const definitionDescription = (h, node) => h(node, 'dd', all(h, node));
const mystRole = (h, node) => {
const children = [h(node, 'code', { class: 'kind' }, [u('text', `{${node.name}}`)])];
if (node.value) {
children.push(h(node, 'code', {}, [u('text', node.value)]));
}
return h(node, 'span', { class: 'role unhandled' }, children);
};
const mystDirective = (h, node) => {
const directiveHeader = [
h(node, 'code', { class: 'kind' }, [u('text', `{${node.name}}`)]),
];
if (node.args) {
directiveHeader.push(h(node, 'code', { class: 'args' }, [u('text', node.args)]));
}
const directiveBody = [];
if (node.options) {
const optionsString = Object.keys(node.options)
.map((k) => `:${k}: ${node.options[k]}`)
.join('\n');
directiveBody.push(h(node, 'pre', [h(node, 'code', { class: 'options' }, [u('text', optionsString)])]));
}
directiveBody.push(h(node, 'pre', [h(node, 'code', [u('text', node.value)])]));
return h(node, 'div', { class: 'directive unhandled' }, [
h(node, 'p', {}, directiveHeader),
...directiveBody,
]);
};
const block = (h, node) => h(node, 'div', { class: 'block', 'data-block': node.meta }, all(h, node));
const comment = (h, node) => u('comment', node.value);
const heading = (h, node) => h(node, `h${node.depth}`, { id: node.identifier || undefined }, all(h, node));
const crossReference = (h, node) => {
if (node.resolved) {
return h(node, 'a', { href: `#${node.identifier}`, title: node.title || undefined }, all(h, node));
}
else {
return h(node, 'span', { class: 'reference role unhandled' }, [
h(node, 'code', { class: 'kind' }, [u('text', `{${node.kind}}`)]),
h(node, 'code', {}, [u('text', node.identifier)]),
]);
}
};
// TODO: The defaultHandler treats the first row (and only the first row)
// header; the mdast `tableCell.header` property is not respected.
// For that, we need to entirely rewrite this handler.
const table = (h, node) => {
node.data = { hProperties: { align: node.align } };
delete node.align;
return defaultHandlers.table(h, node);
};
const code = (h, node) => {
const value = node.value ? node.value + '\n' : '';
const props = {};
if (node.identifier) {
props.id = node.identifier;
}
props.className = classNames({ ['language-' + node.lang]: node.lang }, node.class) || undefined;
const codeHast = h(node, 'code', props, [u('text', value)]);
return h(node.position, 'pre', [codeHast]);
};
const iframe = (h, node) => h(node, 'div', { class: 'iframe' });
const bibliography = (h, node) => h(node, 'div', { class: 'bibliography' });
const details = (h, node) => h(node, 'details');
const summary = (h, node) => h(node, 'summary');
const embed = (h, node) => h(node, 'div');
const include = (h, node) => h(node, 'div', { file: node.file });
const linkBlock = (h, node) => h(node, 'a');
const margin = (h, node) => h(node, 'aside', { class: 'margin' });
const mdast = (h, node) => h(node, 'div', { id: node.id });
const mermaid = (h, node) => h(node, 'div', { class: 'margin' });
const myst = (h, node) => h(node, 'div', { class: 'margin' });
const output = (h, node) => h(node, 'div', { class: 'output' });
const keyboard = (h, node) => h(node, 'kbd', all(h, node));
export const mystToHast = (opts) => (tree) => {
return toHast(tree, {
...opts,
handlers: {
admonition,
admonitionTitle,
container,
image,
caption,
captionNumber,
legend,
abbreviation,
subscript,
superscript,
math,
inlineMath,
definitionList,
definitionTerm,
definitionDescription,
mystRole,
mystDirective,
block,
comment,
heading,
crossReference,
code,
table,
iframe,
bibliography,
details,
summary,
embed,
include,
linkBlock,
margin,
mdast,
mermaid,
myst,
output,
keyboard,
...opts === null || opts === void 0 ? void 0 : opts.handlers,
},
});
};