Supported Syntax

Welcome to SeeMark's supported syntax documentation. This table below shows all the markdown syntax that SeeMark enhances with custom React components.

To render syntax into components, use createMarkdownToReactParser, as shown in usage documentation. Pass your own React components via the components option (keyed by id in below table) to override SeeMark's default components.

Syntax in the table comes with position tracking feature. Each rendered component includes a position prop with start and end properties that pinpoint exactly where it lives in your original markdown source.

The last custom column in the table tells you whether a syntax is unique to SeeMark (y) or standard markdown/GitHub syntax (n).

Since SeeMark is build on marked, SeeMark's markdown parser supports all standard markdown syntax, even if it's not listed in the table below. Unlisted syntax will still render in the final HTML output; it just won't get the enhanced treatment of custom component wrappers or position tracking in the process of parsing.

---

id	syntax	props (besides position-tracking props)	description	custom
alert	> [!TYPE] or > [!TYPE]#id	variant (NOTE, TIP, IMPORTANT, WARNING, CAUTION), title, internalLinkId, children	GitHub-style alerts	n
externalLinkTab	@[display](target)	display, target	Link (opens in new tab)	y
externalLinkTitle	[display][[title]](target)	display, title, target	Link + title	y
externalLinkTabTitle	@[display][[title]](target)	display, title, target	Link (opens in new tab) + title	y
heading	#, ##, ###, etc.	level, id, text, children	Standard markdown headings with auto-generated IDs	n
iframe	@	title, source	YouTube/CodePen/general iframe	y
image		alt, source	Standard image	n
imageLink	((target))	alt, source, target	Image + link	y
imageDisplay	![alt][[display]](source)	alt, display, source	Image + caption	y
imageDisplayLink	![alt][[display]](source)((target))	alt, display, source, target	Image + caption + link	y
internalLink	[display]<target>	display, target	Internal link (in-page anchor link)	y
internalLinkTitle	[display][[title]]<target>	display, title, target	Internal link (in-page anchor link) + title	y
math	$...$, \(...\), \l...\l (LaTeX) or `...`, \a...\a (AsciiMath)	math, typed (latex, asciimath), mathMl, svg	Inline math expressions	n

---

Additional details:

• alert:

  • Supports GitHub-style blockquote alerts with five variants: NOTE, TIP, IMPORTANT, WARNING, CAUTION.
  • Syntax: > [!TYPE] where TYPE is one of the variants (case-insensitive).
  • Optional internal linking: > [!TYPE]#id creates an in-page anchor link to #id-source.
  • Example: > [!NOTE] or > [!WARNING]#my-warning

• heading:

  • All standard markdown headings (# through ######) are converted to custom components.
  • IDs are auto-generated from the heading text.
  • Difference between text and children props:
    • text: Plain text string (the markdown content). Seemark internally uses it for auto-generating IDs (e.g., "Hello world and code").
    • children: React elements with formatting preserved (e.g., contains <strong>, <code>, etc). Usually you will use children to render the content of your custom headings component. See example here.
    • Example: For ## Hello **world**, text is the plain string ## Hello **world**, while children is the React elements of heading content including the bold formatting.

• iframe:

  • We don't support GitHub since it doesn't have official embed support.
  • The syntax automatically detects YouTube and CodePen URLs and renders them with Youtube/CodePen custom components. For other URLs, a standard iframe is rendered. You can supply your own custom components for YouTube, CodePen, and iframe rendering by passing them to seemark's createMarkdownToReactParser function as shown in the usage example below.

createMarkdownToReactParser({
  options: {...},
  components: { youtube: YouTubeComponent, codepen: CodePenComponent, iframe: IframeComponent },
});

• math:
  • LaTeX delimiters: $...$ (dollar), \(...) (bracket), or \l...\l (latex)
  • AsciiMath delimiters: `...` (grave accent) or \a...\a (asciimath)
  • Rendered as MathML (for screen readers) and SVG (for visual display).
  • Example: $E = mc^2$ or `x^2 + y^2 = r^2`