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:

Frontmatter
    
 
---type: pagetitle: Getting Startedlisted: trueslug: getting-starteddescription: index_title: Getting Startedhidden: falsekeywords: keyword1,keyword2tags: tag1,tag2---
Copy

Markdoc Syntax

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

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

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

Blocks have the following syntax:

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

While inline blocks have the following syntax:

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

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

Code Block

Markdown
    
 
{% 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 %}
Copy

Images

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

Tables

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

Callouts

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

Videos

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

Synced Blocks

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

Custom HTML

Markdown
    
{% 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 %}
Copy

Tabs

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

GitHub Code

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

Index List

Markdown
    
 
{% index-list %}{% /index-list %}
Copy

Inline Blocks

Markdown
    
 
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" /%}
Copy

Last updated by Zaid Daba'een on Dec 10, 2024

Anything missing? Leave us feedback