@digitalocean/do-markdownit

<h1 id="title-header-h1-header"><a class="hash-anchor" href="#title-header-h1-header" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#title-header-h1-header" onclick="navigator.clipboard.writeText(this.href);">Title Header (H1 header)</a></h1> <h3 id="introduction-h3-header"><a class="hash-anchor" href="#introduction-h3-header" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#introduction-h3-header" onclick="navigator.clipboard.writeText(this.href);">Introduction (H3 header)</a></h3> <p>This is some placeholder text to show examples of Markdown formatting. We have <a href="https://github.com/do-community/do-article-templates">a full article template</a> you can use when writing a DigitalOcean article. Please refer to our style and formatting guidelines for more detailed explanations: <a href="https://do.co/style">https://do.co/style</a></p> <h2 id="prerequisites-h2-header"><a class="hash-anchor" href="#prerequisites-h2-header" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#prerequisites-h2-header" onclick="navigator.clipboard.writeText(this.href);">Prerequisites (H2 header)</a></h2> <p>Before you begin this guide you’ll need the following:</p> <ul> <li>Familiarity with <a href="https://daringfireball.net/projects/markdown/">Markdown</a></li> </ul> <h2 id="step-1-basic-markdown"><a class="hash-anchor" href="#step-1-basic-markdown" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-1-basic-markdown" onclick="navigator.clipboard.writeText(this.href);">Step 1 — Basic Markdown</a></h2> <p>This is <em>italics</em>, this is <strong>bold</strong>, this is <u>underline</u>, and this is <s>strikethrough</s>.</p> <ul> <li>This is a list item.</li> <li>This list is unordered.</li> </ul> <ol> <li>This is a list item.</li> <li>This list is ordered.</li> </ol> <blockquote> <p>This is a quote.</p> <blockquote> <p>This is a quote inside a quote.</p> </blockquote> <ul> <li>This is a list in a quote.</li> <li>Another item in the quote list.</li> </ul> </blockquote> <p>Here’s how to include an image with alt text and a title:</p> <figure><img src="https://assets.digitalocean.com/logos/DO_Logo_horizontal_blue.png" alt="Alt text for screen readers"><figcaption>DigitalOcean Logo</figcaption></figure> <p><em>We also support some extra syntax for setting the width, height and alignment of images. You can provide pixels (<code>200</code>/<code>200px</code>), or a percentage (<code>50%</code>), for the width/height. The alignment can be either <code>left</code> or <code>right</code>, with images being centered by default. These settings are all optional.</em></p> <p><img src="https://assets.digitalocean.com/public/mascot.png" alt="" width="200" height="131" align="left"></p> <p>Use horizontal rules to break up long sections:</p> <hr> <p>Rich transformations are also applied:</p> <ul> <li>On ellipsis: …</li> <li>On quote pairs: “sammy”, ‘test’</li> <li>On dangling single quotes: it’s</li> <li>On en/em dashes: a – b, a — b</li> </ul> <div class="table-wrapper"><table> <thead> <tr> <th>Tables</th> <th>are</th> <th>also</th> <th>supported</th> <th>and</th> <th>will</th> <th>overflow</th> <th>cleanly</th> <th>if</th> <th>needed</th> </tr> </thead> <tbody> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> <td>col 4</td> <td>col 5</td> <td>col 6</td> <td>col 7</td> <td>col 8</td> <td>col 9</td> <td>col 10</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> <td>col 4</td> <td>col 5</td> <td>col 6</td> <td>col 7</td> <td>col 8</td> <td>col 9</td> <td>col 10</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> <td>col 4</td> <td>col 5</td> <td>col 6</td> <td>col 7</td> <td>col 8</td> <td>col 9</td> <td>col 10</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> <td>col 4</td> <td>col 5</td> <td>col 6</td> <td>col 7</td> <td>col 8</td> <td>col 9</td> <td>col 10</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> <td>col 4</td> <td>col 5</td> <td>col 6</td> <td>col 7</td> <td>col 8</td> <td>col 9</td> <td>col 10</td> </tr> </tbody> </table> </div><h2 id="step-2-code"><a class="hash-anchor" href="#step-2-code" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-2-code" onclick="navigator.clipboard.writeText(this.href);">Step 2 — Code</a></h2> <p>This is <code>inline code</code>. This is a <mark>variable</mark>. This is an <code>in-line code <mark>variable</mark></code>. You can also have <a href="https://www.digitalocean.com"><code>code</code> in links</a>.</p> <p>Here’s a configuration file with a label:</p> <div class="code-label" title="/etc/nginx/sites-available/default">/etc/nginx/sites-available/default</div> <pre class="language-nginx"><code><span class="token directive"><span class="token keyword">server</span></span> <span class="token punctuation">{</span> <span class="token directive"><span class="token keyword">listen</span> <span class="token number">80</span> <mark>default_server</mark></span><span class="token punctuation">;</span> . . . <span class="token punctuation">}</span> </code></pre> <p>Examples can have line numbers, and every code block has a ‘Copy’ button to copy just the code:</p> <div class="code-label" title=""></div> <pre class="prefixed line_numbers language-javascript"><code><ol><li data-prefix="1"><span class="token keyword">const</span> test <span class="token operator">=</span> <span class="token string">'hello'</span><span class="token punctuation">;</span> </li><li data-prefix="2"><span class="token keyword">const</span> other <span class="token operator">=</span> <span class="token string">'world'</span><span class="token punctuation">;</span> </li><li data-prefix="3">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>test<span class="token punctuation">,</span> other<span class="token punctuation">)</span><span class="token punctuation">;</span> </li></ol> </code></pre> <p>Here’s output from a command with a secondary label:</p> <div class="code-label" title=""></div> <pre><code><div class="secondary-code-label" title="Output">Output</div>Could not connect to Redis at 127.0.0.1:6379: Connection refused </code></pre> <p>This is a non-root user command example:</p> <div class="code-label" title=""></div> <pre class="prefixed command language-bash"><code><ol><li data-prefix="$"><span class="token function">sudo</span> <span class="token function">apt-get</span> update </li><li data-prefix="$"><span class="token function">sudo</span> <span class="token function">apt-get</span> <span class="token function">install</span> python3 </li></ol> </code></pre> <p>This is a root command example:</p> <div class="code-label" title=""></div> <pre class="prefixed super_user language-bash"><code><ol><li data-prefix="#">adduser sammy </li><li data-prefix="#"><span class="token function">shutdown</span> </li></ol> </code></pre> <p>This is a custom prefix command example:</p> <div class="code-label" title=""></div> <pre class="prefixed custom_prefix language-bash"><code><ol><li data-prefix="mysql>">FLUSH PRIVILEGES<span class="token punctuation">;</span> </li><li data-prefix="mysql>">SELECT * FROM articles<span class="token punctuation">;</span> </li></ol> </code></pre> <p>A custom prefix can contain a space by using <code>\s</code>:</p> <div class="code-label" title=""></div> <pre class="prefixed custom_prefix language-bash"><code><ol><li data-prefix="(my-server) mysql>">FLUSH PRIVILEGES<span class="token punctuation">;</span> </li><li data-prefix="(my-server) mysql>">SELECT * FROM articles<span class="token punctuation">;</span> </li></ol> </code></pre> <p>Indicate where commands are being run with environments:</p> <div class="code-label" title=""></div> <pre class="prefixed command environment-local language-bash"><code><ol><li data-prefix="$"><span class="token function">ssh</span> root@server_ip </li></ol> </code></pre> <div class="code-label" title=""></div> <pre class="prefixed command environment-second language-bash"><code><ol><li data-prefix="$"><span class="token builtin class-name">echo</span> <span class="token string">"Secondary server"</span> </li></ol> </code></pre> <div class="code-label" title=""></div> <pre class="prefixed command environment-third language-bash"><code><ol><li data-prefix="$"><span class="token builtin class-name">echo</span> <span class="token string">"Tertiary server"</span> </li></ol> </code></pre> <div class="code-label" title=""></div> <pre class="prefixed command environment-fourth language-bash"><code><ol><li data-prefix="$"><span class="token builtin class-name">echo</span> <span class="token string">"Quaternary server"</span> </li></ol> </code></pre> <div class="code-label" title=""></div> <pre class="prefixed command environment-fifth language-bash"><code><ol><li data-prefix="$"><span class="token builtin class-name">echo</span> <span class="token string">"Quinary server"</span> </li></ol> </code></pre> <p>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:</p> <div class="code-label" title="index.html">index.html</div> <pre class="prefixed line_numbers environment-second language-markup"><code><ol><li data-prefix="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> </li><li data-prefix="2"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> </li><li data-prefix="3"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> </li><li data-prefix="4"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span><mark>My Title</mark><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> </li><li data-prefix="5"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> </li><li data-prefix="6"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> </li><li data-prefix="7"> . . . </li><li data-prefix="8"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </li><li data-prefix="9"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </li></ol> </code></pre> <h2 id="step-3-callouts"><a class="hash-anchor" href="#step-3-callouts" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-3-callouts" onclick="navigator.clipboard.writeText(this.href);">Step 3 — Callouts</a></h2> <p>Here is a note, a warning, some info and a draft note:</p> <div class="callout note"> <p><strong>Note:</strong> Use this for notes on a publication.</p> </div> <div class="callout warning"> <p><strong>Warning:</strong> Use this to warn users.</p> </div> <div class="callout info"> <p><strong>Info:</strong> Use this for product information.</p> </div> <div class="callout draft"> <p><strong>Draft:</strong> Use this for notes in a draft publication.</p> </div> <p>A callout can also be given a label, which supports inline markdown as well:</p> <div class="callout note"> <p class="callout-label">Labels support <em>inline</em> <strong>markdown</strong></p> <p><strong>Note:</strong> Use this for notes on a publication.</p> </div> <p>You can also mention users by username:</p> <p><a href="/users/MattIPv4">@MattIPv4</a></p> <h2 id="step-4-layout"><a class="hash-anchor" href="#step-4-layout" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-4-layout" onclick="navigator.clipboard.writeText(this.href);">Step 4 — Layout</a></h2> <p>Columns allow you to customise the layout of your Markdown:</p> <div class="columns"> <div class="column"> <p>Content inside a column is regular Markdown block content.</p> <blockquote> <p>Any block or inline syntax can be used, including quotes.</p> </blockquote> </div> <div class="column"> <p>Two or more columns adjacent to each other are needed to create a column layout.</p> <p>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.</p> </div> </div> <details> <summary>Content can be hidden using <code>details</code>.</summary> <p>Inside the details block you can use any block or inline syntax.</p> <p>You could hide the solution to a problem:</p> <div class="code-label" title=""></div> <pre class="language-javascript"><code><span class="token comment">// Write a message to console</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello, world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </details> <details open=""> <summary>You can also have the details block open by default.</summary> <p>Pass <code>open</code> as the first argument to the summary section to do this.</p> <p><em>You can also pass <code>closed</code>, though this is the same as not passing anything before the summary.</em></p> </details> <h2 id="step-5-embeds"><a class="hash-anchor" href="#step-5-embeds" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-5-embeds" onclick="navigator.clipboard.writeText(this.href);">Step 5 — Embeds</a></h2> <h3 id="youtube"><a class="hash-anchor" href="#youtube" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#youtube" onclick="navigator.clipboard.writeText(this.href);">YouTube</a></h3> <p>Embedding a YouTube video (id, height, width):</p> <iframe src="https://www.youtube.com/embed/iom_nhYQIYk" class="youtube" height="225" width="400" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen> <a href="https://www.youtube.com/watch?v=iom_nhYQIYk" target="_blank">View YouTube video</a> </iframe> <p><em>Both the width and height are optional, with the defaults being 480 and 270 respectively.</em><br> <em>The width/height set are treated as maximums – the video will scale down to fit the available space, maintaining the aspect ratio.</em></p> <h3 id="wistia"><a class="hash-anchor" href="#wistia" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#wistia" onclick="navigator.clipboard.writeText(this.href);">Wistia</a></h3> <p>Embedding a Wistia video (id, height, width):</p> <iframe src="https://fast.wistia.net/embed/iframe/7ld71zbvi6" class="wistia" height="225" width="400" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen> <a href="https://fast.wistia.net/embed/iframe/7ld71zbvi6" target="_blank">View Wistia video</a> </iframe> <p><em>As with the YouTube embed, both the width and height are optional and have the same defaults.</em><br> <em>The same behaviour applies to the width/height set, with responsive scaling.</em></p> <h3 id="vimeo"><a class="hash-anchor" href="#vimeo" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#vimeo" onclick="navigator.clipboard.writeText(this.href);">Vimeo</a></h3> <p>Embedding a Vimeo video (url, height, width):</p> <iframe src="https://player.vimeo.com/video/329272793" class="vimeo" height="225" width="400" style="aspect-ratio: 16/9" frameborder="0" allowfullscreen> <a href="https://player.vimeo.com/video/329272793" target="_blank">View Vimeo video</a> </iframe> <p><em>As with the YouTube embed, both the width and height are optional and have the same defaults.</em><br> <em>The same behaviour applies to the width/height set, with responsive scaling.</em></p> <h3 id="dns"><a class="hash-anchor" href="#dns" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#dns" onclick="navigator.clipboard.writeText(this.href);">DNS</a></h3> <p>Embedding DNS record lookups (hostname, record types…):</p> <div data-dns-tool-embed data-dns-domain="digitalocean.com" data-dns-types="A,AAAA"> <a href="https://www.digitalocean.com/community/tools/dns?domain=digitalocean.com" target="_blank"> Perform a full DNS lookup for digitalocean.com </a> </div> <h3 id="glob"><a class="hash-anchor" href="#glob" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#glob" onclick="navigator.clipboard.writeText(this.href);">Glob</a></h3> <p>Demonstrating how glob matching works (pattern, tests…):</p> <div data-glob-tool-embed data-glob-string="**/*.js" data-glob-test-0="a/b.js" data-glob-test-1="c/d.js" data-glob-test-2="e.jsx" data-glob-test-3="f.md"> <a href="https://www.digitalocean.com/community/tools/glob?glob=**%2F*.js&tests=a%2Fb.js&tests=c%2Fd.js&tests=e.jsx&tests=f.md" target="_blank"> Explore <code>**/*.js</code> as a glob string in our glob testing tool </a> </div> <p>Glob embeds can also be written as multiple lines if needed:</p> <div data-glob-tool-embed data-glob-string="**/*.js" data-glob-test-0="a/b.js" data-glob-test-1="c/d.js" data-glob-test-2="e.jsx" data-glob-test-3="f.md"> <a href="https://www.digitalocean.com/community/tools/glob?glob=**%2F*.js&tests=a%2Fb.js&tests=c%2Fd.js&tests=e.jsx&tests=f.md" target="_blank"> Explore <code>**/*.js</code> as a glob string in our glob testing tool </a> </div> <h3 id="codepen"><a class="hash-anchor" href="#codepen" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#codepen" onclick="navigator.clipboard.writeText(this.href);">CodePen</a></h3> <p>To provide code examples, you could embed a CodePen with a username and pen ID:</p> <p class="codepen" data-height="256" data-theme-id="light" data-default-tab="result" data-user="MattCowley" data-slug-hash="vwPzeX" style="height: 256px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> <span>See the Pen <a href="https://codepen.io/MattCowley/pen/vwPzeX">vwPzeX by MattCowley</a> (<a href="https://codepen.io/MattCowley">@MattCowley</a>) on <a href='https://codepen.io'>CodePen</a>.</span> </p> <p>CodePen embeds can be customized with many flags after the username and ID:</p> <ul> <li>Pass any integer value to set a custom height for the embed (e.g. <code>[codepen MattCowley vwPzeX 512]</code>)</li> <li>Pass <code>dark</code> to switch the embed to using dark mode (e.g. <code>[codepen MattCowley vwPzeX dark]</code>)</li> <li>Pass <code>lazy</code> to enable lazy loading (click to run) for the embed (e.g. <code>[codepen MattCowley vwPzeX lazy]</code>)</li> <li>Pass one of <code>html</code>, <code>css</code>, or <code>js</code> to change the default tab that is shown (e.g. <code>[codepen MattCowley vwPzeX css]</code>)</li> <li>Pass <code>result</code> to show the result of the pen. This is the default tab, but can be combined with other tabs as well (e.g. <code>[codepen MattCowley vwPzeX html result]</code>)</li> <li>Pass <code>editable</code> to enable the user to edit the embed (e.g. <code>[codepen chriscoyier Yxzjdz editable]</code>)<br> <em>(Note: The embedded pen must be from a user with CodePen Pro for this to work)</em></li> </ul> <p>These flags can be combined in any order to create a custom CodePen embed. For example, <code>[codepen MattCowley vwPzeX dark css 384]</code> would create a dark mode embed that shows the CSS tab by default, with a height of 384px.</p> <h3 id="glitch"><a class="hash-anchor" href="#glitch" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#glitch" onclick="navigator.clipboard.writeText(this.href);">Glitch</a></h3> <p>Alternatively, you may want to embed a code example from Glitch with a project slug:</p> <div class="glitch-embed-wrap" style="height: 256px; width: 100%;"> <iframe src="https://glitch.com/embed/#!/embed/hello-digitalocean?previewSize=100" title="hello-digitalocean on Glitch" allow="geolocation; microphone; camera; midi; encrypted-media; xr-spatial-tracking; fullscreen" allowFullScreen style="height: 100%; width: 100%; border: 0;"> <a href="https://glitch.com/edit/#!/hello-digitalocean" target="_blank">View hello-digitalocean on Glitch</a> </iframe> </div> <p>Similar to CodePen embeds, a set of optional flags can be passed as the slug to customize the embed:</p> <ul> <li>Pass any integer value to set a custom height for the embed (e.g. <code>[glitch hello-digitalocean 512]</code>)</li> <li>Pass <code>code</code> to show the project code by default in the embed (e.g. <code>[glitch hello-digitalocean code]</code>)</li> <li>Pass <code>notree</code> to hide the file tree by default when showing the project code (e.g. <code>[glitch hello-digitalocean code notree]</code>)</li> <li>Pass <code>path=...</code> to set a default file to show when showing the project code (e.g. <code>[glitch hello-digitalocean code path=src/app.jsx]</code>)</li> <li>Pass <code>highlights=...</code> to set lines to highlight when showing the project code (e.g. <code>[glitch hello-digitalocean code path=src/app.jsx highlights=15,25]</code>)</li> <li>Pass <code>noattr</code> to remove the author attribution from the embed (e.g. <code>[glitch hello-digitalocean noattr]</code>)</li> </ul> <h3 id="can-i-use"><a class="hash-anchor" href="#can-i-use" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#can-i-use" onclick="navigator.clipboard.writeText(this.href);">Can I Use</a></h3> <p>If you’re writing web-related content, you may want to embed a Can I Use table for a feature:</p> <p class="ciu_embed" data-feature="css-grid" data-periods="future_1,current,past_1" data-accessible-colours="false"> <picture> <source type="image/webp" srcset="https://caniuse.bitsofco.de/image/css-grid.webp" /> <source type="image/png" srcset="https://caniuse.bitsofco.de/image/css-grid.png" /> <img src="https://caniuse.bitsofco.de/image/css-grid.jpg" alt="Data on support for the css-grid feature across the major browsers from caniuse.com" /> </picture> </p> <p>Some optional flags can also be set for this embed:</p> <ul> <li>Pass <code>past=...</code> to set how many previous browser versions are listed (0-5) (e.g. <code>[caniuse css-grid past=5]</code>)</li> <li>Pass <code>future=...</code> to set how many future browser versions are listed (0-3) (e.g. <code>[caniuse css-grid future=3]</code>)</li> <li>Pass <code>accessible</code> to switch to the accessible color scheme by default (e.g. <code>[caniuse css-grid accessible]</code>)</li> </ul> <h3 id="asciinema"><a class="hash-anchor" href="#asciinema" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#asciinema" onclick="navigator.clipboard.writeText(this.href);">Asciinema</a></h3> <p>Embedding a terminal recording from Asciinema (id, cols, rows):</p> <script src="https://asciinema.org/a/239367.js" id="asciicast-239367" async data-cols="50" data-rows="20"></script> <noscript> <a href="https://asciinema.org/a/239367" target="_blank">View asciinema recording</a> </noscript> <h3 id="twitter"><a class="hash-anchor" href="#twitter" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#twitter" onclick="navigator.clipboard.writeText(this.href);">Twitter</a></h3> <p>You can also embed a tweet from Twitter by passing the URL for the tweet:</p> <div class="twitter"> <blockquote class="twitter-tweet" data-dnt="true" data-width="550" data-theme="light"> <a href="https://twitter.com/MattIPv4/status/1576415168426573825">View tweet by @MattIPv4</a> </blockquote> </div> <p>Like a few other embeds, you can also pass optional flags to customize the embed:</p> <ul> <li>Pass any integer value (between 250 and 550) to set a custom width for the embed (e.g. <code>[twitter https://twitter.com/MattIPv4/status/1576415168426573825 400]</code>)</li> <li>Pass <code>light</code> or <code>dark</code> to switch the theme of the embed (e.g. <code>[twitter https://twitter.com/MattIPv4/status/1576415168426573825 dark]</code>)</li> <li>Pass <code>left</code>, <code>center</code>, or <code>right</code> to align the embed (e.g. <code>[twitter https://twitter.com/MattIPv4/status/1576415168426573825 left]</code>)</li> </ul> <h3 id="instagram"><a class="hash-anchor" href="#instagram" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#instagram" onclick="navigator.clipboard.writeText(this.href);">Instagram</a></h3> <p>You can also embed a post from Instagram by passing the URL for the post:</p> <div class="instagram"> <blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/CkQuv3_LRgS" data-instgrm-version="14"> <a href="https://instagram.com/p/CkQuv3_LRgS">View post</a> </blockquote> </div> <p>Like a few other embeds, you can also pass optional flags to customize the embed:</p> <ul> <li>Pass any integer value (between 326 and 550) to set a custom width for the embed (e.g. <code>[instagram https://www.instagram.com/p/CkQuv3_LRgS 400]</code>)</li> <li>Add <code>left</code>, <code>center</code>, or <code>right</code> to set the alignment of the embed (default is <code>left</code>).</li> <li>Pass <code>caption</code> to include caption under the post (e.g. <code>[instagram https://www.instagram.com/p/CkQuv3_LRgS caption]</code>)</li> </ul> <h3 id="slideshow"><a class="hash-anchor" href="#slideshow" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#slideshow" onclick="navigator.clipboard.writeText(this.href);">Slideshow</a></h3> <p>You can also embed Slideshow (url1, url2, …urls, height, width):</p> <div class="slideshow" style="height: 270px; width: 480px;"> <div class="action left" onclick="(() => this.parentNode.getElementsByClassName('slides')[0].scrollLeft -= 480)()">‹</div> <div class="action right" onclick="(() => this.parentNode.getElementsByClassName('slides')[0].scrollLeft += 480)()">›</div> <div class="slides"><img src="https://assets.digitalocean.com/banners/python.png" alt="Slide #1" /><img src="https://assets.digitalocean.com/banners/javascript.png" alt="Slide #2" /><img src="https://assets.digitalocean.com/banners/nodejs.png" alt="Slide #3" /></div> </div> <p><em>Both the width and height are optional, with the defaults being 480 and 270 respectively.</em></p> <h3 id="image-compare"><a class="hash-anchor" href="#image-compare" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#image-compare" onclick="navigator.clipboard.writeText(this.href);">Image compare</a></h3> <p>Compare two images side by side (url1, url2, height, width):</p> <div class="image-compare" style="--value:50%; height: 270px; width: 480px;"> <img class="image-left" src="https://assets.digitalocean.com/banners/python.png" alt="Image left"/> <img class="image-right" src="https://assets.digitalocean.com/banners/javascript.png" alt="Image right"/> <input type="range" class="control" min="0" max="100" value="50" oninput="this.parentNode.style.setProperty('--value', `${this.value}%`)" /> <svg class="control-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504.3 273.6c4.9-4.5 7.7-10.9 7.7-17.6s-2.8-13-7.7-17.6l-112-104c-7-6.5-17.2-8.2-25.9-4.4s-14.4 12.5-14.4 22l0 56-192 0 0-56c0-9.5-5.7-18.2-14.4-22s-18.9-2.1-25.9 4.4l-112 104C2.8 243 0 249.3 0 256s2.8 13 7.7 17.6l112 104c7 6.5 17.2 8.2 25.9 4.4s14.4-12.5 14.4-22l0-56 192 0 0 56c0 9.5 5.7 18.2 14.4 22s18.9 2.1 25.9-4.4l112-104z"/></svg> </div> <p><em>Both the width and height are optional, with the defaults being 480 and 270 respectively.</em></p> <h2 id="step-6-tutorials"><a class="hash-anchor" href="#step-6-tutorials" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#step-6-tutorials" onclick="navigator.clipboard.writeText(this.href);">Step 6 — Tutorials</a></h2> <p>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.</p> <p><button data-js="rsvp-button" data-form-id="1234" disabled="disabled" class="rsvp">Marketo RSVP buttons use the `rsvp_button` flag</button></p> <button data-js="terminal" data-docker-image="ubuntu:focal" disabled="disabled" class="terminal"> Terminal buttons are behind the `terminal` flag </button> <h2 id="conclusion"><a class="hash-anchor" href="#conclusion" aria-hidden="true" onclick="navigator.clipboard.writeText(this.href);"></a><a href="#conclusion" onclick="navigator.clipboard.writeText(this.href);">Conclusion</a></h2> <p>Please refer to our <a href="https://do.co/style">writing guidelines</a> for more detailed explanations on our style and formatting.</p> <script async defer src="https://do-community.github.io/glob-tool-embed/bundle.js" type="text/javascript" onload="window.GlobToolEmbeds()"></script> <script async defer src="https://do-community.github.io/dns-tool-embed/bundle.js" type="text/javascript" onload="window.DNSToolEmbeds()"></script> <script async defer src="https://static.codepen.io/assets/embed/ei.js" type="text/javascript"></script> <script async defer src="https://cdn.jsdelivr.net/gh/ireade/caniuse-embed@v1.3.0/public/caniuse-embed.min.js" type="text/javascript"></script> <script async defer src="https://platform.twitter.com/widgets.js" type="text/javascript"></script> <script async defer src="https://www.instagram.com/embed.js" type="text/javascript" onload="window.instgrm && window.instgrm.Embeds.process()"></script>