Use custom code component from MDXComponents in Remark plugin

[deadcoder0904]

I have a list.js Remark Plugin which styles ul>li elements:

const visit = require('unist-util-visit')
const toHast = require('mdast-util-to-hast')
const toHtml = require('hast-util-to-html')

module.exports.list = () => {
	return (tree) => {
		visit(tree, 'list', (node) => {
			const str = []
			str.push(`<ul class="">`)
			for (let i = 0; i < node.children.length; i++) {
				for (let j = 0; j < node.children[i].children.length; j++) {
					const k = node.children[i].children[j].children.map((l) => toHtml(toHast(l))).join('')
					str.push(`<li class="">${k}</li>`)
				}
			}

			str.push(`</ul>`)

			if (node.lang !== null) {
				node.type = 'html'
				node.value = str.filter(Boolean).join('')
			}
		})
	}
}

My li tag contains a code (notice the <Image> below) tag in .mdx file & it looks like:

• Automatic Image Optimization -> <Image> component allows optimizing & resizing images before serving them to the user

My MDX components file looks like:

src/components/mdx/index.ts

import { Code } from '@/components/mdx/Code'

export const MDXComponents = {
	inlineCode: Code,
}

src/components/mdx/Code.tsx

import { HTMLAttributes } from 'react'

export const Code = ({ className = '', ...props }: HTMLAttributes<HTMLElement>) => (
	<code
		className={`${className} p-1 overflow-x-auto bg-gray-900 text-blue-gray-200 rounded-md text-base`}
		{...props}
	/>
)

I want to use all the Code tag from above in my list Remark Plugin where the code tag is placed.

How can I use the code tag without having to repeat the class names in my list Remark plugin as it would lead to duplication? And the more custom tags I add, the more I have to duplicate classes for styling.

[wooorm]

In list.js, you are working with an AST: objects representing markdown constructs (e.g., an ATX heading). You’re removing all that wonderful information by replacing that information with a raw string. After you do that, well, all information is lost.

Again, you are falling for an XY problem. You are asking for what you think is the solution, but I’m looking for the actual question.

Why not use what tailwind provides? https://github.com/tailwindlabs/tailwindcss-typography

[deadcoder0904]

Got it.

Again, you are falling for an XY problem.

That's probably the 3rd time you've told me this 😂

Why not use what tailwind provides?

Well, although it's great, I wanted to style everything myself. I didn't think this would get so complex because it looked really easy.

So the final answer is we can't do it correct?

[wooorm]

Well, although it's great, I wanted to style everything myself. I didn't think this would get so complex because it looked really easy.

It doesn’t have to be complicated, but you’re going down a rabbit hole that you don’t have to go down 🤷‍♂️

The answer can be done with: micromark/micromark#40 (reply in thread)

[deadcoder0904]

Thinking back I should've used Tailwind Typography. I thought it wasn't totally customizable but I couldn't have been more wrong.

[deadcoder0904]

I don't think AST & JSX can be mixed so the question is wrong.

Went with another approach that duplicates a little bit of code → micromark/micromark#40 (comment)

But using Tailwind Typography might be a better solution :)