Does not work with the mdsvex plugin in SvelteKit

[leokolt]

Does not work with the mdsvex plugin in SvelteKit. He just writes in the code of the page that this is such a language, for example, ts:src/pages/index.js. This is what my configuration looks like in the file svelte.config.js .

import adapter from '@sveltejs/adapter-static';
//import adapter from '@sveltejs/adapter-vercel'
import sveltePreprocess from 'svelte-preprocess'
import { mdsvex } from 'mdsvex'
import rehypeCodeTitles from 'rehype-code-titles'

const mdsvexOptions = {
	extensions: ['.md'],
    rehypePlugins: [rehypeCodeTitles]
}

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter()
	},
    extensions: ['.svelte', '.md'],
    preprocess: [
        sveltePreprocess(),
        mdsvex(mdsvexOptions),
      ]


};

export default config;

Are you aware of this problem?

[rockchalkwushock]

@leokolt I am not familiar with Svelte or SvelteKit but I'm confident we can figure this out together.

Can you please post the following:

1. A screenshot of what you are seeing in the browser.
2. The output in the DOM for the related nodes.

Thank you!

[leokolt]

[rockchalkwushock]

@leokolt

Thank you for getting back to me with the requested information/resources!

It seems that the plugin is not being called by mdsvex in its pipeline internally or the pipeline is lacking a transform and thus the plugin fails silently. I can tell it is not being ran because their is no <div class="rehype-code-titles" >...</div> being inserted above the <pre /> You can see example input and output here.

I took a moment to browse the mdsvex docs and I see they do have a build pipeline that processes from MDAST to HAST via remark-rehype so I am unsure why the plugin would not be ran.

1. Are there any errors coming out in your terminal or in the browser console that line up with this?
2. Can you please try adding rehype-stringify to your project and call it before rehype-code-titles? My hunch is that remark-rehype is not quite doing everything that rehype does see test suite for remark-rehype and see source for rehype.

import adapter from '@sveltejs/adapter-static';
//import adapter from '@sveltejs/adapter-vercel'
import sveltePreprocess from 'svelte-preprocess'
import { mdsvex } from 'mdsvex'
import rehypeCodeTitles from 'rehype-code-titles'
+ import rehypeStringify from 'rehype-stringify'

const mdsvexOptions = {
    extensions: ['.md'],
-  rehypePlugins: [rehypeCodeTitles]
+  rehypePlugins: [rehypeStringify, rehypeCodeTitles]
}

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter()
	},
    extensions: ['.svelte', '.md'],
    preprocess: [
        sveltePreprocess(),
        mdsvex(mdsvexOptions),
      ]


};

export default config;

Please give that a try and let me know if that does fix your issue and I will make sure to document this issue in the README. I saw you opened an issue against mdsvex I am going to link it here as well. pngwn/MDsveX#534

[lubiah]

@rockchalkwushock @leokolt
I think I know where the problem is originating from.
I was also just wondering why my rehype plugin wasn't highlighting my code.

By default, mdsvex highlights code with prism. After highlighting, the highlighted content is inserted into the tree as raw.
Since @rockchalkwushock 's code uses visit to walk only elements of the tree, the type raw is not passed.

The solution

You need to pass highlight: false

const mdsvexOptions = {
	extensions: ['.md'],
        highlight: false,
    rehypePlugins: [rehypeCodeTitles]
}

@leokolt please try and see if this fixes your problem

[leokolt]

@rockchalkwushock Your method doesn't work at all. The result is the same as it was. @lubiah your method works, the title appears, only syntax highlighting in the code naturally stopped working) I think this is not a good solution, it will only come off as a temporary solution

[leokolt]

I installed the rehype-prism-plus plugin and now the backlight works. The specific functions of the rehype-prism-plus plugin itself do not work - highlighting specific lines and showing line numbers) But this is a completely different story)

[rockchalkwushock]

@lubiah

Thank you for your investigation. My hunch was correct in that the pipeline used by mdsvex that runs prior to the plugin in question was causing problems. Thank you for posting a temporary solution for others here in the issue. It is greatly appreciated.

@leokolt

By turning off mdsvex internal syntax highlighting it is now your responsibility to handle that as well as anything else that integration was doing.

In making the decision to use open source software you take on the responsibility of understanding the code you are brining into your project. I would highly advise you take the time to understand how the unified, remark, and rehype ecosystem work as well as read up on the tools you are using and how they integrate before opening issues against projects because it doesn't work with X technology.

Kindly note, it is not that the plugin does not work, it is that the plugin does not work for your use case. You are more than welcome to open a PR to introduce changes to the plugin that would solve your issue and those who encounter the same issue in the future; or fork this repository and build your own solution. The whole reason this plugin exists is that I had a problem, I solved that problem, I released the solution to the greater community to give back.

I am closing this issue as it is an upstream issue and I will not be taking the time to support every framework's pipeline for processing markdown or mdx files.

[SBV2020]

I have similar issue as @leokolt but luckily from a random config and luckily got it working. So, first I have to disable highlight as everyone mention in this post and then use rehype-pretty-code which is also based on shiki and everything is good to go.

Here is all the config I have:

...
  extensions: [".svelte", ".md"], preprocess: [preprocess({
    postcss: true
  }), mdsvex({
    extensions: [".md"],
    highlight: false,
    rehypePlugins: [
      rehypeCodeTitles
      , rehypePrettyCode
      , rehypeSlug /// RemarkToc will add ID to heading
      , [rehypeAutolinkHeadings, {behavior: "wrap"}] /// Add anchor link on the heading. This one depend on rehypeSlug
    ],
    remarkPlugins: [
      // github flavored markdown
      remarkGfm
      , [remarkToc, {heading: "(table[ -]of[ -])?contents?|toc"}]
      // smart typographic punctuation like real quotes
      , remarkSmartypants,
    ],
  })]
};

Sample Result Image:

Note you also need to add the css from rehype-code-titles into your global css.