MDX
MDX allows for certain things beyond what markdown is capable of. Content here will discuss using those features to augment or modify the default content layout.
It’s extremely important that for any rich text, or images represented through mark down, that they are left aligned. This is true even if they are within a component. Otherwise it will be processed as a regular string.
Frontmatter
You can declare frontmatter in your
.mdx
- : Main page title: search results and SEOtitle
- : SEO and search resultsdescription
- : Enter a date that the page was last modified to be displayed at the bottom left corner of the page. Refer to the IBM Style guide for the correct syntax.date
- : just SEO (optional)keywords
- : if true, page will be excluded from searchhiddenFromSearch
---title: Markdowndescription: Usage instructions for the Markdown componentkeywords: 'ibm,carbon,gatsby,mdx,markdown'date: 27 January 2021hiddenFromSearch: true---
Smart quotes
The theme has a remark for processing straight quotes, into ‘smart’ quotes (”). However, this plugin isn’t able to process text used in custom MDX components. When using quotes in custom components, content authors should manually use “smart quotes” to adhere to the IBM Design Language content guidelines.
Custom title
You can export a
Title
Note: You still need to provide a regular string title to the frontmatter for search, navigation, and the HTML header title to work.
---title: MDXdescription: custom title page---export const Title = () => (<span>First line <br /> Second line</span>