Markdoc Format

Markdoc format is the format used when pages are synced on DeveloperHub using GitHub Sync. Markdoc is markdown-based authoring framework for writing documentation.

Frontmatter Syntax

Every page has a frontmatter header, such as this one:

--- type: page title: Getting Started listed: true slug: getting-started description: index_title: Getting Started hidden: false keywords: keyword1,keyword2 tags: tag1,tag2 ---

Markdoc Syntax

Markdoc is a superset of Markdown, so you can still write Markdown as you usually do, including the following nodes:

## Headers **Bold** _Italic_ [Links](/docs/nodes) ![Images](/logo.svg) Unordered Lists - Item 1 - Item 2 - Item 3 Ordered Lists 1. Item 1 2. Item 2 1. Item 1 under 2 3. Item 3 > Callouts `Inline code` ``` Code fences ```

In addition to Markdown, we provide tags and attributes for all blocks and inline blocks.

Blocks have the following syntax:

{% block-type attr1="value1" attr2="value" %} contents {% /block-type %}

While inline blocks have the following syntax:

{% block-type attr1="value1" attr2="value2" /%}

The syntax is shown below for every block with an example:

Code Block

{% code %} {% tab language="javascript" %} function fibonacci(num, memo) { memo = memo || {}; if (memo[num]) return memo[num]; if (num <= 1) return 1; return memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo); } {% /tab %} {% /code %}

Images

{% image url="https://uploads.developerhub.io/dev/V5Na/u0dpegq8xdpnclhctkpxycekhj04sev9j2kztstph3bnj41cde13o7vuzlpxw6yj.jpg" caption="Image example" mode="responsive" height="1200" width="1920" %} {% /image %}

Tables

{% table widths="null,100" %} | Parameter | Type | Default Value | | ---- | ---- | ---- | | user_id | int | Auto generated | | user_name | string | John Doe | | user_age | int | 25 | {% /table %}

Callouts

{% callout type="success" title="Success" %} Great **success**! {% /callout %}

Videos

{% video videoId="e5b8c04bca094dd8a5507925ab887002" provider="loom" %} {% /video %}

Synced Blocks

{% synced id="open-block-menu" %} {% /synced %}

Custom HTML

{% html %} SWISHHTMLBODY0 {% /html %}

Tabs

{% tabs %} {% tab title="Android" %} Android Tab {% /tab %} {% tab title="iOS" %} iOS Tab {% /tab %} {% /tabs %}

GitHub Code

{% github-code url="https://github.com/torvalds/linux/blob/master/kernel/signal.c#L152-L170" %} {% /github-code %}

Index List

{% index-list %} {% /index-list %}

Inline Blocks

Variables: %user.id% Badges: {% badge type="success" text="Great" /%} Icons: {% icon classes="layers" /%} Keyboard Keys: {% key key="F" /%} Glossary: {% glossary term="product" /%} Inline Images: {% inline-image url="https://img.com/img.url" width="100" /%}

Last updated on May 4, 2025

Was this page helpful?