2slash highlighter
This commit is contained in:
matthieu42morin
parent
15bc3ce30c
commit
13c52582c4
|
|
@ -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 <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],
|
||||
remarkSetImagePath,
|
||||
remarkLinkWithImageAsOnlyChild
|
||||
[readingTime, { wpm: 200 }],
|
||||
[remarkFootnotes, { inlineNotes: true }]
|
||||
// [
|
||||
// headings,
|
||||
// {
|
||||
|
|
|
|||
27
package.json
27
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"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue