This might be a bit confusing but the template includes 2 mdx-components.tsx files. One on the top-level. And one in app/_constants/.

You can safely ignore the one on the top-level. This file is needed in order to use MDX within NextJS and I didn't want to mess with it.

So, for any changes you want to make to MDX rendering, refer to the file app/_constants/mdx-components.tsx.

These custom MDX components will be rendered when being called within any .mdx file throughout the app.

Currently, there are the following custom MDX components.

• h1: Will provide the h1 tag with an id property (e.g. for linking).
• h2: Will provide the h2 tag with an id property (e.g. for linking).
• h3: Will provide the h3 tag with an id property (e.g. for linking).
• HowToStep: Will provide a step within the Step-By-Step-Guide, with its own index and title.
• CodeBlock: Will provide a custom code block, with syntax highlighting.
• SubSectionOuterContainer: Will provide basic section styling.
• SubSectionInnerContainer: Will provide basic section styling.
• SubSectionTitle: Will provide basic section title styling.

For example, if your custom h1 styling is needed:

// Instead of 
// # Title1
// You can use
<h1>Title1</h1>