How do I make Code Blocks work with MDX JS Loader?

[deadcoder0904]

I am trying to follow https://ped.ro/blog/code-blocks-but-better

I want to use it because it highlights code blocks on particular lines, particular keywords, show preview with code, different themes & bunch of other features so it's very interactive.

I want to make my own blog which is just a clone of https://github.com/tailwindlabs/blog.tailwindcss.com/ to have it.

I am having a hard time converting the styles part from MDX Bundler into MDX JS Loader especially after the heading Part 2 - UI

He is using Stiches & I want to use Tailwind. Where do I put those styles so I can have different colored themes?

Another part under Part 3 - Component substitution, he is using XDMs Component Substitution. Where do I put the Pre, RegisterLink & H component?

[ChristianMurphy]

@peduarte, as the author of the blog post, may be able to better answer questions on the post.

[deadcoder0904]

Yeah, I've asked him as well. I have actually reached a lot ahead since I posted this question. Almost 99% there.

Just need Pedro to answer some final questions or if you guys know it :)

[peduarte]

@deadcoder0904 PR for you https://github.com/deadcoder0904/better-code-blocks/pull/1/files

[deadcoder0904]

Thank you @peduarte, but $$lineNumbers is also missing from your blog post so that was the source of my confusion haha. And also, the styles mismatch in the blog post & the Github repo.

Can you answer my 1 last question? You don't have to send a PR. This will get the project done.

code gets access to theme properly but pre doesn't. pre gets access to theme by going through children.props?.theme which is weird. But, you access it easily as you are using MDX Bundler.

I have used MDXComponents properly. I don't think XDM or MDX Bundler does some magic underhood so that I have to change underlying rehype plugins but the data I get is weird.

cc @wooorm as it's probably related to XDM or rehype. I just need to know if I need to change the AST or not?

[peduarte]

@deadcoder0904 yeah I can update the post. I mentioned a few times the post isn't a tutorial, its just to give people ideas of what they can do, it wasn't supposed to be copied 1:1, mostly to serve as a source of inspiration.

Regarding the theme stuff, I don't know, sorry. I've made it work to suit my needs only.

[deadcoder0904]

@peduarte Cool, thanks for all the help. I'll figure out the last part :)