This is the title of the post, which might get a little big long for some of them.

This is a paragraph. As of now, the line limit is 80 characters.

This paragraph contains markup like links, strong, italics. A link. Nunc vulputate strong, et gravida ipsum bibendum nec. Quisque a leo sed mi commodo consequat. Sed congue tempus justo, et italics risus vulputate ac. Maecenas lobortis tellus leo vehicula euismod. Sed urna ante, sodales a sodales nec, mattis non augue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel augue ultricies, eleifend nisl non, tincidunt nulla. Nunc vulputate porttitor risus, et gravida ipsum bibendum nec. Quisque a leo sed mi commodo consequat. Sed congue tempus justo, et imperdiet risus vulputate ac.

Browser compatibility

Browser Support

  • x
  • x
  • x

Source

Caption

With a nonce-based CSP, every <script> element must have a nonce attribute which matches the random nonce value specified in the CSP header (all scripts can have the same nonce). The first step is to add these attributes to all scripts:

Blocked by CSP

<script src="/path/to/script.js"></script>
<script>foo()</script>

CSP will block these scripts, because they don't have `nonce` attributes.

Allowed by CSP

<script nonce="${NONCE}" src="/path/to/script.js"></script>
<script nonce="${NONCE}">foo()</script>

CSP will allow the execution of these scripts if `${NONCE}` is replaced with a value matching the nonce in the CSP response header. Note that some browsers will hide the `nonce` attribute when inspecting the page source.

Compare & CompareCaption

The lang attribute can only have one language associated with it. This means the <html> attribute can only have one language, even if there are multiple languages on the page. Set lang to the primary language of the page.

Don't
<html lang="ar,en,fr,pt">...</html>
Multiple languages are not supported.
Do
<html lang="ar">...</html>
Set only the page's primary language. In this case, the language is Arabic.

Code

Examples for various displays of code.

HTML (with CSS and JS)

<!-- This should highlight as HTML -->
<head>
    <title>Example</title>
    <style>
        /* This should highlight as CSS */
        .test {
          color: red;
        }
    </style>
</head>
<body>
    <p class="test">This is an example of a simple HTML page with one paragraph.</p>
</body>
<script>
  /* This should highlight as JavaScript */
  const helloWorld = 'Hello World';

  function sayHelloWorld() {
    console.log(helloWorld);
    if (false) {
      // Unreachable code.
    }
    return;
  }

  sayHelloWorld();
</script>

CSS

/* This should highlight as CSS */
.test {
  color: red;
}

#test {
  color: green;
}

JavaScript

/* This should highlight as JavaScript */
const helloWorld = 'Hello World';

function sayHelloWorld() {
  console.log(helloWorld);
  if (false) {
    // Unreachable code.
  }
  return;
}

sayHelloWorld();

Inline code

This is a paragraph with inline code, like <html lang="en"> and console.log('Hello World');. A longer snippet like document.onload = function() { console.log('Document load!); }.

Code blocks nested in HTML

HTML (with CSS and JS) in a <div>

<head>
    <title>Example</title>
    <style>
        /* This should highlight as CSS */
        .test {
          color: red;
        }
    </style>
</head>
<body>
    <p class="test">This is an example of a simple HTML page with one paragraph.</p>
</body>
<script>
  const helloWorld = 'Hello World';

  function sayHelloWorld() {
    console.log(helloWorld);
    if (false) {
      // Unreachable code.
    }
    return;
  }

  sayHelloWorld();
</script>

CSS in a <div>

/* This should highlight as CSS */
.test {
  color: red;
}

#test {
  color: green;
}

JavaScript in a <div>

/* This should highlight as JavaScript */
const helloWorld = 'Hello World';

function sayHelloWorld() {
  console.log(helloWorld);
  if (false) {
    // Unreachable code.
  }
  return;
}

sayHelloWorld();

Embedded content

Use dcc-embed class for embedded iframes, for example from Codepen.

Expandable

Example of <devsite-expandable> element.

Compare screenshots from this video, with and without captions.
Video with captions.
Figcaption
Video without captions.
Figcaption

Images

This is an image. Wrap an image in the <figure> element. Remember to stage the images before staging the article that embeds them.

Appropriate image description
Optional figcapion.

Label

app/src/main/aidl/org/chromium/components/payments/IPaymentDetailsUpdateService

package org.chromium.components.payments;
import android.os.Bundle;

interface IPaymentDetailsUpdateServiceCallback {
    oneway void updateWith(in Bundle updatedPaymentDetails);

    oneway void paymentDetailsNotUpdated();
}

Lists

See the Lists section of the Grammar, mechanics, and usage post for information about when to use each list type.

Use standard Markdown syntax for lists: 1. for ordered lists and - for unordered lists.

Ordered list

  1. Lorem ipsum dolor sit amet…
  2. Lorem ipsum dolor sit amet…
  3. Lorem ipsum dolor sit amet…

Unordered list

  • Lorem ipsum dolor sit amet…
  • Lorem ipsum dolor sit amet…
  • Lorem ipsum dolor sit amet…

Definition list

First Term
This is the definition of the first term.
Second Term
This is one definition of the second term.
This is another definition of the second term.

Stats

Use the Stats component to call out important statistics about a product or service discussed in a post. (Stats are primarily used in case studies.)

Include no more than four statistics in a single Stats component to avoid layout issues.

    30 %

    Lower cost per conversion

    13 %

    Higher CTR

    4 x

    Faster load times

Switcher

HIIT training online session with green high intensity timer.
Active period.
HIIT training online session with red low intensity timer.
Resting period.

Tables

Table in Markdown.

Codec Extension Library
av1 WebM, mkv libaom-av1
h264 MP4 libx264
vp9 WebM libvpx-vp9