2slash highlighter
This commit is contained in:
parent
15bc3ce30c
commit
13c52582c4
|
@ -1,14 +1,25 @@
|
||||||
import { defineMDSveXConfig as defineConfig } from 'mdsvex';
|
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 remarkUnwrapImages from 'remark-unwrap-images';
|
||||||
import remarkToc from 'remark-toc';
|
import remarkToc from 'remark-toc';
|
||||||
import rehypeSlug from 'rehype-slug';
|
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} */
|
/** @type {import('mdsvex').MdsvexOptions} */
|
||||||
const config = defineConfig({
|
const config = defineConfig({
|
||||||
|
@ -16,6 +27,33 @@ const config = defineConfig({
|
||||||
smartypants: {
|
smartypants: {
|
||||||
dashes: 'oldschool'
|
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 */
|
/* Wait for skeleton to implement Prismjs, for now use <CodeBlock /> in .md files */
|
||||||
// layout: {
|
// layout: {
|
||||||
// blog: './src/lib/components/blog/_blog-layout.svelte',
|
// blog: './src/lib/components/blog/_blog-layout.svelte',
|
||||||
|
@ -25,7 +63,14 @@ const config = defineConfig({
|
||||||
/* Plugins */
|
/* Plugins */
|
||||||
rehypePlugins: [
|
rehypePlugins: [
|
||||||
[rehypeSlug],
|
[rehypeSlug],
|
||||||
[rehypeImgSize]
|
[rehypeAutolinkHeadings, { behavior: 'wrap' }],
|
||||||
|
[
|
||||||
|
rehypeExternalLinks,
|
||||||
|
{
|
||||||
|
rel: ['nofollow', 'noopener', 'noreferrer', 'external'],
|
||||||
|
target: '_blank'
|
||||||
|
}
|
||||||
|
]
|
||||||
// [
|
// [
|
||||||
// /** Custom rehype plugin to add loading="lazy" to all images */
|
// /** Custom rehype plugin to add loading="lazy" to all images */
|
||||||
// () => {
|
// () => {
|
||||||
|
@ -42,14 +87,24 @@ const config = defineConfig({
|
||||||
remarkPlugins: [
|
remarkPlugins: [
|
||||||
[remarkToc, { maxDepth: 3, tight: true }],
|
[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,
|
// headings,
|
||||||
// {
|
// {
|
||||||
|
|
27
package.json
27
package.json
|
@ -21,9 +21,14 @@
|
||||||
"test": "vitest",
|
"test": "vitest",
|
||||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||||
"format": "prettier --plugin-search-dir . --write .",
|
"format": "prettier --plugin-search-dir . --write .",
|
||||||
|
"generate:images": "node ./generate-responsive-image-data.js",
|
||||||
"test-ct": "playwright test -c playwright-ct.config.ts"
|
"test-ct": "playwright test -c playwright-ct.config.ts"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"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",
|
"@playwright/test": "^1.41.2",
|
||||||
"@skeletonlabs/skeleton": "2.0.0",
|
"@skeletonlabs/skeleton": "2.0.0",
|
||||||
"@skeletonlabs/tw-plugin": "0.1.0",
|
"@skeletonlabs/tw-plugin": "0.1.0",
|
||||||
|
@ -32,33 +37,47 @@
|
||||||
"@tailwindcss/typography": "0.5.9",
|
"@tailwindcss/typography": "0.5.9",
|
||||||
"@types/js-cookie": "^3.0.6",
|
"@types/js-cookie": "^3.0.6",
|
||||||
"@types/node": "20.5.7",
|
"@types/node": "20.5.7",
|
||||||
|
"@types/object-hash": "^3.0.6",
|
||||||
"@types/prismjs": "^1.26.3",
|
"@types/prismjs": "^1.26.3",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||||
"@typescript-eslint/parser": "^5.62.0",
|
"@typescript-eslint/parser": "^5.62.0",
|
||||||
"autoprefixer": "10.4.15",
|
"autoprefixer": "10.4.15",
|
||||||
|
"cloudinary": "^2.2.0",
|
||||||
"emoji-regex": "^10.3.0",
|
"emoji-regex": "^10.3.0",
|
||||||
"eslint": "^8.56.0",
|
"eslint": "^8.56.0",
|
||||||
"eslint-config-prettier": "^8.10.0",
|
"eslint-config-prettier": "^8.10.0",
|
||||||
"eslint-plugin-svelte": "^2.35.1",
|
"eslint-plugin-svelte": "^2.35.1",
|
||||||
|
"fenceparser": "^2.2.0",
|
||||||
|
"github-slugger": "^2.0.0",
|
||||||
"js-cookie": "^3.0.5",
|
"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",
|
"postcss": "8.4.29",
|
||||||
"prettier": "^2.8.8",
|
"prettier": "^2.8.8",
|
||||||
"prettier-plugin-svelte": "^2.10.1",
|
"prettier-plugin-svelte": "^2.10.1",
|
||||||
|
"reading-time": "^1.5.0",
|
||||||
"rehype-autolink-headings": "^7.1.0",
|
"rehype-autolink-headings": "^7.1.0",
|
||||||
|
"rehype-external-links": "^3.0.0",
|
||||||
"rehype-img-size": "^1.0.1",
|
"rehype-img-size": "^1.0.1",
|
||||||
"rehype-slug": "^6.0.0",
|
"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-toc": "^9.0.0",
|
||||||
"remark-unwrap-images": "^4.0.0",
|
"remark-unwrap-images": "^4.0.0",
|
||||||
"sass": "^1.71.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": "^4.2.11",
|
||||||
"svelte-check": "^3.6.4",
|
"svelte-check": "^3.6.4",
|
||||||
|
"tailwind-merge": "^2.2.2",
|
||||||
"tailwindcss": "3.3.3",
|
"tailwindcss": "3.3.3",
|
||||||
"tslib": "^2.6.2",
|
"tslib": "^2.6.2",
|
||||||
"typescript": "^5.3.3",
|
"typescript": "^5.3.3",
|
||||||
"unist-util-visit": "^5.0.0",
|
"unist-util-visit": "^5.0.0",
|
||||||
"vite": "^5.1.3",
|
"vite": "^5.1.3",
|
||||||
|
"vite-imagetools": "^7.0.1",
|
||||||
"vite-plugin-tailwind-purgecss": "0.2.0",
|
"vite-plugin-tailwind-purgecss": "0.2.0",
|
||||||
"vitest": "^0.34.6"
|
"vitest": "^0.34.6"
|
||||||
},
|
},
|
||||||
|
@ -71,13 +90,15 @@
|
||||||
"@threlte/core": "^6.1.1",
|
"@threlte/core": "^6.1.1",
|
||||||
"@threlte/extras": "^8.7.5",
|
"@threlte/extras": "^8.7.5",
|
||||||
"@yushijinhun/three-minifier-rollup": "^0.4.0",
|
"@yushijinhun/three-minifier-rollup": "^0.4.0",
|
||||||
|
"front-matter": "^4.0.2",
|
||||||
"highlight.js": "11.8.0",
|
"highlight.js": "11.8.0",
|
||||||
"latest": "^0.2.0",
|
"latest": "^0.2.0",
|
||||||
"linkedom": "^0.15.6",
|
"linkedom": "^0.15.6",
|
||||||
"mdsvex": "^0.11.0",
|
"mdsvex": "^0.11.0",
|
||||||
"prismjs": "^1.29.0",
|
"prismjs": "^1.29.0",
|
||||||
"rss": "^1.2.2",
|
"rss": "^1.2.2",
|
||||||
"svelte-preprocess": "^5.1.3"
|
"svelte-preprocess": "^5.1.3",
|
||||||
|
"vanilla-lazyload": "^19.1.3"
|
||||||
},
|
},
|
||||||
"type": "module"
|
"type": "module"
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue