Style properties reference

This page provides a comprehensive reference for all style properties available in react-native-enriched-markdown, passed through the markdownStyle prop.

important

Unless noted otherwise, this reference covers the read-only EnrichedMarkdownText renderer and its MarkdownStyle. The editable EnrichedMarkdownTextInput styles a smaller subset - see Editor styles.

Platform defaults

You do not need to set anything to get a polished result. Every element ships with defaults tuned to the platform it renders on, so a document looks at home on each without configuration:

Fonts. Text uses the platform system font (San Francisco on iOS, Roboto on Android). Inline code uses the system monospace face (SF Mono on iOS); code blocks set an explicit family - Menlo on iOS, monospace on Android.
Spacing. Line height and block margins follow each platform's text conventions, so paragraphs, headings, and lists sit at a natural rhythm out of the box.
Colors. Text, links, code, blockquotes, and tables start from light-mode color defaults. See Dark mode to switch palettes with the system color scheme.

Override any of these through the markdownStyle prop. The web build has its own defaults for the same keys - a system-UI font stack and a ui-monospace stack - so the playgrounds on this page, which run the web build, may differ slightly from a device. You set only the properties you want to change, and everything else keeps its default.

Style inheritance

react-native-enriched-markdown uses a base block style architecture where all block elements (paragraphs, headings, lists, blockquotes, code blocks) share a common set of typography properties. This base block style includes:

fontSize - font size in points
fontFamily - font family name
fontWeight - font weight
color - text color
marginTop - top margin
marginBottom - bottom margin
lineHeight - line height

Each block type extends this base style with its own specific properties (e.g. textAlign for paragraphs and headings, borderColor for blockquotes, bulletColor for lists).

Inline style inheritance

Inline styles (strong, emphasis, links, inline code, etc.) automatically inherit the base typography properties from their containing block. This means inline elements use the block's fontSize, fontFamily, fontWeight, and color as their foundation, then apply their own additional styling on top.

In the playground below, only the two blocks set a size and color: the heading uses fontSize: 24 with a blue color, the list uses fontSize: 16 with a gray color. Every inline element leaves both unset, so each inherits from its block and adds only its own emphasis: bold and italic take the block size and color and add weight or slant, the link takes the size and adds its own color plus an underline, and inline code takes the size and adds a background chip plus its own default color (#E01E5A, which does not follow the block). Change a block's color and every inline element inside it follows.

Loading…

This inheritance model ensures consistent typography throughout your Markdown content while allowing inline elements to add their own visual emphasis.

Custom font family for inline styles

Strong, emphasis, and inline code support an optional fontFamily property that gives you full control over the font face used for that element.

Default behavior (no fontFamily set):

Strong - adds the bold trait to the current block font
Emphasis - adds the italic trait to the current block font
Inline code - uses the platform's system monospace font (SF Mono on iOS, monospace on Android)

With fontFamily set:

By default, bold/italic traits are still applied on top of the custom font family. Use fontWeight: 'normal' or fontStyle: 'normal' to disable this and use the font face exactly as-is:

markdownStyle={{
  strong: {
    // Bold trait is applied on top of Montserrat-Bold (default: fontWeight 'bold')
    fontFamily: 'Montserrat-Bold',
  },
  em: {
    // Uses Montserrat-Regular as-is, no italic trait added
    fontFamily: 'Montserrat-Regular',
    fontStyle: 'normal',
  },
  code: {
    // Uses CutiveMono-Regular directly, no system monospace applied
    fontFamily: 'CutiveMono-Regular',
  },
}}

Customizing styles

The library provides sensible default styles for all Markdown elements out of the box. You override any of them through the markdownStyle prop - only the properties you name change, everything else keeps its default. The playground below starts from the shared palette and restyles a heading, links, and the blockquote accent; edit it to see how each key maps to the rendered output.

Loading…

tip

Never build the markdownStyle object inline in JSX - a fresh object on every render makes the component re-parse and re-lay out the document. Memoize it with useMemo, keyed on whatever it derives from:

import { useMemo } from 'react';
import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
import type { MarkdownStyle } from 'react-native-enriched-markdown';

type Props = { markdown: string; accentColor: string };

export default function Article({ markdown, accentColor }: Props) {
  const markdownStyle: MarkdownStyle = useMemo(
    () => ({
      paragraph: { fontSize: 16 },
      h1: { fontSize: 32, color: accentColor },
    }),
    [accentColor]
  );

  return (
    <EnrichedMarkdownText markdown={markdown} markdownStyle={markdownStyle} />
  );
}

When the style depends on nothing at all, skip the hook and declare it at module scope - the reference is then stable for free. Every example on this page follows one of these two shapes.

Dark mode

The library ships with light-mode color defaults. It does not include a colorScheme prop - just like React Native's Text, theming is left to the consumer.

To support dark mode, create MarkdownStyle objects for each color scheme and switch between them using useColorScheme(). Your values always win over the defaults - you only need to specify the colors you want to change:

Loading…

As you may have noticed in the other examples throughout this documentation, every interactive playground already follows the same color scheme as this page: each one derives an isDark flag from useColorScheme() and picks its palette from it, so toggling the site between light and dark re-themes the preview live. The example above does the same with two hand-authored palettes; edit either object in the Code tab and flip the site theme to see the switch happen.

Property reference

Block styles (paragraph, h1-h6, blockquote, list, codeBlock)

Property	Type	Default	Description
`fontSize`	`number`	`16`	Font size in points
`fontFamily`	`string`	System font	Font family name
`fontWeight`	`string`	`normal`	Font weight
`color`	`string`	`#1F2937`	Text color
`marginTop`	`number`	`0`	Top margin
`marginBottom`	`number`	`16`	Bottom margin
`lineHeight`	`number`	`24` iOS / `26` Android	Line height

These properties are shared by every block element - set any of them on a paragraph, h1-h6, blockquote, list, codeBlock or table key. The defaults above are the paragraph (body) values only; every other block type overrides several of them:

Block	Overrides
`h1`-`h6`	sizes `30/24/20/18/16/14`, weight `bold`, `marginBottom` `8`, color `#111827` (`h1`-`h4`), `#374151` (`h5`), `#4B5563` (`h6`)
`blockquote`	color `#4B5563`
`codeBlock`	the monospace font at size `14`, and color `#F3F4F6`
`table`	the system font at size `14`

lineHeight is likewise per block, not shared: 24/26 is the paragraph value, headings run 36/38 down to 20/22 for a code block.

caution

The codeBlock default color is a near-white #F3F4F6, paired with the dark #1F2937 code background. If you lighten codeBlock.backgroundColor without also setting codeBlock.color, the code turns invisible.

The playground below sets these on a heading and a paragraph; the element-specific sections that follow layer their own properties on top.

Loading…

Paragraph and heading-specific (paragraph, h1-h6)

Property	Type	Default	Description
`textAlign`	`'auto' \| 'left' \| 'right' \| 'center' \| 'justify'`	`'auto'`	Text alignment

Each heading level (h1-h6) and paragraph is styled by its own key. Give each level its own size and color.

Loading…

Blockquote-specific

Property	Type	Default	Description
`borderColor`	`string`	`#D1D5DB`	Left border color
`borderWidth`	`number`	`3`	Left border width
`gapWidth`	`number`	`16`	Gap between border and text
`backgroundColor`	`string`	`#F9FAFB`	Background color
`borderRadius`	`number`	`0`	Corner radius of the blockquote box
`padding`	`number`	`0`	Inner padding around the blockquote text

Loading…

Admonitions

A blockquote opening with > [!NOTE], > [!TIP], > [!IMPORTANT], > [!WARNING], or > [!CAUTION] renders as a themed callout with an icon and title header. Admonitions nest under blockquote because they inherit its geometry - borderWidth, gapWidth, padding, borderRadius, font, and spacing all come from the blockquote style above - and override only the colors below.

Property	Type	Default	Description
`note` / `tip` / `important` / `warning` / `caution`	`AdmonitionColors`	The GitHub palette, see below	Per-type color overrides

Each type takes an AdmonitionColors object:

Property	Type	Default	Description
`color`	`string`	Per-type, below	Tints the accent bar, the title label, and the icon
`backgroundColor`	`string`	`transparent`	Fills the callout background. Omitted or empty means no fill, so the page shows through

Default color per type, matching GitHub's alert palette:

Type	Default color
`note`	`#0969DA`
`tip`	`#1A7F37`
`important`	`#8250DF`
`warning`	`#9A6700`
`caution`	`#CF222E`

Pass only the types you want to restyle - every type you omit keeps its default, and within a type an omitted field falls back the same way.

note

Requires flavor="github" and md4cFlags.admonitions. The flag is on by default but the flavor is not - flavor defaults to 'commonmark', where admonitions are forced off and the syntax renders as a plain blockquote with the literal [!NOTE] text.

Loading…

List-specific

Property	Type	Default	Description
`bulletColor`	`string`	`#6B7280`	Bullet point color
`bulletSize`	`number`	`6`	Bullet point size
`markerMinWidth`	`number`	`0`	Minimum reserved marker column width (floors the natural width of every list type). An ordered list's column also grows to fit its widest number
`markerColor`	`string`	`#6B7280`	Number marker color
`markerFontWeight`	`string`	`'500'`	Number marker font weight
`gapWidth`	`number`	`12`	Gap between marker and text
`marginLeft`	`number`	`24`	Left margin for nesting
`itemSpacing`	`number`	`0`	Vertical spacing added between consecutive list items (including nested ones). Adds no space above the first item or below the last

note

On web, lists render with the browser's native bullets and numbers, so the marker styling props - bulletColor, bulletSize, markerColor, markerFontWeight, markerMinWidth, and gapWidth - have no effect there. marginLeft and itemSpacing still apply on all platforms.

Loading…

Code block-specific

Property	Type	Default	Description
`backgroundColor`	`string`	`#1F2937`	Background color
`borderColor`	`string`	`#374151`	Border color
`borderRadius`	`number`	`8`	Corner radius
`borderWidth`	`number`	`1`	Border width
`padding`	`number`	`16`	Inner padding
`syntaxColors`	`CodeBlockSyntaxColors`	GitHub-dark palette	Per-token syntax highlight colors. To learn more, see Syntax colors

note

Inside list items, code blocks (background included) indent to the item's content column.

Loading…

Syntax colors

The syntaxColors key sets a color per syntax token type for fenced code blocks, keyed on the tree-sitter highlight token names. Pass only the tokens you want to recolor; any key you omit falls back to the default palette. Four tokens - operator, punctuation, variable, and embedded - inherit the code block's base color by default rather than a fixed palette value.

To learn more about how code highlighting works, see the Code highlighting guide.

Token	Default	Description
`keyword`	`#FF7B72`	Language keywords (e.g. `if`, `return`, `const`)
`operator`	Base `color`	Operators (e.g. `+`, `=>`). Inherits the base `color` when omitted
`punctuation`	Base `color`	Punctuation such as braces, commas, and semicolons. Inherits the base `color` when omitted
`string`	`#A5D6FF`	String literals
`number`	`#79C0FF`	Numeric literals
`constant`	`#79C0FF`	Constants (e.g. `true`, `null`)
`comment`	`#8B949E`	Comments
`function`	`#D2A8FF`	Function names
`type`	`#FFA657`	Type names
`variable`	Base `color`	Variables. Inherits the base `color` when omitted
`property`	`#79C0FF`	Object properties and fields
`tag`	`#7EE787`	Markup tags (e.g. HTML or JSX element names)
`attribute`	`#79C0FF`	Markup attributes
`embedded`	Base `color`	Embedded content such as interpolations. Inherits the base `color` when omitted

note

Syntax colors only take visible effect when the optional syntax-highlighting module is compiled in; otherwise code blocks render uncolored. The module is native-only, so syntaxColors has no effect on the web build.

import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
import { View, StyleSheet, useColorScheme } from 'react-native';
import { useMemo } from 'react';
import { defaultMarkdownStyle } from './theme';

const markdown = `\`\`\`tsx
function greet(name: string) {
  // build the greeting
  const message = 'Hello, ' + name;
  return message;
}
\`\`\`
`;

export default function App() {
  const isDark = useColorScheme() === 'dark';

  // syntaxColors recolors individual token types. Omitted tokens keep the
  // default palette; operator/punctuation/variable/embedded inherit the code
  // block's base color. Fenced code blocks need flavor="github".
  const markdownStyle = useMemo(() => {
    const base = defaultMarkdownStyle(isDark);

    return {
      ...base,
      codeBlock: {
        ...base.codeBlock,
        syntaxColors: {
          keyword: isDark ? '#FF7B72' : '#CF222E',
          string: isDark ? '#A5D6FF' : '#0A3069',
          comment: isDark ? '#8B949E' : '#6E7781',
          function: isDark ? '#D2A8FF' : '#8250DF',
          type: isDark ? '#FFA657' : '#953800',
        },
      },
    };
  }, [isDark]);

  return (
    <View style={styles.container}>
      <EnrichedMarkdownText
        markdown={markdown}
        markdownStyle={markdownStyle}
        flavor="github"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { gap: 12 },
});

Inline code-specific

Under the code key.

Property	Type	Default	Description
`fontFamily`	`string`	System monospace	Font family for inline code. Uses the exact font face as-is. When not set, uses the platform's system monospace font (SF Mono on iOS, monospace on Android)
`fontSize`	`number`	Parent block size (1em)	Font size in points. Set to customize the monospaced font size independently
`color`	`string`	`#E01E5A`	Text color
`backgroundColor`	`string`	`#FDF2F4`	Background color
`borderColor`	`string`	`#F8D7DA`	Border color

Loading…

Link-specific

Property	Type	Default	Description
`fontFamily`	`string`	Inherits block	Font family for links. Overrides the parent block's font family when set
`color`	`string`	`#2563EB`	Link text color
`underline`	`boolean`	`true`	Show underline
`backgroundColor`	`string`	`transparent`	Link background color

You can also style links per URL pattern through the top-level linkVariants key: a Record<string, LinkVariantStyle> whose keys are regexes tested against the link URL. See Mentions.

Loading…

Link pills

A variant can also present its links as pills - rounded chips with an optional icon and label, wrapped as one unit - through its pill key. pill: true gives the default look; a LinkPillStyle object overrides it. The variant's color, underline, backgroundColor and fontFamily still apply, so a pill is styled the way its links already were.

Property	Type	Default	Description
`label`	`string`	Original link text	Label shown by every link the pattern matches
`iconUri`	`string`	No icon	Icon shown by every link the pattern matches, drawn at the label's font size. See Icon sources
`iconTintColor`	`string`	No tint	Tints this variant's own icon and keeps its alpha. An icon set per link through `linkPillContent` is not tinted by it
`borderRadius`	`number`	`8`	Corner radius in points/DIP
`paddingHorizontal`	`number`	`6`	Horizontal inset in points/DIP
`paddingVertical`	`number`	`2`	Vertical inset in points/DIP
`borderWidth`	`number`	`0`	Border width in points/DIP
`borderColor`	`string`	`transparent`	Border color
`maxWidth`	`number`	`0`	Positive maximum width in points/DIP. Zero uses the available text width
`lineHeight`	`number`	Not set	Minimum line height of a block that holds the pill, scaled with the system font size. See Line height

Nonfinite dimensions fall back to their defaults and negative dimensions clamp to zero. Per-link labels, icons and tints are not style: they live in the linkPillContent prop and win over the three content fields above.

note

Pills are drawn by the native text stack, so pill applies on iOS and Android only. The web build and macOS render those links as ordinary links with the variant's colors and font. The Link pills guide covers the rest: per-link content, line height, icon sources and behavior.

Strong-specific

Property	Type	Default	Description
`fontFamily`	`string`	Inherits block	Font family for bold text. When not set, adds the bold trait to the parent block's font
`fontWeight`	`'bold' \| 'normal'`	`'bold'`	Controls whether bold is applied on top of the custom `fontFamily`. Set to `'normal'` to use the font face as-is. Only relevant when `fontFamily` is set
`color`	`string`	Inherits block	Bold text color

Loading…

Emphasis-specific

Property	Type	Default	Description
`fontFamily`	`string`	Inherits block	Font family for italic text. When not set, adds the italic trait to the parent block's font
`fontStyle`	`'italic' \| 'normal'`	`'italic'`	Controls whether italic is applied on top of the custom `fontFamily`. Set to `'normal'` to use the font face as-is. Only relevant when `fontFamily` is set
`color`	`string`	Inherits block	Italic text color

Loading…

Strikethrough-specific

Strikethrough (~~text~~) is a GitHub Flavored Markdown extension, so these styles only apply under flavor="github".

Property	Type	Default	Description
`color`	`string`	`#9CA3AF`	Strikethrough line color (iOS and web; on Android the strike uses the text color)

Loading…

Underline-specific

Requires md4cFlags={{ underline: true }}, which makes _text_ render as underline instead of emphasis.

Property	Type	Default	Description
`color`	`string`	`#1F2937`	Underline color (iOS and web; on Android the underline uses the text color)

Loading…

Highlight-specific

Styles for highlighted text (==text==). Requires md4cFlags={{ highlight: true }} to enable the parser. Font size, family, and weight inherit from the surrounding block; only color and backgroundColor are overridden.

Property	Type	Default	Description
`color`	`string`	Inherits block	Text color inside the highlight. Inherits the block color when omitted
`backgroundColor`	`string`	`#FEF08A`	Background color of the highlight span

Loading…

Image-specific

Property	Type	Default	Description
`height`	`number`	`200`	Fixed image height
`maxHeight`	`number`	unset	Maximum height the image is fitted into, preserving aspect ratio. Replaces `height` as the primary sizing knob when set
`aspectRatio`	`number`	unset	Width / height ratio (e.g. `16 / 9`). The image fills the available width and derives its height from this ratio
`resizeMode`	`'contain' \| 'cover' \| 'stretch' \| 'center' \| 'none'`	unset (`'cover'` when `maxHeight`/`aspectRatio` is set)	How the image fills its box (analogous to React Native `resizeMode`)
`borderRadius`	`number`	`8`	Corner radius
`marginTop`	`number`	`0`	Top margin
`marginBottom`	`number`	`16`	Bottom margin

Sizing precedence is aspectRatio > maxHeight > height: the first one set wins and the lower-priority knobs are ignored.

Loading…

Video-specific

Styles block-level videos embedded with the HTML <video> tag. Element structure owns the authoring rules - the two tag forms, the quoted-src trap, and what happens to a video inside a list. Because only src is read, every attribute of the video's appearance comes from the keys below. Playback controls come from the platform player (AVPlayerViewController on iOS, ExoPlayer on Android, the browser's built-in <video> controls on web).

Property	Type	Default	Description
`aspectRatio`	`number`	`16 / 9`	Width / height ratio. The video fills the available width and derives its height from this ratio. Must be positive
`backgroundColor`	`string`	`#000000`	Fill behind the player, visible before the video loads and in letterboxing areas
`borderRadius`	`number`	`8`	Corner radius
`marginTop`	`number`	`0`	Top margin
`marginBottom`	`number`	`16`	Bottom margin

Unlike images, there is no height or maxHeight knob - aspectRatio is the only sizing control.

note

On native, requires flavor="github" for native segment rendering, and the enableVideo build flag (on by default) in your app's package.json enriched-markdown block - see Optional native features. Web needs neither, and reads all five keys below.

Loading…

Inline image-specific

Property	Type	Default	Description
`size`	`number`	`20`	Image size (square)

Loading…

Thematic break (horizontal rule)-specific

Property	Type	Default	Description
`color`	`string`	`#E5E7EB`	Line color
`height`	`number`	`1`	Line thickness
`marginTop`	`number`	`24`	Top margin
`marginBottom`	`number`	`24`	Bottom margin

Loading…

Table-specific

Table styles only apply when flavor="github" is set. Tables inherit the base block styles (fontSize, fontFamily, fontWeight, color, marginTop, marginBottom, lineHeight) and add the following:

Property	Type	Default	Description
`headerFontFamily`	`string`	Inherits `fontFamily`	Font family for header cells (falls back to `fontFamily` if not set)
`headerBackgroundColor`	`string`	`#F3F4F6`	Background color for the header row
`headerTextColor`	`string`	`#111827`	Text color for the header row
`rowEvenBackgroundColor`	`string`	`#FFFFFF`	Background color for even data rows
`rowOddBackgroundColor`	`string`	`#F9FAFB`	Background color for odd data rows
`borderColor`	`string`	`#E5E7EB`	Color of the table grid lines
`borderWidth`	`number`	`1`	Width of the table grid lines
`borderRadius`	`number`	`6`	Corner radius of the table container
`cellPaddingHorizontal`	`number`	`12`	Horizontal padding inside cells
`cellPaddingVertical`	`number`	`8`	Vertical padding inside cells
`horizontalOverflow`	`number`	`0`	Extra width (points) a table may extend beyond the container edges, letting a wide table bleed into the surrounding padding as it scrolls. No effect on web
`align`	`'left' \| 'center' \| 'right'`	unset	Horizontal alignment of the whole table within the container. Only applies when the table is narrower than the container; overflowing tables always start at their beginning

Loading…

Task list-specific

Task list styles only apply when flavor="github" is set - task lists are a GitHub Flavored Markdown extension.

Property	Type	Default	Description
`checkedColor`	`string`	`#007AFF` iOS / `#2196F3` Android	Background color of checked checkbox
`borderColor`	`string`	`#9E9E9E`	Border color of unchecked checkbox. No effect on web
`checkmarkColor`	`string`	`#FFFFFF`	Color of the checkmark inside checked checkbox. No effect on web
`checkboxSize`	`number`	90% of list font size	Size of the checkbox
`checkboxBorderRadius`	`number`	`3`	Corner radius of the checkbox
`checkedTextColor`	`string`	`#000000`	Text color for checked items
`checkedStrikethrough`	`boolean`	`false`	Whether to apply strikethrough to checked items

note

On web, the checkbox is the browser's native <input type="checkbox"> tinted via accentColor (checkedColor). Its borderColor and checkmarkColor are drawn by the browser and cannot be overridden.

Loading…

Math block-specific

Styles for block-level LaTeX math ($$...$$), under the math key (not mathBlock). Block math is rendered as a standalone display element and only applies when flavor="github" is set - under commonmark the equation becomes an inline attachment styled from inlineMath, and nothing in this table applies. Rendering also requires md4cFlags={{ latexMath: true }}, which is on by default.

Property	Type	Default	Description
`fontSize`	`number`	`20`	Font size used when rendering the equation
`color`	`string`	`#1F2937`	Equation text color
`backgroundColor`	`string`	`#F3F4F6`	Background color of the math block container
`padding`	`number`	`12`	Inner padding around the equation
`marginTop`	`number`	`0`	Top margin
`marginBottom`	`number`	`16`	Bottom margin
`textAlign`	`'left' \| 'center' \| 'right'`	`'center'`	Horizontal alignment of the equation

Loading…

Inline math-specific

Styles for inline LaTeX math ( $...$ ). Inline math is rendered within the surrounding text flow.

Property	Type	Default	Description
`color`	`string`	`#1F2937`	Equation text color

Loading…

Spoiler-specific

Styles for spoiler text (||hidden text||). The text is concealed behind an overlay until the user taps to reveal it.

Which overlay preset is used - 'particles' or 'solid' - is not a style property; it is chosen with the spoilerOverlay prop on the component. The keys below only tune appearance: color applies to both presets, while particles.* and solid.* each affect only their matching preset.

note

The spoiler overlay is iOS and Android only - the web build does not render it, so none of the spoiler style properties below have any effect on web.

Property	Type	Default	Description
`color`	`string`	`#374151`	Color used by all presets for the spoiler overlay
`particles.density`	`number`	`8`	Density of the particle field (higher = more particles)
`particles.speed`	`number`	`20`	Speed of particle movement
`solid.borderRadius`	`number`	`4`	Corner radius of the solid spoiler overlay rectangles

import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
import { View, StyleSheet, useColorScheme } from 'react-native';
import { useMemo } from 'react';
import { defaultMarkdownStyle } from './theme';

const markdown = 'The killer was ||the butler|| all along - tap to reveal.';

export default function App() {
  const isDark = useColorScheme() === 'dark';

  // Spoiler text (||hidden||) is concealed behind an overlay until tapped. The
  // overlay preset is chosen with the spoilerOverlay prop; color drives all
  // presets, and particles/solid tune each preset.
  const markdownStyle = useMemo(
    () => ({
      ...defaultMarkdownStyle(isDark),
      spoiler: {
        color: isDark ? '#6b7280' : '#374151',
        particles: { density: 10, speed: 24 },
        solid: { borderRadius: 6 },
      },
    }),
    [isDark]
  );

  return (
    <View style={styles.container}>
      <EnrichedMarkdownText
        markdown={markdown}
        markdownStyle={markdownStyle}
        spoilerOverlay="particles"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { gap: 12 },
});

Superscript-specific

Styles for superscript text (^text^). Requires md4cFlags={{ superscript: true }} to enable the parser.

Property	Type	Default	Description
`fontScale`	`number`	`0.75` (iOS/macOS/web), `0.65` (Android)	Font size as a fraction of the surrounding text size
`baselineOffsetScale`	`number`	`0.35`	Vertical shift upward as a fraction of the surrounding text size

Loading…

Subscript-specific

Styles for subscript text (~text~). Requires md4cFlags={{ subscript: true }} to enable the parser. Note that single tildes mean nothing by default: ~text~ is literal text until this flag turns it into subscript. Double tildes (~~text~~) are strikethrough, and only under flavor="github".

Property	Type	Default	Description
`fontScale`	`number`	`0.75` (iOS/macOS/web), `0.65` (Android)	Font size as a fraction of the surrounding text size
`baselineOffsetScale`	`number`	`0.20`	Vertical shift downward as a fraction of the surrounding text size

Loading…

note

Android uses a slightly smaller default fontScale (0.65) compared to iOS (0.75) because Roboto has a larger x-height than San Francisco, making identically-scaled text appear visually larger on Android.

Editor styles (`EnrichedMarkdownTextInput`)

The editable EnrichedMarkdownTextInput takes its own markdownStyle of type MarkdownTextInputStyle. It is a subset of the renderer's MarkdownStyle documented above: the editor styles inline formatting, links, spoilers, headings and list item spacing, so only those elements are styleable - there is no paragraph, code, blockquote, table, and so on. Every field is optional and falls back to a default that matches the renderer, so content looks the same while editing and once rendered.

The base text appearance (font size, family, color) comes from the input's style prop, not from markdownStyle.

Property	Type	Default	Description
`strong.color`	`string`	Input text color	Bold text color
`em.color`	`string`	Input text color	Italic text color
`link.color`	`string`	`#2563EB`	Link text color
`link.underline`	`boolean`	`true`	Whether links are underlined
`link.backgroundColor`	`string`	`transparent`	Link background color
`linkVariants`	`Record<string, LinkVariantStyle>`	none	Per-URL-pattern style overrides. Each key is a regex tested against the link URL; see Mentions. The editor's variant type has no `fontFamily` field, so a single object shared with the renderer must leave it unset
`spoiler.color`	`string`	`#374151`	Spoiler text color
`spoiler.backgroundColor`	`string`	`#E5E7EB`	Spoiler background color
`h1`-`h6`	`{ fontSize?, fontWeight?, color? }`	Match the renderer	Per-level heading styling. Defaults match the renderer (sizes `30/24/20/18/16/14`, bold); omitted levels or fields fall back to those defaults
`list.itemSpacing`	`number`	`0`	Vertical spacing (points) added above each list item (bullet and numbered alike) so items read as separate rows

Platform defaults​

Style inheritance​

Inline style inheritance​

Custom font family for inline styles​

Customizing styles​

Dark mode​

Property reference​

Block styles (paragraph, h1-h6, blockquote, list, codeBlock)​

Paragraph and heading-specific (paragraph, h1-h6)​

Blockquote-specific​

Admonitions​

List-specific​

Code block-specific​

Syntax colors​

Inline code-specific​

Link-specific​

Link pills​

Strong-specific​

Emphasis-specific​

Strikethrough-specific​

Underline-specific​

Highlight-specific​

Image-specific​

Video-specific​

Inline image-specific​

Thematic break (horizontal rule)-specific​

Table-specific​

Task list-specific​

Math block-specific​

Inline math-specific​

Spoiler-specific​

Superscript-specific​

Subscript-specific​

Editor styles (EnrichedMarkdownTextInput)​

Platform defaults

Style inheritance

Inline style inheritance

Custom font family for inline styles

Customizing styles

Dark mode

Property reference

Block styles (paragraph, h1-h6, blockquote, list, codeBlock)

Paragraph and heading-specific (paragraph, h1-h6)

Blockquote-specific

Admonitions

List-specific

Code block-specific

Syntax colors

Inline code-specific

Link-specific

Link pills

Strong-specific

Emphasis-specific

Strikethrough-specific

Underline-specific

Highlight-specific

Image-specific

Video-specific

Inline image-specific

Thematic break (horizontal rule)-specific

Table-specific

Task list-specific

Math block-specific

Inline math-specific

Spoiler-specific

Superscript-specific

Subscript-specific

Editor styles (`EnrichedMarkdownTextInput`)