Title Header (H1 header)

Introduction (H3 header)

This is some placeholder text to show examples of Markdown formatting. We have a full article template you can use when writing a DigitalOcean article. Please refer to our style and formatting guidelines for more detailed explanations: https://do.co/style

Prerequisites (H2 header)

Before you begin this guide you’ll need the following:

Step 1 — Basic Markdown

This is italics, this is bold, and this is strikethrough.

  • This is a list item.
  • This list is unordered.
  1. This is a list item.
  2. This list is ordered.

This is a quote.

This is a quote inside a quote.

  • This is a list in a quote.
  • Another item in the quote list.

Here’s how to include an image with alt text and a title:

Alt text for screen readers
DigitalOcean Logo

Use horizontal rules to break up long sections:


Rich transformations are also applied:

  • On ellipsis: …
  • On quote pairs: “sammy”, ‘test’
  • On dangling single quotes: it’s
  • On en/em dashes: a – b, a — b
Tables are also supported and will overflow cleanly if needed
col 1 col 2 col 3 col 4 col 5 col 6 col 7 col 8 col 9 col 10
col 1 col 2 col 3 col 4 col 5 col 6 col 7 col 8 col 9 col 10
col 1 col 2 col 3 col 4 col 5 col 6 col 7 col 8 col 9 col 10
col 1 col 2 col 3 col 4 col 5 col 6 col 7 col 8 col 9 col 10
col 1 col 2 col 3 col 4 col 5 col 6 col 7 col 8 col 9 col 10

Step 2 — Code

This is inline code. This is a variable. This is an in-line code variable.

Here’s a configuration file with a label:

/etc/nginx/sites-available/default
server {
    listen 80 default_server;
    . . .
}

Examples can have line numbers, and every code block has a ‘Copy’ button to copy just the code:

  1. const test = 'hello';
  2. const other = 'world';
  3. console.log(test, other);

Here’s output from a command with a secondary label:

Output
Could not connect to Redis at 127.0.0.1:6379: Connection refused

This is a non-root user command example:

  1. sudo apt-get update
  2. sudo apt-get install python3

This is a root command example:

  1. adduser sammy
  2. shutdown

This is a custom prefix command example:

  1. FLUSH PRIVILEGES;
  2. SELECT * FROM articles;

A custom prefix can contain a space by using \s:

  1. FLUSH PRIVILEGES;
  2. SELECT * FROM articles;

Indicate where commands are being run with environments:

  1. ssh root@server_ip
  1. echo "Secondary server"
  1. echo "Tertiary server"
  1. echo "Quaternary server"
  1. echo "Quinary server"

And all of these can be combined together, with a language for syntax highlighting as well as a line prefix (line numbers, command, custom prefix, etc.), and even an environment and label:

index.html
  1. <html>
  2. <body>
  3. <head>
  4. <title>My Title</title>
  5. </head>
  6. <body>
  7. . . .
  8. </body>
  9. </html>

Step 3 — Callouts

Here is a note, a warning, some info and a draft note:

Note: Use this for notes on a publication.

Warning: Use this to warn users.

Info: Use this for product information.

Draft: Use this for notes in a draft publication.

A callout can also be given a label, which supports inline markdown as well:

Labels support inline markdown

Note: Use this for notes on a publication.

You can also mention users by username:

@MattIPv4

Step 4 — Layout

Columns allow you to customise the layout of your Markdown:

Content inside a column is regular Markdown block content.

Any block or inline syntax can be used, including quotes.

Two or more columns adjacent to each other are needed to create a column layout.

On desktop the columns will be evenly distributed in a single row, on tablets they will wrap naturally, and on mobile they will be in a single stack.

Content can be hidden using details.

Inside the details block you can use any block or inline syntax.

You could hide the solution to a problem:

// Write a message to console
console.log('Hello, world!');
You can also have the details block open by default.

Pass open as the first argument to the summary section to do this.

You can also pass closed, though this is the same as not passing anything before the summary.

Step 5 — Embeds

YouTube

Embedding a YouTube video (id, height, width):

DNS

Embedding DNS record lookups (hostname, record types…):

Glob

Demonstrating how glob matching works (pattern, tests…):

Glob embeds can also be written as multiple lines if needed:

CodePen

Embedding a CodePen example (username, pen ID, flags…):

See the Pen vwPzeX by MattCowley (@MattCowley) on CodePen.

Setting a custom height for the CodePen:

See the Pen vwPzeX by MattCowley (@MattCowley) on CodePen.

Enabling dark mode on a CodePen embed:

See the Pen vwPzeX by MattCowley (@MattCowley) on CodePen.

Setting the CodePen embed to only run when clicked:

See the Pen vwPzeX by MattCowley (@MattCowley) on CodePen.

Changing the default tab of a CodePen embed (can be html, css, or js):

See the Pen vwPzeX by MattCowley (@MattCowley) on CodePen.

Making the CodePen editable by the user (requires a Pro CodePen account):

See the Pen Yxzjdz by chriscoyier (@chriscoyier) on CodePen.

Combining different CodePen embed flags together is also supported:

See the Pen vwPzeX by MattCowley (@MattCowley) on CodePen.

Glitch

Embedding a Glitch project (slug, flags…):

Setting a custom height for the Glitch project:

Showing the Glitch project code by default:

Hiding the file tree by default when showing the Glitch project code:

Setting a default file to show, and highlighting lines in the file:

Removing the author attribution from the Glitch embed:

Can I Use

Embedding usage information from Can I Use (feature slug, flags…):

Data on support for the css-grid feature across the major browsers from caniuse.com

Control how many previous browser versions are listed (0-5):

Data on support for the css-grid feature across the major browsers from caniuse.com

Control how many future browser versions are listed (0-3):

Data on support for the css-grid feature across the major browsers from caniuse.com

Enable the accessible color scheme by default:

Data on support for the css-grid feature across the major browsers from caniuse.com

Asciinema

Embedding a terminal recording from Asciinema:

Setting a custom number of cols and rows for the Asciinema terminal:

Step 6 — Tutorials

Certain features of our Markdown engine are designed specifically for our tutorial content-types. These may not be enabled in all contexts in the DigitalOcean community, but are enabled by default in the do-markdownit plugin.

[rsvp_button 1234 “Marketo RSVP buttons use the rsvp_button flag”]

[terminal ubuntu:focal Terminal buttons are behind the terminal flag]

Conclusion

Please refer to our writing guidelines for more detailed explanations on our style and formatting.