Walrus mustache grooming. Formatting guides tutorials -

Something went wrong while trying to load more search results. Proper mustache.

We apologize for the inconvenience caused.

Guides and tutorials are submitted in Markdown, with an additional frontmatter and shortcode formatting.

Documentation locations

Content on is pulled from two repositories, amp.dev and AMPHTML. All reference documentation under components is pulled from AMPHTML, either from builtins or extensions.

There are several other documents that are imported to from AMPHTML. They are listed in this file. Don't update these documents in the repository – your changes will get overwritten on subsequent builds!

Frontmatter

Frontmatter exists at the top of each guide and tutorial.

For a list of shortcodes and their uses, please view on GitHub.

Images

is built with AMP! Therefore our images must match the

criteria. The build process uses the following syntact to convert images to proper

Filtering sections

Some documents may be relevant for multiple AMP formats, but certain formats may need further explanation or information that is not relevant to the others. You can filter these sections by wrapping them in the following shortcode.

You can add tips and callouts by wrapping text in the following shortcode:

Code snippets

Place code snippets inside sets of three backticks, specify the language at the end of the first set of backticks.

If your code contains double curly braces, which often is the case if you use

templates, you have to wrap the code part:

Code snippets in lists

Python-Markdown has some limitations. Use the following syntax when including code snippets in lists:

Small mustache

Preview code samples

Code samples can have a preview and/or link to an AMP Playground version.

attribute to define how the preview is generated:

inline: The example preview is displayed above the source code. An inline preview is only possible for normal website examples if the code does not contain any

elements. Use this option for small examples that do not need any styling or other

elements (imports do not count, since they are specified via the

top-frame: The example preview is displayed above the source code inside an iframe. The orientation can be toggled between

mode. You can preselect the orientation by specifying the additional attribute:

default: landscape|portrait

If custom elements are needed, specify them in the

attribute as a comma separated list with the name of the component followed by a colon and the version. If your code uses

specify the dependency in the

For email content with resource links use the placeholder

Inline Sample

Here is simple inline sample embed. You can define CSS via inline styles:

Beard and mustache styles 2014

This is what it looks like:

Top-Frame Preview

Use top-frame preview whenever you need to specify header elements or define global styles inside

This is what it looks like:

AMP Stories

for previewing AMP Stories.

This is what it looks like:

Absolute URLs for AMP Email

for making the endpoint URL absolute if embedded inside an AMP email.

This is what it looks like:

Escaping mustache tempaltes

sample using a remote endpoint. Mustache templates need to be escaped in samples using

This is what it looks like:

You can link to other pages with standard markdown link syntax:

When linking to another page on the reference will be a relative filepath to the target file.

Anchors

Link to specific sections in a document using anchors:

Please create the anchor target using

How to thin a moustache

before linking to a section with no anchor present. A good place is at the end of the section headline:

You must only use letters, digits, the dash and the underscore in an anchor. Please use short anchor names in english that match the headline or describe the section. Ensure the anchor name is unique inside the document.

When a Page is translated the anchor names must not be changed and remain in english.

When you create an anchor that will be used in a link from another page you should also create the same anchor in all translations.

AMP format filter

Component documentation, guides and tutorials and examples are filterable by AMP format, such as AMP websites or AMP stories. When linking out to such a page you should explicitly specify a format, which is supported by the target, by appending the format parameter to the link:

Only when you are sure the target supports all the formats that your page does you can omit the parameter.

Component references

A link to a component reference documentation will automatically point to the latest version if your link omits the version part. When you explicitly want to point to a version specify the full name:

Document Structure

Titles, headings and subheadings

The first letter of the first word in titles, headings and subheadings is capitalized, what follows is lowercase. Expectations include AMP and other proper nouns. No heading is titled

, introductions follow the document title.

Document naming

Name documents with the dash naming convention.