2slash highlighter

mdsvex.config.js

@@ -1,14 +1,25 @@
 import { defineMDSveXConfig as defineConfig } from 'mdsvex';
-import remarkExternalLinks from 'remark-external-links';
+import rehypeExternalLinks from 'rehype-external-links';
-import remarkSetImagePath from './src/lib/utils/remark-set-image-path.js';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import remarkLinkWithImageAsOnlyChild from './src/lib/utils/remark-link-with-image-as-only-child.js';
+import readingTime from 'mdsvex-reading-time';
-import rehypeImgSize from 'rehype-img-size';
-
 import remarkUnwrapImages from 'remark-unwrap-images';
 import remarkToc from 'remark-toc';
 import rehypeSlug from 'rehype-slug';
-
+import { visit } from 'unist-util-visit';
-// import { highlightCode } from './src/lib/utils/highlighter.js';
+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 <CodeBlock /> 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],
+		[readingTime, { wpm: 200 }],
-		remarkSetImagePath,
+		[remarkFootnotes, { inlineNotes: true }]
-		remarkLinkWithImageAsOnlyChild
 		// 	[
 		// 		headings,
 		// 		{

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"
 }