Highlight inline code such as \`console.log("hello");{:js}\`
jeremt opened this issue · comments
Jeremie Taboada commented
It would be nice to be able to apply highlighting to inline blocks. To do so, I tried two approaches, which only works for <pre>
blocks:
- Using rehype-pretty-code plugin :
import adapter from '@sveltejs/adapter-auto';
import {mdsvex} from 'mdsvex';
import {vitePreprocess} from '@sveltejs/kit/vite';
import rehypePrettyCode from 'rehype-pretty-code';
/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexOptions = {
extensions: ['.mdx'],
highlight: false,
remarkPlugins: [],
rehypePlugins: [
[
rehypePrettyCode,
{
keepBackground: false,
theme: {
dark: 'dark-plus',
light: 'light-plus',
},
},
],
],
};
/** @type {import('@sveltejs/kit').Config} */
const config = {
extensions: ['.svelte', '.mdx'],
preprocess: [vitePreprocess(), mdsvex(mdsvexOptions)],
kit: {
adapter: adapter(),
},
};
export default config;
- Using highlight option :
import shiki from 'shiki';
import adapter from '@sveltejs/adapter-auto';
import {mdsvex, escapeSvelte} from 'mdsvex';
import {vitePreprocess} from '@sveltejs/kit/vite';
/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexOptions = {
extensions: ['.mdx'],
highlight: {
highlighter: async (code, lang) => {
console.log(code, lang);
const highlighter = await shiki.getHighlighter({themes: ['dark-plus', 'light-plus']});
const darkHtml = escapeSvelte(highlighter.codeToHtml(code, {lang}));
const lightHtml = escapeSvelte(highlighter.codeToHtml(code, {lang, theme: 'light-plus'}));
return `{@html \`${darkHtml}${lightHtml}\` }`;
},
},
};
/** @type {import('@sveltejs/kit').Config} */
const config = {
extensions: ['.svelte', '.mdx'],
preprocess: [vitePreprocess(), mdsvex(mdsvexOptions)],
kit: {
adapter: adapter(),
},
};
export default config;
Is it impossible to do using MDsvex or am I missing something? 🤔
PS: it works nicely using parsers like unified or contentlayer with next:
unified()
.use(remarkParse)
.use(remarkRehype)
.use(rehypePrettyCode, {
keepBackground: false,
theme: {
dark: 'dark-plus',
light: 'light-plus',
},
})
.use(rehypeStringify);
Lucretius Biah commented
@jeremt I was able to do this with mdsvex and I used the same syntax as you did. It's possible