92 lines
2.2 KiB
JavaScript
92 lines
2.2 KiB
JavaScript
import math from 'remark-math';
|
|
import rehype_katex from 'rehype-katex';
|
|
import katex from 'katex';
|
|
import visit from 'unist-util-visit';
|
|
|
|
const gruvboxColorMap = {
|
|
red: '#fb4934',
|
|
green: '#98971a',
|
|
yellow: '#fabd2f',
|
|
blue: '#458588',
|
|
purple: '#d3869b',
|
|
cyan: '#8ec07c',
|
|
orange: '#fe8019',
|
|
black: '#282828',
|
|
white: '#ebdbb2',
|
|
gray: '#a89984'
|
|
};
|
|
|
|
const override_katex_colors = () => (tree) => {
|
|
visit(tree, 'element', (node) => {
|
|
if (node.tagName === 'span' && node.properties?.className?.includes('katex')) {
|
|
removeInlineColors(node);
|
|
}
|
|
});
|
|
};
|
|
|
|
function removeInlineColors(node) {
|
|
if (node.properties?.style && typeof node.properties.style === 'string') {
|
|
// Split style string into individual declarations
|
|
const styles = node.properties.style.split(';').map(s => s.trim()).filter(Boolean);
|
|
const newStyles = styles.map(style => {
|
|
const [key, value] = style.split(':').map(s => s.trim());
|
|
if (key === 'color' && gruvboxColorMap[value]) {
|
|
return `color: ${gruvboxColorMap[value]}`;
|
|
}
|
|
return `${key}: ${value}`;
|
|
});
|
|
node.properties.style = newStyles.join('; ');
|
|
}
|
|
|
|
if (node.children) {
|
|
node.children.forEach(removeInlineColors);
|
|
}
|
|
}
|
|
|
|
const correct_hast_tree = () => (tree) => {
|
|
visit(tree, 'text', (node) => {
|
|
if (node.value.trim().startsWith('<')) {
|
|
node.type = 'raw';
|
|
}
|
|
});
|
|
};
|
|
|
|
const katex_blocks = () => (tree) => {
|
|
visit(tree, 'code', (node) => {
|
|
if (node.lang === 'math') {
|
|
let str = katex.renderToString(node.value, {
|
|
displayMode: true,
|
|
leqno: false,
|
|
fleqn: false,
|
|
throwOnError: true,
|
|
errorColor: '#cc0000',
|
|
strict: 'warn',
|
|
output: 'htmlAndMathml',
|
|
trust: false,
|
|
macros: {
|
|
'\\f': '#1f(#2)'
|
|
}
|
|
});
|
|
|
|
for (const [name, gruvColor] of Object.entries(gruvboxColorMap)) {
|
|
const regex = new RegExp(`(style="[^"]*)color:\\s*${name}\\b`, 'g');
|
|
str = str.replace(regex, `$1color: ${gruvColor}`);
|
|
}
|
|
|
|
node.type = 'raw';
|
|
node.value = '{@html `' + str + '`}';
|
|
}
|
|
});
|
|
};
|
|
|
|
export const mdsvex_config = {
|
|
extensions: ['.md', '.svx'],
|
|
layout: './src/routes/articles/Layout.svelte',
|
|
|
|
smartypants: {
|
|
dashes: 'oldschool'
|
|
},
|
|
|
|
remarkPlugins: [math, katex_blocks],
|
|
rehypePlugins: [correct_hast_tree, rehype_katex, override_katex_colors]
|
|
};
|