A sample docs post used for visual testing.

There are five types of headings you can add to a post:

# Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi quam sem. Integer et erat ac mi scelerisque suscipit et vitae nulla. Aliquam scelerisque efficitur ante ut facilisis.

# Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi quam sem. Integer et erat ac mi scelerisque suscipit et vitae nulla. Aliquam scelerisque efficitur ante ut facilisis.

# Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi quam sem. Integer et erat ac mi scelerisque suscipit et vitae nulla. Aliquam scelerisque efficitur ante ut facilisis.

# Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi quam sem. Integer et erat ac mi scelerisque suscipit et vitae nulla. Aliquam scelerisque efficitur ante ut facilisis.

# Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi quam sem. Integer et erat ac mi scelerisque suscipit et vitae nulla. Aliquam scelerisque efficitur ante ut facilisis.

# Level 1 - a

The headings you use are relevant to the table of contents. Adding a h2, such as the one above, will result in a top level item being added. Using a h3 such as the subtitle below, will result in a nested item.

# Level 2 - a

You can add as many as these as you like.

Lorem ipsum dolor sit amet. Qui possimus unde et nesciunt vero eos vitae cumque. In quidem dicta et obcaecati rerum ex repudiandae expedita ea officia voluptatibus et quis enim 33 autem veritatis.

# Level 2 - b

Lorem ipsum dolor sit amet. Qui possimus unde et nesciunt vero eos vitae cumque. In quidem dicta et obcaecati rerum ex repudiandae expedita ea officia voluptatibus et quis enim 33 autem veritatis. Est libero rerum eos autem enim qui dolor rerum aut dolor autem 33 harum provident? Sed eius dolorum quo neque maxime qui enim quod id accusamus eius et sint odio a minima nihil qui veritatis labore?

# Level 2 - c: a longer title used to demonstrate multi lines links in the TOC

Lorem ipsum dolor sit amet. Qui possimus unde et nesciunt vero eos vitae cumque. In quidem dicta et obcaecati rerum ex repudiandae expedita ea officia voluptatibus et quis enim 33 autem veritatis. Est libero rerum eos autem enim qui dolor rerum aut dolor autem 33 harum provident? Sed eius dolorum quo neque maxime qui enim quod id accusamus eius et sint odio a minima nihil qui veritatis labore?

# You can use other headings too

They'll be added to the page like any other, but they won't show in the TOC.

Lorem ipsum dolor sit amet. Qui possimus unde et nesciunt vero eos vitae cumque. In quidem dicta et obcaecati rerum ex repudiandae expedita ea officia voluptatibus et quis enim 33 autem veritatis. Est libero rerum eos autem enim qui dolor rerum aut dolor autem 33 harum provident? Sed eius dolorum quo neque maxime qui enim quod id accusamus eius et sint odio a minima nihil qui veritatis labore?

# Level 1 - b

Adding another H2 results in a new top level item.

# Images

# You can add images using Markdown

# Or with HTML

# When adding with HTML, you can float images as follows

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper.

# You can also add fullwidth images

# And images with a border

# Horizontal line

To break the page up you can add a horizontal line as follows:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at.

# Lists

You can add unordered lists using Markdown:

• Lorem Ipsum is simply dummy text
  • Unordered lists support nesting
  • Lorem Ipsum is simply dummy text
  • Lorem Ipsum is simply dummy text
• Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  1. You can nest either type of list
  2. Lorem Ipsum is simply dummy text
• Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

You can add ordered lists using Markdown:

1. Lorem

• Ordered lists also support nesting
• B
• C

2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
3. You can nest either type of list
4. Lorem Ipsum is simply dummy text
5. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

You can also add lists with HTML. This may prove useful if you need to include images or other shortcodes/blocks within the list:

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper.

  

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper.
  Caution

  This type of callout suggests proceeding with caution.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper.

# Code

You can add code inline console.warn(). Great!

You can also add code blocks. When using code blocks you should define the language. This will enable code highlighting as follows.

function foo() {
  return 'bar';
}

figure {
  break-inside: avoid;
}

# Tables

It's possible to add tables using markdown. Here's an example:

# Links

You can add links using markdown.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at quam sem.

# Emphasis

You can add emphasis by making text bold or italic:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris. Vestibulum porta dolor erat, vel molestie dolor posuere in. Nam vel elementum augue. Nam quis enim blandit, posuere justo dignissim, scelerisque diam. Fusce aliquet urna ac blandit ullamcorper. Proin et semper nibh, sit amet imperdiet velit. Morbi at quam sem.

You can also use both at the same time:

Here is some text that really stands out

# Strikethrough

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper. Suspendisse auctor ultrices ante, nec tempus nibh varius at. Cras ligula lacus, porta vitae maximus a, ultrices a mauris.

# Color

You can change the color of text as follows:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel feugiat purus. In a eros faucibus, rhoncus diam ac, aliquam libero. Vestibulum non ligula purus. Suspendisse at mauris sem. Nunc elementum vehicula turpis, at commodo dui convallis sed. Etiam lorem magna, blandit at mauris vitae, ultricies sollicitudin diam. In vulputate fringilla bibendum. Maecenas interdum sem libero, ut feugiat nunc pharetra eget. Cras volutpat nisl eu porta tincidunt. Vivamus non consequat sapien. In turpis ante, ornare vitae diam quis, pretium interdum diam. Nulla imperdiet tincidunt mauris, vitae mattis eros ultricies at. Etiam bibendum ligula a accumsan tempus. Aliquam sed sagittis turpis. Praesent eget malesuada quam. Curabitur semper tincidunt posuere.

# Elevation

The elevation class adds a box shadow and can be used to bring more attention to an element. There are 5 levels of elevation:

# Buttons

If the need arises you can add buttons to a post as follows.

# Material button with no background

Test

# Material button with background

Test

# Rounded material button

Test

# Text button

# Stats

The stats block offers a visually appealing way to add statistics to a post:

It renders as a grid on desktop with each row holding 3 items. If you add more than 3 items it will simply move them to a new row:

# Switcher

The switcher block displays two images side-by-side and is useful for contrasting two images against one another.

# Aside

There are 8 types of aside which can be added as follows:

# Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa sit amet ullamcorper.

Jon Doe

# Columns

The columns shortcode supports an arbitrary number of columns. Define as many as you need and the available space will be divided equally between them.

Here's an example with 4 columns:

And another with 2:

# Compare

The compare shortcode allows two snippets to be clearly contrasted against each other.

There are two types: better and worse. They look as follows.

<h1>Some bad code</h1>

<h1>Some better code</h1>

You can provide custom labels:

And captions:

<h1>Some better code</h1>

# Details

The details shortcode allows you to add a summary to the page that shows additional information when clicked.

# IncludeRaw

The includeRaw shortcode takes a filepath as its only parameter. It fetches the content the file and renders it to the page.

It can be nested within a codeblock as below to use code highlighting:

/*
 * Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

export type VideoArgs = {
  /**
   * A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
   */
  autoplay?: boolean;
  /**
   * A Boolean attribute which if true indicates that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application.
   */
  autoPictureInPicture?: boolean;
  /**
   * A space-separated list of the classes of the element.
   */
  class?: string;
  /**
   * If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
   */
  controls?: boolean;
  /**
   * Prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases.
   */
  disablePictureInPicture?: boolean;
  /**
   * The height of the video's display area, in CSS pixels (absolute values only; no percentages.)
   */
  height?: number;
  /**
   * Often used with CSS to style a specific element. The value of this attribute must be unique.
   */
  id?: string;
  /**
   * A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.
   */
  loop?: boolean;
  /**
   * Flag to wrap video in `a` tag pointing to the video. `false` by default.
   */
  linkTo?: boolean;
  /**
   * A Boolean attribute that indicates the default setting of the audio contained in the video.
   * Defaults to true if `autoplay` is enabled because browsers require autoplay videos to also be muted.
   */
  muted?: boolean;
  /**
   * A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.
   */
  playsinline?: boolean;
  /**
   * Pathname of image hosted by imgix to be shown while the video is downloading.
   */
  poster?: string;
  /**
   * This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played.
   */
  preload?: 'none' | 'metadata' | 'auto';
  /**
   * Pathname(s) of video hosted by CDN.
   */
  src: string | string[];
  /**
   * The width of the video's display area, in CSS pixels (absolute values only; no percentages).
   */
  width?: number;
};

# Partials

The partial shortcode can be used to add partials (from the _partials directory) to the page:

# Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

# Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com.
• Report a DevTools issue using the More options     > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools.
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

# Video

Once uploaded to storage.googleapis.com, videos can be added to the page via the Video shortcode.