Failed to detect the language.
smroutes opened this issue · comments
Hi, I was integrating [rehype-pretty-code](https://github.com/atomiks/rehype-pretty-code) with [mdx-bundler](https://www.npmjs.com/package/mdx-bundler} and notice that, the highlight is not working as expected. But When I pass the defaultLang it works fine with that language only. It seems like the highlighter not able to detect the language, any help ?
Here is the MDX-Bundler config
{
source: mdxContent,
mdxOptions(options, frontmatter) {
// this is the recommended way to add custom remark/rehype plugins:
// The syntax might look weird, but it protects you in case we add/remove
// plugins in the future.
options.remarkPlugins = [...(options.remarkPlugins ?? []), remarkGfm]
options.rehypePlugins = [...(options.rehypePlugins ?? []),
rehypePrism,
[rehypePrettyCode, {
theme: "github-dark",
defaultLang: "js",
transformers: [transformerNotationDiff()],
onVisitLine(node: { children: string | any[] }) {
// Prevent lines from collapsing in `display: grid` mode, and allow empty
// lines to be copy/pasted
if (node.children.length === 0) {
node.children = [{ type: "text", value: " " }]
}
},
onVisitHighlightedLine(node: { properties: { className: string[] } }) {
node.properties.className.push("line--highlighted")
},
onVisitHighlightedWord(node: { properties: { className: string[] } }) {
node.properties.className = ["word--highlighted"]
},
},],
[rehypeAutolinkHeadings, {
properties: {
className: ["subheading-anchor"],
ariaLabel: "Link to section",
},
}],
[rehypeHighlight, {}]
]
return options
},
grayMatterOptions: options => {
options.excerpt = true
return options
},
}tested with below md which is not working
<article class="prose">
<h1>Garlic bread with cheese: What the science tells us</h1> // [!code --]
<h1>Garlic bread with cheese: What the science tells us 1</h1> // [!code ++]
<p>
For years parents have espoused the health benefits of eating garlic bread
with cheese to their children, with the food earning such an iconic status
in our culture that kids will often dress up as warm, cheesy loaf for
Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a
series of rabies cases springing up around the country.
</p>
</article>
Slight aside - I noticed this in your code
// Prevent lines from collapsing in `display: grid` mode, and allow empty
// lines to be copy/pasted
if (node.children.length === 0) {
node.children = [{ type: "text", value: " " }]
}
Are you having this problem with all languages or just plaintext? May be related to the issue I just opened. ( #157 )
@ben519 that was necessary before the grid option got added in a version some months ago. It's not necessary in the latest versions.
@smroutes I'm not sure I understand your problem. Are you expecting it to detect the language automatically? You need to explicitly specify it:
```html
<article class="prose">
<h1>Garlic bread with cheese: What the science tells us</h1> // [!code --]
<h1>Garlic bread with cheese: What the science tells us 1</h1> // [!code ++]
<p>
For years parents have espoused the health benefits of eating garlic bread
with cheese to their children, with the food earning such an iconic status
in our culture that kids will often dress up as warm, cheesy loaf for
Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a
series of rabies cases springing up around the country.
</p>
</article>
```"@atomiks, the issue is the language highlighting feature fails to work for any language other than the default one. it appears that mentioning the language explicitly after the triple backticks (```) causes the highlighting to break.
To illustrate, if the default language is set to JS and the code snippet is as follows:
` ` `
module.exports ={}
` ` `
The highlighting functions correctly. However, when attempting to specify the language explicitly like this:
` ` `js
module.exports ={}
` ` `
in short, I must refrain from explicitly specifying any language in the code. This way, the default language will be automatically selected, and the highlighting will be applied accordingly.
Will need a minimal reproduction repo for this issue. Specifying a language works out of the box and has extensive tests for it. Some config or other plugins may be causing conflicts in your setup - probably rehypePrism and rehypeHighlight? What happens if you delete them?