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 %}