Container

A container schema is a schema for any html tag that can contain children. Some of them are created to enforce the relationships between them. They will never be self-closing, have a primary attribute or be inline. Some of them only validate specific children that are supposed to be inside of them according to the HTML spec.

The ones that fall into this category are.

• details
• video
• audio
• address
• ul
• ol
• blockquote
• picture
• dl
• colgroup
• col
• p
• cite

Definitions

Definition list are available through the dl container schema and the dd and dt text schemas.

DANGER

The dl tag can only have dd and dt as it's children. They must also be written as dd first then dt each time they are used as children.

Example

 {% dd %}
    {% dt "verb"  /%} {% dd "a word used to describe a action" /%}
    {% dt "noun"  /%} {% dd "a word used to describe a person place or thing" /%}
 {% /dd %}

colgroup

You can now specify columns in a table by using the colgroup and col. Both of them share the following attributes.

{% colgroup %}
    {%col "content one" /%}
    {%col "content two" span=2 /%}
{% /colgroup %}

• hidden
• style

span	type	required
span	IntegerAttribute	false

a

{% a href="/" %}
  Home
{% /a  %}

You can use the anchor tag like a regular anchor tag.

It's children must can only be.

• span
• em
• strong
• abbr
• image
• img
• text

It's schema is called a it supports the following attributes.

Attributes

attribute	type	required	reference	matches
href	HrefAttribute	true
type	String	false	Media Types
referrerpolicy	String	false		no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin unsafe-url
download	DownloadAttribute	false

Href Attribute

This is an attribute that checks for the following strings. It's a relative or absolute path A word that starts with tel: and ends with a phone number. A http URL A word that starts with a #. A word that starts with mailto: and ends with an email.

blockquote

A schema that allows you to render the blockquote tag in Markdoc.

{% blockquote 
    cite="https://www.builder.io/blog/wtf-is-code-extraction#export-extraction" 
%}
   Export extraction is a way to remove server code from the client bundle by relying on the bundle tree-shaker behavior.

-- Misko Hevery 
{%/blockquote %}

It only allows these attributes.

• cite
• hidden

It validates only these nodes in the blockquote tag.

• list
• paragraph
• img
• fence

It validates only these tags.

• p
• ul
• ol
• img

paragraph

You can use paragraphs and the paragraph tag as well. It's schema has the following attributes built in.

• contenteditable
• draggable
• title
• lang
• spellcheck
• dir
• translate

It can only have the following children.

• inline
• text
• link

External Media

When it comes to the use of external media you can use the HTML tags you know. If you want to download a file you can use the a tag in markdoc and the map and area tag as well. The audio, video tags are also available. You can use the picture tag and the image tag this section isn't about them. Information about images can be found here.

DANGER

The audio video and picture tag must use a source to render anything. We don't allow any use of a src= attribute at all.

It's easier to omit it's use whether than to check if it exists and the tag has no child at all.

Audio and Video

The audio tag allows you to play audio by linking to a file.

{%audio %}
    {%source src="audio.mp4" /%}
{% /audio %}

The video tag allows you to play video by linking to a file.

{%video %}
    {%source src="video.mp4" /%}
{% /video %}

INFO

They both share the following attributes With the following values.

attribute	type	required	matches
autoplay	Boolean	false
controls	Boolean	false
loop	Boolean	false
muted	Boolean	false
controlslist	String	false	nodownload, nofullscreen, noremoteplayback
crossorigin	String	false	anonymous, use-credentials,

Unique to Audio

attribute	type	required	matches
preload	String	false	none,metadata,audio,

Unique to Video

attribute	type	required
playsinline	Boolean	false
poster	String	false
width	IntegerAttribute	false
height	IntegerAttribute	false

Picture

{%picture %}
    {%source srcset="audio.mp4" /%}
{% /picture %}

The picture tag is a tag that only requires the source and img tag as children. It will validate the source tags, only if they have a srcset= attribute.

The source tag

The source tag is a tag that can't be used on it's own. It must be used as the child of the picture,audio and video tags.

It has the following attributes.

attribute	type	required	error Level
src	SourceAttribute	true	critical
srcset	SrcSetAttribute	false	critical
sizes	SizesAttribute	false	warning
media	MediaAttribute	true

Media Attribute

The Media Attribute is an attribute that validates a value if it's is a string that conforms to the required format for writing media and device media queries.

TIP

For the required media queries check out this page under Syntax.

Data Schemas

A Container Schema that accepts a property with a key called data and an value as an object literal is called a Data Schema. It's a schema that takes the keys of each value adds a data- as the prefix to it, lowercase's it, then it mixes that object with attributes that written on the tag.

  {% p 
    data={
        theme:"dark"
    } 
  %}
  I remember you were walking from the east when I saw you.
  {% /p %}

The ones that fall into this category are.

• ul
• ol
• details
• p

Lists

There are schemas for writing HTML lists in Markdoc. Those are called ul and ol. They both only validate the li tag and only allow list nodes.

The following attributes are also allowed

• title
• spellcheck
• lang
• translate
• dir

ul

{% ul %}
    {%li "Clean my room" /%}
    {%li "Throw out the garbage" /%}
    {%li "Do the laundry" /%}
    {%li "Wash the dishes" /%}
{% /ul %}

ol

{% ol %}
    {%li "Clean my room" /%}
    {%li "Throw out the garbage" /%}
    {%li "Do the laundry" /%}
    {%li "Wash the dishes" /%}
{% /ol %}

details

A schema that allows you to render details.

{% details %}
    {% summary "The dog ate my homework" /%}
{% /details %}

It validates only the following nodes.

• paragraph
• fence
• image
• list

It validates only the following tags.

• p
• summary
• ol
• ul

Extra Attributes

attribute	type	required
open	String	false

cite

This schema allows cite tags to be rendered in markdoc.

It has the following attributes.

• hidden
• spellcheck
• translate

{% cite %}
{% a href="http://www.george-orwell.org/1984/0.html" %}Nineteen Eighty-Four{%/a%}
{% /cite %}

It only allows the following nodes

• link
• text
• em
• strong

DANGER

It only validates a tag if it's an anchor tag