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: pagetitle: Getting Startedlisted: trueslug: getting-starteddescription: index_title: Getting Startedhidden: falsekeywords: keyword1,keyword2tags: tag1,tag2---Markdoc Syntax
Markdoc is a superset of Markdown, so you can still write Markdown as you usually do, including the following nodes:
x
## Headers**Bold**_Italic_[Links](/docs/nodes)Unordered Lists- Item 1- Item 2- Item 3Ordered Lists1. Item 12. Item 2 1. Item 1 under 23. 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 %}<a href="https://docs.developerhub.io/?goto=wide" target="_blank" style="background-color: #333; color: white; padding: 12px; border-radius: 3px; text-decoration: none !important"> See Wide Layout</a>{% /html %}Tabs
{% tabs %}{% tab title="Android" %}Android Tab{% /tab %}{% tab title="iOS" %}iOS Tab{% /tab %}{% /tabs %}Changelog
{% changelog label="31 July 2024" slug="31-july-2024" date="2024-07-31" %}- {% badge type="warning" text="Change" /%} **API References**: Writers can [create and edit](/support-center/collaboration) API references in draft now.{% /changelog %}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" /%}Anything missing? Leave us feedback