From 13c52582c43605e97784ba50f7deeea25f7abca4 Mon Sep 17 00:00:00 2001 From: matthieu42morin Date: Sun, 28 Apr 2024 01:13:28 +0200 Subject: [PATCH] 2slash highlighter --- mdsvex.config.js | 83 ++++++++++++++++++++++++++++++++++++++++-------- package.json | 27 ++++++++++++++-- 2 files changed, 93 insertions(+), 17 deletions(-) diff --git a/mdsvex.config.js b/mdsvex.config.js index 028ba3c..0975c67 100644 --- a/mdsvex.config.js +++ b/mdsvex.config.js @@ -1,14 +1,25 @@ import { defineMDSveXConfig as defineConfig } from 'mdsvex'; -import remarkExternalLinks from 'remark-external-links'; -import remarkSetImagePath from './src/lib/utils/remark-set-image-path.js'; -import remarkLinkWithImageAsOnlyChild from './src/lib/utils/remark-link-with-image-as-only-child.js'; -import rehypeImgSize from 'rehype-img-size'; - +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 { highlightCode } from './src/lib/utils/highlighter.js'; +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({ @@ -16,6 +27,33 @@ const config = defineConfig({ 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 in .md files */ // layout: { // blog: './src/lib/components/blog/_blog-layout.svelte', @@ -25,7 +63,14 @@ const config = defineConfig({ /* Plugins */ rehypePlugins: [ [rehypeSlug], - [rehypeImgSize] + [rehypeAutolinkHeadings, { behavior: 'wrap' }], + [ + rehypeExternalLinks, + { + rel: ['nofollow', 'noopener', 'noreferrer', 'external'], + target: '_blank' + } + ] // [ // /** Custom rehype plugin to add loading="lazy" to all images */ // () => { @@ -42,14 +87,24 @@ const config = defineConfig({ remarkPlugins: [ [remarkToc, { maxDepth: 3, tight: true }], [ - (remarkExternalLinks, + remarkFFF, { - target: '_blank' - }) + presets: [], + target: 'mdsvex', + autofill: { + provider: 'fs', + path: (path) => path.replace('/src/routes/', '/urara/') + }, + strict: { + media: { + type: 'string', + array: false + } + } + } ], - [remarkUnwrapImages], - remarkSetImagePath, - remarkLinkWithImageAsOnlyChild + [readingTime, { wpm: 200 }], + [remarkFootnotes, { inlineNotes: true }] // [ // headings, // { diff --git a/package.json b/package.json index f82cee6..af03882 100644 --- a/package.json +++ b/package.json @@ -21,9 +21,14 @@ "test": "vitest", "lint": "prettier --plugin-search-dir . --check . && eslint .", "format": "prettier --plugin-search-dir . --write .", + "generate:images": "node ./generate-responsive-image-data.js", "test-ct": "playwright test -c playwright-ct.config.ts" }, "devDependencies": { + "@bitmachina/highlighter": "1.0.0-alpha.5", + "@fontsource/cooper-hewitt": "^5.0.11", + "@fontsource/fira-mono": "^5.0.13", + "@kitbook/mdsvex-shiki-twoslash": "1.0.0-beta.31", "@playwright/test": "^1.41.2", "@skeletonlabs/skeleton": "2.0.0", "@skeletonlabs/tw-plugin": "0.1.0", @@ -32,33 +37,47 @@ "@tailwindcss/typography": "0.5.9", "@types/js-cookie": "^3.0.6", "@types/node": "20.5.7", + "@types/object-hash": "^3.0.6", "@types/prismjs": "^1.26.3", "@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/parser": "^5.62.0", "autoprefixer": "10.4.15", + "cloudinary": "^2.2.0", "emoji-regex": "^10.3.0", "eslint": "^8.56.0", "eslint-config-prettier": "^8.10.0", "eslint-plugin-svelte": "^2.35.1", + "fenceparser": "^2.2.0", + "github-slugger": "^2.0.0", "js-cookie": "^3.0.5", + "mdast-util-to-string": "^4.0.0", + "mdsvex-reading-time": "^1.0.4", + "object-hash": "^3.0.0", "postcss": "8.4.29", "prettier": "^2.8.8", "prettier-plugin-svelte": "^2.10.1", + "reading-time": "^1.5.0", "rehype-autolink-headings": "^7.1.0", + "rehype-external-links": "^3.0.0", "rehype-img-size": "^1.0.1", "rehype-slug": "^6.0.0", - "remark-external-links": "^9.0.1", + "remark-fff": "^1.2.1", + "remark-footnotes": "^4.0.1", "remark-toc": "^9.0.0", "remark-unwrap-images": "^4.0.0", "sass": "^1.71.0", - "shiki": "^1.1.6", + "shiki": "^1.3.0", + "shiki-themes": "^0.2.7", + "shiki-twoslash": "^3.1.2", "svelte": "^4.2.11", "svelte-check": "^3.6.4", + "tailwind-merge": "^2.2.2", "tailwindcss": "3.3.3", "tslib": "^2.6.2", "typescript": "^5.3.3", "unist-util-visit": "^5.0.0", "vite": "^5.1.3", + "vite-imagetools": "^7.0.1", "vite-plugin-tailwind-purgecss": "0.2.0", "vitest": "^0.34.6" }, @@ -71,13 +90,15 @@ "@threlte/core": "^6.1.1", "@threlte/extras": "^8.7.5", "@yushijinhun/three-minifier-rollup": "^0.4.0", + "front-matter": "^4.0.2", "highlight.js": "11.8.0", "latest": "^0.2.0", "linkedom": "^0.15.6", "mdsvex": "^0.11.0", "prismjs": "^1.29.0", "rss": "^1.2.2", - "svelte-preprocess": "^5.1.3" + "svelte-preprocess": "^5.1.3", + "vanilla-lazyload": "^19.1.3" }, "type": "module" }