129 lines
3.4 KiB
JavaScript
129 lines
3.4 KiB
JavaScript
import { defineMDSveXConfig as defineConfig } from 'mdsvex';
|
|
import rehypeExternalLinks from 'rehype-external-links';
|
|
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
|
|
import readingTime from 'mdsvex-reading-time';
|
|
import remarkUnwrapImages from 'remark-unwrap-images';
|
|
import remarkToc from 'remark-toc';
|
|
import rehypeSlug from 'rehype-slug';
|
|
import { visit } from 'unist-util-visit';
|
|
import { toString } from 'mdast-util-to-string';
|
|
import Slugger from 'github-slugger';
|
|
import remarkFFF from 'remark-fff';
|
|
import remarkFootnotes from 'remark-footnotes';
|
|
// import { shikiTwoslashHighlighter } from '@kitbook/mdsvex-shiki-twoslash';
|
|
// import createShikiHighlighter from './src/lib/utils/shiki-highlighter.js';
|
|
// const shiki = await createShikiHighlighter({
|
|
// theme: 'github-dark-dimmed',
|
|
// showLineNumbers: (n) => true
|
|
// });
|
|
// highlighter
|
|
import { escapeSvelte } from 'mdsvex';
|
|
import { lex, parse as parseFence } from 'fenceparser';
|
|
import { renderCodeToHTML, runTwoSlash, createShikiHighlighter } from 'shiki-twoslash';
|
|
|
|
/** @type {import('mdsvex').MdsvexOptions} */
|
|
const config = defineConfig({
|
|
extensions: ['.svelte.md', '.md', '.svx'],
|
|
smartypants: {
|
|
dashes: 'oldschool'
|
|
},
|
|
// layout: {
|
|
// _: './src/lib/components/blog/Post.svelte'
|
|
// },
|
|
highlight: {
|
|
highlighter: async (code, lang, meta) => {
|
|
let fence, twoslash;
|
|
try {
|
|
fence = parseFence(lex([lang, meta].filter(Boolean).join(' ')));
|
|
} catch (error) {
|
|
throw new Error(`Could not parse the codefence for this code sample \n${code}`);
|
|
}
|
|
if (fence?.twoslash === true) twoslash = runTwoSlash(code, lang);
|
|
return `{@html \`${escapeSvelte(
|
|
renderCodeToHTML(
|
|
code,
|
|
lang,
|
|
fence ?? {},
|
|
{ themeName: 'github-dark-dimmed' },
|
|
await createShikiHighlighter({ theme: 'github-dark-dimmed' }),
|
|
twoslash
|
|
)
|
|
)}\` }`;
|
|
}
|
|
},
|
|
// highlight: {
|
|
// highlighter: shiki
|
|
// },
|
|
/* Wait for skeleton to implement Prismjs, for now use <CodeBlock /> in .md files */
|
|
// layout: {
|
|
// blog: './src/lib/components/blog/_blog-layout.svelte',
|
|
// project: './src/lib/components/projects/_project-layout.svelte',
|
|
// _: './src/lib/components/fallback/_layout.svelte'
|
|
// },
|
|
/* Plugins */
|
|
rehypePlugins: [
|
|
[rehypeSlug],
|
|
[rehypeAutolinkHeadings, { behavior: 'wrap' }],
|
|
[
|
|
rehypeExternalLinks,
|
|
{
|
|
rel: ['nofollow', 'noopener', 'noreferrer', 'external'],
|
|
target: '_blank'
|
|
}
|
|
]
|
|
// [
|
|
// /** Custom rehype plugin to add loading="lazy" to all images */
|
|
// () => {
|
|
// return (tree) => {
|
|
// visit(tree, 'element', (node) => {
|
|
// if (node.tagName === 'img') {
|
|
// node.properties.loading = 'lazy';
|
|
// }
|
|
// });
|
|
// };
|
|
// }
|
|
// ]
|
|
],
|
|
remarkPlugins: [
|
|
[remarkToc, { maxDepth: 3, tight: true }],
|
|
[
|
|
remarkFFF,
|
|
{
|
|
presets: [],
|
|
target: 'mdsvex',
|
|
autofill: {
|
|
provider: 'fs',
|
|
path: (path) => path.replace('/src/routes/', '/urara/')
|
|
},
|
|
strict: {
|
|
media: {
|
|
type: 'string',
|
|
array: false
|
|
}
|
|
}
|
|
}
|
|
],
|
|
[readingTime, { wpm: 200 }],
|
|
[remarkFootnotes, { inlineNotes: true }]
|
|
// [
|
|
// headings,
|
|
// {
|
|
// behavior: 'append',
|
|
// linkProperties: {},
|
|
// content: function (node) {
|
|
// return [
|
|
// h('span.icon.icon-link header-anchor', {
|
|
// ariaLabel: toString(node) + ' permalink'
|
|
// })
|
|
// ];
|
|
// }
|
|
// }
|
|
// ],
|
|
|
|
// remarkHeadingsPermaLinks,
|
|
// getHeadings
|
|
]
|
|
});
|
|
|
|
export default config;
|