---
title: Markdoc integration for Astro Ink
date: "2023-03-08"
image: https://user-images.githubusercontent.com/62121649/167893184-a2b69260-ca9e-4a77-a5bc-63b8135ae5db.png
author: Aftab Alam
authorTwitter: aftabbuddy
category: design
tags:
- architecture
- front-end
- spa
description: Markdoc extends the markdown syntax you love to offer you authoring superpowers... 💪
---
[Markdoc](https://markdoc.dev/docs/overview) extends the markdown syntax you know and love to offer you authoring superpowers... 💪.

Tags are the heart of Markdoc system. You can use native Markdoc tags, like tables(example below), conditionals, and partials...

## Table in Markdoc
{% table %}
* Foo
* Bar
* Baz
---
*
  ```
  puts "Some code here."
  ```
*
  <!-- {% list type="checkmark" %}
  * Bulleted list in table
  * Second item in bulleted list
  {% /list %} -->
* Text in a table
---
*
  A "loose" list with

  multiple line items
* Test 2
* Test 3
---
* Test 1
* A cell that spans two columns {% colspan=2 %}
{% /table %}

or create custom components.

## Tags available out of Ink
Astro Ink ships with the following tags with more coming soon...

### Callout

#### Note 
{% callout type="note" title="title goes here..." %}
    lorem ipsum doler sit amet lorem  
{% /callout %}  
  
#### Error 
{% callout type="error" title="title goes here..." %}
    lorem ipsum doler sit amet
{% /callout %}

#### Warning 
{% callout type="warning" title="title goes here..." %}
    lorem ipsum doler sit amet
{% /callout %}

#### Check 
{% callout type="check" title="title goes here..." %}
    lorem ipsum doler sit amet
{% /callout %}

### Link

{% link href="/blog" title="take care" %}
    Go to blog
{% /link %}

### Tweet Embed
{% tweet url="https://twitter.com/aftabbuddy/status/1630403326406959105" %}
{% /tweet %}



{% yt url="https://www.youtube.com/embed/ADnaRwQZfqw" title="SvelteKit + GraphQL with Houdini | Intro, Setup and Project Overview" %}
{% /yt %}

### Tabs

{% tabs heading="some" tabs=[{title: "tab1", body: "tab1"}, {title: "tab2", body: "tab2"}] %}
{% /tabs %}

...more tags coming soon!

## Functions (from official example)

¡Hola {% getCountryEmoji("spain") %}!