The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Add line-numbers to pre tags with next-mdx-remote

TODO: Pull subtitle into page object

### NOTE - This may not be the best way to do this

I'm having problems with line highlighting with errors like:

code_start_default_section code_end_default_section

This adds the className to all the pre tags. That's fine in this case. Just something to be aware of.

According to this, there's no way to send extra data down in a code fence besides the language. If you want to do more, you'll need to make a new component

Reference: next-mdx-remote

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Add line-numbers to pre tags with next-mdx-remote

-- p

### NOTE - This may not be the best way to do this

-- p

I'm having problems with line highlighting with errors like:

-- code/

Warning: Prop `className` did not match. Server: "line-numbers language-jsx" Client: "line-numbers"

-- /code

-- p

I'm now looking at this:

-- p

https://github.com/FormidableLabs/prism-react-renderer

-- p

This is how I got line numbers working with Prism

-- code/
-- jsx

<MDXRemote
    {...source}
    components={{
        pre: (props) => (
            <pre className="line-numbers">{props.children}</pre>
        ),
    }}
/>

-- /code

-- p

This adds the className to all the pre tags. That's fine in this case. Just something to be aware of.

-- p

According to <<link|this|https://mdxjs.com/table-of-components/>>, there's no way to send extra data down in a code fence besides the language. If you want to do more, you'll need to make a new component

-- p

Reference: <<link|next-mdx-remote|https://github.com/hashicorp/next-mdx-remote>>


-- categories
-- Miscellaneous

-- metadata
-- date: 2022-01-08 22:00:32
-- id: 23rwa4rx
-- status: scratch
-- type: post
-- SCRUBBED_NEO: false
-- site: aws