Skip to main content
All CollectionsCopilot HelpLegacy
Guide to Markdown Features (Legacy)
Guide to Markdown Features (Legacy)

A guide to all Copilot Standard Markdown text formatting features

Vijay Krishna Mallik avatar
Written by Vijay Krishna Mallik
Updated over a week ago

Markdown is a lightweight markup language and is currently used as the text format for content stored in the Formation APIs. Unlike HTML, there exists only an informal set of specifications of Markdown of which CommonMark (CM) and Github-flavored Markdown are the most popular public implementations. These public markdown specifications define a set of text formatting features such as strong and emphasized text, paragraphs and headings, links and images, etc. Condé Nast has extended the set of CommonMark features with its own features. These include adding the ability to include embedded documents (articles, galleries, etc), text callouts, and social links, as well as including additional attributes on links and images. This set of features is known as Copilot-flavored Markdown (CFM).

While each brand has historically used the same set of Copilot-flavored Markdown features, they had used them in slightly different ways, with each of the legacy brand consumer sites possibly interpreting and rendering the same CFM content differently. In essence, each brand had developed their own brand-specific flavor of Markdown. This presents difficulty as these brands have tried to move onto a single multi-tenant application such as Verso, as such an application would need at once to render CFM content consistently but also to preserve the brand-specific meaning of legacy content. To address this, we have introduced Copilot Standard Markdown (CSM, originally developed for Verso and sometimes called Verso-flavored Markdown) which standardizes the Markdown syntax for every feature in the superset of brand-specific Markdown flavors. Conversion from the brand-specific Markdown to this Copilot Standard Markdown is described in 🔮 How to update content using AtJSON.

Features

Blockquote

Blockquotes represent quoted text which is set as its own text block. Such text is considered to be in the flow of a document and is often used for extended quotes. They are distinguished from Pullquotes (a type of Callout) which might have a similar visual display but instead represent text that is pulled from elsewhere in the document and given some prominent display which is not in the flow of the document.

> This is a blockquote
> Which can span multiple lines

The first line of a blockquote may have zero to three leading spaces. Subsequent lines may have any number of spaces followed by an optional > character. A Blockquote is terminated by a blank line.

> This Blockquote has two leading spaces

subsequent lines may have zero

or any number of leading space

> and may or may not include the > character

> This is a new Blockquote since the previous one was terminated by the preceding blank line.

Pullquote

Pullquotes (a type of Callout) which might have a similar visual display but instead represent text that is pulled from elsewhere in the document and given some prominent display which is not in the flow of the document. Pullquotes may have a credit, which is added below the main quote.

+++pullquote > "We are already a cyborg. Because we are so well integrated with our phones and our computers."

Elon Musk

+++

The quote portion of the pullquote follows the same rules as blockquotes. The credit portion of the pullquote should have minimal markup (presentational markup like bold, italic, strikethrough, etc), and span a single paragraph. Behavior is currently undefined with how multi line credit is handled. Pullquotes are closed by a bare +++ on a line.

Callouts

Callouts represent portions of a document which are set outside of the regular flow of a document. Historically, each brand-specific flavor of Markdown supported their own types of Callouts, but these have been consolidated into a standardized set of types within CSM. The following Callout types are supported in CSM:

  • feature-small
    This Callout wraps an Embed of a Photo or a Clip and displays it set apart from the text. This displays as the 'small' width of Callout which is normally smaller than the width of the document text container, but can be specified by brand-specific styles.

  • feature-medium
    This Callout wraps an Embed of a Photo or a Clip and displays it set apart from the text. This displays as the 'medium' width of Callout which is normally the width of the document text container, but can be specified by brand-specific styles.

  • feature-large
    This Callout wraps an Embed of a Photo or a Clip and displays it set apart from the text. This displays as the 'large' width of Callout which is normally full-bleed, but can be specified by brand-specific styles.

  • footnote
    This Callout wraps text that represents a footnote, explanatory text that begins with a Footnote marker and that points to some a matching marker included elsewhere in the document text. Footnote markers are normally numbers and are normally formatted as Superscript.

  • group-2
    This Callout wraps a series of two Embeds which are meant to be grouped together. Normally, the Embeds are displayed side-by-side as a diptych rather than stacked, but this can be specified by brand-specific styles.

  • group-3
    This Callout wraps a series of three Embeds which are meant to be grouped together. Normally, the Embeds are displayed side-by-side as a triptych rather than stacked, but this can be specified by brand-specific styles.

  • group-4
    This Callout wraps a series of four Embeds which are meant to be grouped together. Normally, the Embeds are displayed as a 2x2 grid rather than stacked, but this can be specified by brand-specific styles.

  • inset-left
    This Callout displays its content apart from the text, as an inset block positioned on the left side of the document text.

  • inset-right
    This Callout displays its content apart from the text, as an inset block positioned on the right side of the document text.

+++type

Callout content

+++

Callouts may contain other blocks, such as Blockquotes, Embeds, Paragraphs, and Lists, as well as other Callouts:

+++inset-left

This is a paragraph in an inset left Callout.

> Followed by a Blockquote +++

+++inset-left

+++pullquote

This is text that is pulled from elsewhere in the document, which will be displayed in an inset block on the left.

+++

+++

Code

Text marked as Code is meant to represent technical sections of text. Code text will preserve whitespace and is normally rendered in a monospaced font. Some brands may choose to mark non-technical text as Code in order to utilize their different text formatting.

Text can be marked as Code in three different ways:

Inline code represents a section of code which appears inline alongside other text.

This is `inline code`

Code blocks represent a section of code which is set off as its own block of text. They can be indicated by beginning a line with four spaces.

This is a multiline code block

Which is set off by starting a new line

with four blank spaces

Code blocks can also be fenced.

``` This is a fenced multiline block

```

~~~

This is an alternative syntax for a fenced multiline code block

~~~


Embed

Embeds refer to embedded assets which may come from the content graph or which may point to an external source. The embed type may specify either the content type of a piece of content on the content graph, the external platform in the case of platform-specific media, or a media type in the case of a reference to externally-hosted platform-agnostic media.

  • Content type embed types

  • Platform embed types

  • Media embed types

Embeds must have a URI property which can be a relative URI path in the case of embedded assets, or an absolute URL in the case of external content. Embeds additionally accept a caption, height, and width (as a number or percent).

[#type uri](widthxheight)||| Caption text

|||

[#article /articles/5b466e3c867ba60021297c6b]|||

This is an example of an embedded article

|||

[#image /photos/5b1ecc84e283545c0b12e25f maxHeight:200 maxWidth:200](50%x50%)

||| This is an example of an embedded photo with inline attributes

|||

[#facebook:https://www.facebook.com/bobsaget/photos/pb.123094714264.-2207520000.1512591501./10155922354754265/?type=3&theater]

[#gowatchit: https://gowatchit.com/watch/shows/game-of-thrones-78] This is an example of a GoWatchIt embed. The uri should be populated with the GoWatchIt url from the show/movie.

Embeds officially support the additional inline attributes aspectRatio, maxWidth, maxHeight, format, and sandbox, but these do not appear to be used anywhere currently.

[#type uri attr1:val1 attr2:val2 ...](widthxheight)|||

Caption text

|||

Emphasis

Text can be marked with an Emphasis or a Strong (or Double) Emphasis using the delimiters _ or *

this is *emphasized* text this is also _emphasized_ text

this is text with a _*strong emphasis*_

The delimiters runs indicating Emphasis text have the following restrictions

  • the inner boundary for a delimiter run must not be a whitespace character

  • the outer boundary for a delimiter run must be a whitespace or punctuation character if the inner boundary is a punctuation character

  • the outer boundary for a delimiter run must be a whitespace or punctuation character if the delimiter used is _

This is *invalid * Emphasis since the right inner boundary is a whitespace character

This is va*lid* Emphasis

This is in_val_id Emphasis since the delimiter is _ but the left outer boundary is not a whitespace or punctuation character

This is in*.valid* Emphasis since the left inner boundary is a punctuation character but the left outer boundary is not a whitespace or punctuation character

Heading

Headings of levels one to six are supported and are indicated by a number of # characters equal to the level followed by one or more whitespace characters.

### This is a level 1 heading that spans one line ### This is a level 3 heading

Headings of level one and two can also be multiline, indicated by one or more non-empty lines of text that would normally be interpreted as a Paragraph (see below) followed by a sequence of one or more = (for level 1) or - (for level 2)

This is a level 1 heading that spans multiple lines === This is a level 2 heading that spans multiple lines -------

The level of a Heading does not necessarily map to an HTML h1 - h6 tag. Client applications may choose to ultimately render a Heading as a different tag and style them appropriately. For example, Verso chooses to use h2 for Headings of all levels.

Horizontal Rule

A Horizontal Rule is indicated by a sequence of three or more - characters. It may be preceded by zero to three leading spaces. The line preceding it must not be able to be interpreted as belonging to Paragraph, as in that case it will be treated as a multi-line Heading delimiter (see above).

This is some text in a Paragraph which is terminated by a blank line which allows the next line to be a Horizontal Rule

---

> This is a Blockquote followed by a Horizontal Rule that has a leading space

-----

This is a Code block followed by a Horizontal Rule ---

HTML

HTML tags are NOT supported in Copilot Standard Markdown documents, and will be stripped and / or escaped when saved. Any HTML added to a document MUST be considered as non-meaningful, and the intent should be to render the markup as if the writer intended to write code.

Image

Images support a src, altText, and title attributes. They do not support caption, aspect ratio, or height/width attributes. Images are distinct from an Embed of a Photo, which is an embedded photo asset coming from the content graph. Images can be used to refer to external images which are not a part of the content graph, or for which there does not exist a special Embed type (like there does for Giphy embeds). Since these occasions are rare, in most cases a Photo Embed is preferred to an Image.

![This is the altText of the image](imageUrlString "image title")

Linebreak

Line breaks can be preserved between lines of text by ending the line with two blank spaces before the newline character:

This line is terminated with two blank spaces which forces a linebreak before this line

Links contain an href and title attribute. They additionally support inline attributes class, id, rel and target.

[This is the text of a link](href "title"){: .class #id attr1=val1 attr2=val2 }

Lists

A non-nested List Item is indicated by a line beginning with zero to three spaces followed by a list marker sequence:

  • a * character

  • a - character

  • a + character

  • a sequence of one to nine digits followed by a .

  • a sequence of one to nine digits followed by a )

followed by a newline or a sequence of one to three whitespace characters. A List Item may contain multiple block elements (Paragraphs, Blockquotes, Code Blocks) by having lines of text indented with the same amount of whitespace as the first non-marker, non-whitespace character in its first line. Block elements that are indented with fewer spaces will terminate the List Item, as will a blank line.

* This List Item is indented two characters (after the list marker and one subsequent space)

100. This List Item is indented eight spaces (one leading space followed by four characters for the list marker and three subsequent spaces)

20) This List Item is indented 5 spaces (three characters for the list marker and two subsequent spaces)

And this line is a new Paragraph under the same previous List Item since it is indented by 5 spaces

Indenting by 6 spaces also creates a new Paragraph under the same List Item since up to three leading spaces are trimmed in a Paragraph (see below)

> This is a Blockquote under the same List Item. It is indented 5 spaces and begins with an additional 2 leading spaces.

Indenting by 9 spaces is interpreted as nesting a Code block (4 spaces) under the List Item (5 spaces)

A List Item may also contain nested List Items by having lines of text indented at the same level, then followed by the same sequence indicating a non-nested List Item

* This List Item is indented two characters (after the list marker and one subsequent space). Its nesting level is 0 since it is non-nested. 100. This List Item nested within the previous List Item, as it is first indented two spaces, then has one leading space, four characters for a list marker, and three subsequent spaces. In total, it is indented ten spaces. Its nesting level is 1 since it is nested in a List Item of nesting level 0. This is a second Paragraph within the nested List Item above, obtained by indenting this line ten spaces to match the first line's indent level + This List Item is also nested under the very first List Item, as it is indented two characters, then has three leading spaces, one character as a list marker, and one subsequent space. In total it is indented seven spaces. Its nesting level is 1.

A List is a contiguous sequence of List Items, possibly separated by blank lines, that have the same marker character and the same nesting level. Unordered Lists are those that use *, -, and + as their list marker sequence. Ordered Lists are those that use sequences of digits followed by . or ) as their list marker sequence. Ordered lists have their initial ordinal determined by the list marker sequence of the first List Item, but subsequent ordinals are determined by the position of the List Item in the List - the exact sequence of digits used in the List Item does not matter.

* This is the first List Item in an Unordered List + This is the first List Item in a new Unordered List since it uses a different list marker sequence than the previous List Item 10. This is the first List Item in an Ordered List. Its ordinal is 10 since that is the sequence of digits used in its list marker sequence. 100. This is the second List Item in an Ordered List since it has the same list marker sequence and nesting level as the previous List Item. The ordinal for this List Item is 11 since the previous List Item's ordinal is 10. 1000) This is the first List Item in a new Ordered List since it uses a different list marker sequence than the previous List Item.

Paragraph

Paragraphs are series of non-blank lines which cannot be interpreted as other kinds of blocks (so not a List item, HTML block, Blockquote, Code block, Heading, Callout, etc). Paragraphs cannot contain blank lines, so any sequence of blank lines can act as a Paragraph separator. Leading spaces are trimmed on all lines within a Paragraph, thus any lines after the first line may begin with any number of spaces, but the first line must be indented by fewer than four spaces or else it will be interpreted as a Code block. Paragraphs also have special behavior in that the final line of a Paragraph will have its trailing spaces trimmed, so that a Paragraph cannot end with a Linebreak:

This is a Paragraph That has several new line characters But no blank lines. The new line characters will be ignored unless the line ends with two spaces This is a second Paragraph This line of the second Paragraph will have its leading whitespace trimmed but ends with multiple spaces to indicate a Linebreak This line will have its leading and trailing whitespace trimmed so it will not end with a Linebreak

Strong

Text can be marked as Strong using the delimiter __ or **

this is **strong** text this is also __strong__ text

The delimiter runs for Strong text have the same restrictions as those for Emphasis:

  • the inner boundary for a delimiter run must not be a whitespace character

  • the outer boundary for a delimiter run must be a whitespace or punctuation character if the inner boundary is a punctuation character

  • the outer boundary for a delimiter run must be a whitespace or punctuation character if the delimiter used is __

This is **invalid ** Strong since the right inner boundary is a whitespace character This is va**lid** Strong This is in__val__id Strong since the delimiter is _ but the left outer boundary is not a whitespace or punctuation character This is in**.valid** Strong since the left inner boundary is a punctuation character but the left outer boundary is not a whitespace or punctuation character This is .**.valid** Strong, and so is **.this**, since the left inner boundaries are punctuation characters and the left outer boundaries are whitespace or punctuation characters

Section

Sections are indicated by the presence of Sectionbreaks.

This is text in one Section followed by a Sectionbreak. -=-=-=- This is text in another Section.

The presence of no Sectionbreaks indicates no Sections in a document. The presence of one or more Sectionbreaks indicates two or more Sections. If it is desired to create a document with one Section that spans the entirety of the document, the usual way to do that is to begin the text with a Sectionbreak which will create an empty first Section:

-=-=-=- This document has two Sections, the first of which is empty

Drop Cap

The drop cap callout is used to set the beginning of a paragraph with a large letter. The dropcap should include any leading or trailing punctuation around the first letter.

+++dropcap The start of my article. +++

The brand's identity should determine how many lines the letter should span in the article. This callout may be ignored if there is any markup at the beginning of the paragraph.

Lead-in Text

Lead in text is a callout that signifies that the first few words of the article should be rendered in a different font than the rest of the paragraph. Markdown for this is represented by:

+++lead-in-text This is my lead in text. +++

The brand's identity should determine how many words are used for the lead-in text. This callout may be ignored if there is any markup at the beginning of the paragraph.

Small caps

Text can be formatted as small caps using the delimiter * or _ together with an attribute of small.

This *text is smallcaps*{: .small} So is _this text_{: .small}

The delimiter runs for small caps have the same restrictions as those for Emphasis.

  • the inner boundary for a delimiter run must not be a whitespace character

  • the outer boundary for a delimiter run must be a whitespace or punctuation character if the inner boundary is a punctuation character

  • the outer boundary for a delimiter run must be a whitespace or punctuation character if the delimiter used is _

This is an *invalid *{: .small } Smallcaps since the right inner boundary is a whitespace character This is a va*lid*{: .small } Smallcaps This is a _val_{: .small }id Smallcaps since the delimiter is _ and the left outer boundary is a space and the right outer boundary is the character { This is an in_val_{: .small }id Smallcaps since the delimiter is _ and the left outer boundary is not a whitespace or punctuation character This is in*.valid* Smallcaps since the left inner boundary is a punctuation character but the left outer boundary is not a whitespace or punctuation character

Strikethrough

Text can be marked as Strikethrough using the delimiter ~~

This text has ~~Strikethrough~~ formatting

The delimiter runs for Strikethrough text have the same restrictions as those for Emphasis and Strong:

  • the inner boundary for a delimiter run must not be a whitespace character

  • the outer boundary for a delimiter run must be a whitespace or punctuation character if the inner boundary is a punctuation character

This is ~~invalid ~~ Strikethrough since the right inner boundary is a whitespace character This is va~~lid~~ Strikethrough This is in~~.valid~~ Strikethrough since the left inner boundary is a punctuation character but the left outer boundary is not a whitespace or punctuation character This is .~~.valid~~ Strikethrough, and so is ~~.this~~, since the left inner boundaries are punctuation characters and the left outer boundaries are whitespace or punctuation characters

Subscript

Text can be marked as Subscript using the delimiter ~

This text has ~Subscript~ formatting

The delimiter runs for Subscript text have fewer restrictions than Strikethrough. The only restriction is that the inner boundary must not be a whitespace character

This is ~invalid ~ Subscript since the right inner boundary is a whitespace character This is va~lid~ Subscript This is val~.id~ Subscript even though the left inner boundary is a punctuation character (unlike the case for Strikethrough) This is .~.valid~ Subscript, and so is ~.this~

Superscript

Text can be marked as Superscript using the delimiter ^

1 This text has ^Superscript^ formatting

The delimiter runs for Superscript have the same restrictions as those for Subscript. The only restriction is that the inner boundary must not be a whitespace character

This is ^invalid ^ Superscript since the right inner boundary is a whitespace character This is va^lid^ Superscript This is val^.id^ Superscript even though the left inner boundary is a punctuation character (unlike the case for Strikethrough) This is .^.valid^ Superscript, and so is ^.this^

Underline

Text can be formatted with an Underline using the delimiter * or _ together with an attribute of underline.

1 2 This *text is underlined*{: .underline} So is _this text_{: .underline}

The delimiter runs for Underline have the same restrictions as those for Emphasis.

  • the inner boundary for a delimiter run must not be a whitespace character

  • the outer boundary for a delimiter run must be a whitespace or punctuation character if the inner boundary is a punctuation character

  • the outer boundary for a delimiter run must be a whitespace or punctuation character if the delimiter used is _

This is an *invalid *{: .underline } Underline since the right inner boundary is a whitespace character This is a va*lid*{: .underline } Underline This is a _val_{: .underline }id Underline since the delimiter is _ and the left outer boundary is a space and the right outer boundary is the character { This is an in_val_{: .underline }id Underline since the delimiter is _ and the left outer boundary is not a whitespace or punctuation character This is in*.valid* Underline since the left inner boundary is a punctuation character but the left outer boundary is not a whitespace or punctuation character




Did this answer your question?