Notion supports a rich set of text formatting options that go far beyond basic bold and italic. This post showcases every text annotation supported by notion-to-jsx.

The fundamental text formatting options are available in every writing tool, but Notion makes them easy to combine.

Bold text draws the reader's eye to the most important words in a sentence. Use it sparingly for maximum impact.

Italic text adds emphasis or indicates titles of works, foreign words, or technical terms being introduced for the first time.

Underlined text is useful for highlighting key phrases, though it should be used carefully to avoid confusion with links.

Strikethrough text indicates content that has been removed, corrected, or is no longer relevant. It is commonly used in changelogs and revision notes.

Inline code is perfect for referencing function names like useState, variable names like isPublished, or CLI commands like npm install.

The real power comes from combining multiple annotations together:

Bold and italic text commands strong attention. Use it for critical warnings or key takeaways.

Bold code is great for emphasizing important function names in documentation, like getServerSideProps or useEffect.

Italic code can indicate a placeholder or variable concept, such as yourApiKey or databaseId.

Strikethrough bold is useful for showing deprecated features that were once important.

Notion supports 10 text colors and 10 background colors. These add visual variety and can be used to categorize or emphasize different types of information.

Text colors include: default, gray, brown, orange, yellow, green, blue, purple, pink, and red. Each color can be applied to any text span.

Background colors provide highlighted effects: gray background, brown background, orange background, yellow background, green background, blue background, purple background, pink background, and red background.

Here are some common patterns used in technical blog posts:

API stands for Application Programming Interface. It defines how different software components should interact with each other.

SSR stands for Server-Side Rendering. It is a technique where the HTML is generated on the server for each request.

Important: Always set your isPublished property to true before deploying. Unpublished posts will not appear on the production site.

1. Install the package with npm install notion-to-jsx
2. Configure your Notion API credentials in .env
3. Fetch your page blocks using getPageBlocks()
4. Render the content with the <Renderer /> component

Links are rendered as clickable text: visit the Notion API documentation for more details.

You can link to GitHub repositories, npm packages, or any external URL.

All text colors and formatting automatically adapt to dark mode. The library uses CSS variables to ensure proper contrast in both themes. Text that is readable in light mode will remain readable when the user switches to dark mode.

Experiment with different formatting combinations to find the style that works best for your content!