Tags and classes are lost
danielepolencic opened this issue · 8 comments
I noticed that when I try to convert hast with tags and classes to mdast, the details are lost.
What I was expecting is that the tags and classes are part of the mdast like so:
{
type: 'something',
data: {
hName: 'a',
hProperties: {
href: url,
rel: 'nofollow',
class: 'ping ping-link',
},
}
}I had a look at the code and the only element that supports this is code. If I want to add the change, I'd need to change the all function?
Markdown supports a subset of HTML features.
Classes and tags are part of the information which don't map 1:1 to CommonMark.
mdast-to-hast adds data.hName and data.hProperties as more of a workarounds to allow transform plugins to generate HTML types that don't have a Markdown equivalent.
What is the intended use case for keeping hName and hProperties metadata on the Markdown side?
Also see #38
I'd like to highlight a code block using prism.js.
The result is an HTML string. I have two choice (afaik):
- parse the string as HTML->hast and include it to the original mdast with hast->mdast. Use remark2rehype to generate the HTML for the full document
- include the HTML as raw html in the mdast directly. Use remark2rehype + rehype-raw to render the raw html
I'm using the latter at the moment because the hast->to->mdast doesn't keep classes or tags for<span>elements.
The other option I thought of would be to customise the remark2rehype transform. But from what I've seen, no one does that.
@danielepolencic would https://github.com/mapbox/rehype-prism work for your use case?
Generating the syntax highlights during the HTML render phase?
I had a look at that package, unfortunately, it doesn't work for me. I need to customise the rendering for Prism (with server-side highlights, etc.).
I found a way to customise the rendering with hast, I think that solves my issue at the moment.
Instead of working on the mdast tree, I do all the manipulations on the hast.
@danielepolencic retype-prism does support server-side highlighting? 🤔
Anyway, yes, doing things in hast instead of mdast is often the solution ;)
As far as I know, the line highlight plugin for Prism is only working in the browser.
https://github.com/PrismJS/prism/blob/master/plugins/line-highlight/prism-line-highlight.js#L3