Prism plugin for remark

[swyxio]

Subject of the feature

i'd like a first party plugin for prismjs

Problem

there's one for highlight-js, but none for prismjs

Expected behaviour

i should be able to add a prismjs plugin to remark

Alternatives

What are the alternative solutions? Please describe what else you have considered?

having to use https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs and run it through the gatsby process.

[ChristianMurphy]

@sw-yx there is https://github.com/mapbox/rehype-prism available today that can be used for highlighting. The reason there isn't a remark plugin currently, is that there isn't a markdown extension for encoding syntax highlights. Only codeblocks with flags, which give hints to compiler (rehype for example) on what highlight should be done in the final format (HTML for example).

Did you have a markdown format for highlights in mind? Or would highlighting in HTML handle your use case?

[swyxio]

thanks for the quick reply! i am VERY new to this entire ecosystem so i am probably missing a lot of context and dont fully understand your question.

i guess whatever works in github flavored markdown as well as is understood by gatsby remark is very very familiar to me and i wouldnt mind just going with that.

so no, i dont think highlighting in HTML is what i want? i am honestly not sure

[swyxio]

btw this example here is the first time i've seen unified, rehype and remark working together. its all very confusing to me and explanations and examples of these are very very very very very important to place everywhere

[johno]

Yeah we should add docs around this to the handbook since it's not super clear how it all works until one gets quite familiar with the ecosystem.

[wooorm]

so no, i dont think highlighting in HTML is what i want? i am honestly not sure

@sw-yx What’s happening here is an XY problem, you think you want X, Christian’s asking follow up questions because he suspects there may be something else going on: it’s probably Y.

Could you expand on why you want prism in remark? What do you want to do?

explanations and examples of these are very very very very very important to place everywhere

I understand it’s confusing, but I don’t think placing all possible usage examples in 250 projects is sustainable. There are examples of combining unified, remark, and rehype, in some places already, so could you list the places you looked for information on Prism, or on combining remark and rehype?

[swyxio]

Could you expand on why you want prism in remark? What do you want to do?

sure. i want to write markdown with code in it, pass it in to remark with the right plugins, and output html which can then be hosted together with the prism css (and possibly JS). pretty much exactly what happens with gatsby-remark-prismjs.

tbh i have since discovered https://github.com/octref/shiki/ and so i dont actually care about using prismjs anymore.. this issue was created when i thought that prismjs was the best in class approach for syntax highlighting, because it is so popular in the gatsby world. i'm actually happy to close this issue until someone else comes along and wants a plugin for this!

don’t think placing all possible usage examples in 250 projects is sustainable

haha, i dont think so too. i was definitely exaggerating. i guess the branding about unifiedjs is confusing for me. i get that its an "umbrella", i get that it "powers" these various awesome things, but i dont see how they hook into each other until i dig down to the unified readme. this then raises the question of whether remark/rehype/rewhatever stand alone at all or are they just plugins (to unified) that have their own plugins. idk. maybe its just me. i'm happy to drop it.

[wooorm]

Right! I think one important thing that’s missing from your understanding of unified, currently, is that unified is the base, and it works on syntax trees. remark is an important part of that: its ecosystem deals with markdown syntax trees (mdast). But, if you’re going to HTML, you’re dealing with a different syntax-tree (hast), which is covered by the rehype ecosystem.

This is something that’s different with unified, and specifically content, compared to for example Babel, because with that you’re staying in JavaScript land. It’s not suddenly, for example, CSS.

Historically, rehype didn’t exist, it gradually came to be, that’s why you’ll see that remark-highlight.js exists, but we’ve started adding notifications to the readmes that you’d probably preferably should use, in this case, rehype-highlight. Since then, @mapbox/rehype-prism was created, and many more plugins, including rehype-shiki!

I think this part of the “mental model” may especially be hard because Gatsby focusses on the first tree: remark. Its plugins start with remark, but typically do stuff with rehype as well, but in a Gatsby-specific way. So the “remark” name there is a bit different from what “remark” itself is.

idk. maybe its just me. i'm happy to drop it.

Definitely not! The whole collective recently received different marketing, and is rapidly getting more traction. Before, users were typically more the people that wanted to build compilers and the like (such as John with MDX). It’s a really powerful collective, it can do so many things. I don’t think there’s a way to explain it quickly that matches all the ways the 250 projects can be mixed up and used together.

You’re not the only one, and I’d like to make this better.

[swyxio]

you're very kind. thanks! this helped to explain it. so good to know rehype shiki exists! i will try to move to that at some point.

[swyxio]

btw i just found this guide: https://unifiedjs.com/using-unified.html

wowwww. i should have done this way earlier. now it really clicks. would recommend promoting this more somehow

[Murderlon]

would recommend promoting this more somehow

Agree! Making them more prominent as well as adding more introductory guides is something we'd like to do.

[swyxio]

btw i moved to rehype shiki and it was seamless. would recommend.