{
  "$type": "com.whtwnd.blog.entry",
  "theme": "github-light",
  "title": "Markdown Test",
  "content": "# Title Header (H1 header)\n\n\n### Introduction (H3 header)\n\nThis is some placeholder text to show examples of Markdown formatting.\nWe have [a full article template](https://github.com/do-community/do-article-templates) you can use when writing a DigitalOcean article.\nPlease refer to our style and formatting guidelines for more detailed explanations: <https://do.co/style>\n\n\n## Prerequisites (H2 header)\n\nBefore you begin this guide you'll need the following:\n\n- Familiarity with [Markdown](https://daringfireball.net/projects/markdown/)\n\n\n## Step 1 — Basic Markdown\n\nThis is _italics_, this is **bold**, this is __underline__, and this is ~~strikethrough~~.\n\n- This is a list item.\n- This list is unordered.\n\n1. This is a list item.\n2. This list is ordered.\n\n> This is a quote.\n>\n> > This is a quote inside a quote.\n>\n> - This is a list in a quote.\n> - Another item in the quote list.\n\nHere's how to include an image with alt text and a title:\n\n![Alt text for screen readers](https://assets.digitalocean.com/logos/DO_Logo_horizontal_blue.png \"DigitalOcean Logo\")\n\n_We also support some extra syntax for setting the width, height and alignment of images. You can provide pixels (`200`/`200px`), or a percentage (`50%`), for the width/height. The alignment can be either `left` or `right`, with images being centered by default. These settings are all optional._\n\n![](https://assets.digitalocean.com/public/mascot.png){ width=200 height=131 align=left }\n\nUse horizontal rules to break up long sections:\n\n---\n\nRich transformations are also applied:\n\n- On ellipsis: ...\n- On quote pairs: \"sammy\", 'test'\n- On dangling single quotes: it's\n- On en/em dashes: a -- b, a --- b\n\n<!-- Comments will be removed from the output -->\n\n| Tables | are   | also  | supported | and    | will   | overflow | cleanly | if     | needed |\n|--------|-------|-------|-----------|--------|--------|----------|---------|--------|--------|\n| col 1  | col 2 | col 3 | col 4     | col 5  | col 6  | col 7    | col 8   | col 9  | col skibidi dob dob dob yes 10 |\n| col 1  | col 2 | col 3 | col 4     | col 5  | col 6  | col 7    | col 8   | col 9  | col 10 |\n| col 1  | col 2 | col 3 | col 4     | col 5  | col 6  | col 7    | col 8   | col 9  | col 10 |\n| col 1  | col 2 | col 3 | col 4     | col 5  | col 6  | col 7    | col 8   | col 9  | col 10 |\n| col 1  | col 2 | col 3 | col 4     | col 5  | col 6  | col 7    | col 8   | col 9  | col 10 |\n\n\n## Step 2 — Code\n\nThis is `inline code`. This is a <^>variable<^>. This is an `in-line code <^>variable<^>`. You can also have [`code` in links](https://www.digitalocean.com).\n\nHere's a configuration file with a label:\n\n```nginx\n[label /etc/nginx/sites-available/default]\nserver {\n    listen 80 <^>default_server<^>;\n    . . .\n}\n```\n\nExamples can have line numbers, and every code block has a 'Copy' button to copy just the code:\n\n```line_numbers,js\nconst test = 'hello';\nconst other = 'world';\nconsole.log(test, other);\n```\n\nHere's output from a command with a secondary label:\n\n```\n[secondary_label Output]\nCould not connect to Redis at 127.0.0.1:6379: Connection refused\n```\n\nThis is a non-root user command example:\n\n```command\nsudo apt-get update\nsudo apt-get install python3\n```\n\nThis is a root command example:\n\n```super_user\nadduser sammy\nshutdown\n```\n\nThis is a custom prefix command example:\n\n```custom_prefix(mysql>)\nFLUSH PRIVILEGES;\nSELECT * FROM articles;\n```\n\nA custom prefix can contain a space by using `\\s`:\n\n```custom_prefix((my-server)\\smysql>)\nFLUSH PRIVILEGES;\nSELECT * FROM articles;\n```\n\nIndicate where commands are being run with environments:\n\n```command\n[environment local]\nssh root@server_ip\n```\n\n```command\n[environment second]\necho \"Secondary server\"\n```\n\n```command\n[environment third]\necho \"Tertiary server\"\n```\n\n```command\n[environment fourth]\necho \"Quaternary server\"\n```\n\n```command\n[environment fifth]\necho \"Quinary server\"\n```\n\nAnd 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:\n\n```line_numbers,html\n[environment second]\n[label index.html]\n<html>\n<body>\n<head>\n  <title><^>My Title<^></title>\n</head>\n<body>\n  . . .\n</body>\n</html>\n```\n\n\n## Step 3 — Callouts\n\nHere is a note, a warning, some info and a draft note:\n\n<$>[note]\n**Note:** Use this for notes on a publication.\n<$>\n\n<$>[warning]\n**Warning:** Use this to warn users.\n<$>\n\n<$>[info]\n**Info:** Use this for product information.\n<$>\n\n<$>[draft]\n**Draft:** Use this for notes in a draft publication.\n<$>\n\nA callout can also be given a label, which supports inline markdown as well:\n\n<$>[note]\n[label Labels support _inline_ **markdown**]\n**Note:** Use this for notes on a publication.\n<$>\n\n\nYou can also mention users by username:\n\n@MattIPv4\n\n\n## Step 4 — Layout\n\nColumns allow you to customise the layout of your Markdown:\n\n[column\nContent inside a column is regular Markdown block content.\n\n> Any block or inline syntax can be used, including quotes.\n]\n\n[column\nTwo or more columns adjacent to each other are needed to create a column layout.\n\nOn 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.\n]\n\n[details Content can be hidden using `details`.\nInside the details block you can use any block or inline syntax.\n\nYou could hide the solution to a problem:\n```js\n// Write a message to console\nconsole.log('Hello, world!');\n```\n]\n\n[details open You can also have the details block open by default.\nPass `open` as the first argument to the summary section to do this.\n\n_You can also pass `closed`, though this is the same as not passing anything before the summary._\n]\n\n## Step 5 — Embeds\n\n### YouTube\n\nEmbedding a YouTube video (id, height, width):\n\n[youtube iom_nhYQIYk 225 400]\n\n_Both the width and height are optional, with the defaults being 480 and 270 respectively._\\\n_The width/height set are treated as maximums -- the video will scale down to fit the available space, maintaining the aspect ratio._\n\n### Wistia\n\nEmbedding a Wistia video (id, height, width):\n\n[wistia 7ld71zbvi6 225 400]\n\n_As with the YouTube embed, both the width and height are optional and have the same defaults._\\\n_The same behaviour applies to the width/height set, with responsive scaling._\n\n### Vimeo\n\nEmbedding a Vimeo video (url, height, width):\n\n[vimeo https://player.vimeo.com/video/329272793 225 400]\n\n_As with the YouTube embed, both the width and height are optional and have the same defaults._\\\n_The same behaviour applies to the width/height set, with responsive scaling._\n\n### DNS\n\nEmbedding DNS record lookups (hostname, record types...):\n\n[dns digitalocean.com A AAAA]\n\n### Glob\n\nDemonstrating how glob matching works (pattern, tests...):\n\n[glob **/*.js a/b.js c/d.js e.jsx f.md]\n\nGlob embeds can also be written as multiple lines if needed:\n\n[glob **/*.js\na/b.js\nc/d.js\ne.jsx\nf.md]\n\n### CodePen\n\nTo provide code examples, you could embed a CodePen with a username and pen ID:\n\n[codepen MattCowley *vwPzeX]*\n\nCodePen embeds can be customized with many flags after the username and ID:\n\n- Pass any integer value to set a custom height for the embed (e.g. `[codepen MattCowley vwPzeX 512]`)\n- Pass `dark` to switch the embed to using dark mode (e.g. `[codepen MattCowley vwPzeX dark]`)\n- Pass `lazy` to enable lazy loading (click to run) for the embed (e.g. `[codepen MattCowley vwPzeX lazy]`)\n- Pass one of `html`, `css`, or `js` to change the default tab that is shown (e.g. `[codepen MattCowley vwPzeX css]`)\n- Pass `result` to show the result of the pen. This is the default tab, but can be combined with other tabs as well (e.g. `[codepen MattCowley vwPzeX html result]`)\n- Pass `editable` to enable the user to edit the embed (e.g. `[codepen chriscoyier Yxzjdz editable]`)\\\n  _(Note: The embedded pen must be from a user with CodePen Pro for this to work)_\n\nThese flags can be combined in any order to create a custom CodePen embed.\nFor example, `[codepen MattCowley vwPzeX dark css 384]` would create a dark mode embed that shows the CSS tab by default, with a height of 384px.\n\n### Glitch\n\nAlternatively, you may want to embed a code example from Glitch with a project slug:\n\n[glitch hello-digitalocean]\n\nSimilar to CodePen embeds, a set of optional flags can be passed as the slug to customize the embed:\n\n- Pass any integer value to set a custom height for the embed (e.g. `[glitch hello-digitalocean 512]`)\n- Pass `code` to show the project code by default in the embed (e.g. `[glitch hello-digitalocean code]`)\n- Pass `notree` to hide the file tree by default when showing the project code (e.g. `[glitch hello-digitalocean code notree]`)\n- Pass `path=...` to set a default file to show when showing the project code (e.g. `[glitch hello-digitalocean code path=src/app.jsx]`)\n- Pass `highlights=...` to set lines to highlight when showing the project code (e.g. `[glitch hello-digitalocean code path=src/app.jsx highlights=15,25]`)\n- Pass `noattr` to remove the author attribution from the embed (e.g. `[glitch hello-digitalocean noattr]`)\n\n### Can I Use\n\nIf you're writing web-related content, you may want to embed a Can I Use table for a feature:\n\n[caniuse css-grid]\n\nSome optional flags can also be set for this embed:\n\n- Pass `past=...` to set how many previous browser versions are listed (0-5) (e.g. `[caniuse css-grid past=5]`)\n- Pass `future=...` to set how many future browser versions are listed (0-3) (e.g. `[caniuse css-grid future=3]`)\n- Pass `accessible` to switch to the accessible color scheme by default (e.g. `[caniuse css-grid accessible]`)\n\n### Asciinema\n\nEmbedding a terminal recording from Asciinema (id, cols, rows):\n\n[asciinema 239367 50 20]\n\n### Twitter\n\nYou can also embed a tweet from Twitter by passing the URL for the tweet:\n\n[twitter https://twitter.com/MattIPv4/status/1576415168426573825]\n\nLike a few other embeds, you can also pass optional flags to customize the embed:\n\n- Pass any integer value (between 250 and 550) to set a custom width for the embed (e.g. `[twitter https://twitter.com/MattIPv4/status/1576415168426573825 400]`)\n- Pass `light` or `dark` to switch the theme of the embed (e.g. `[twitter https://twitter.com/MattIPv4/status/1576415168426573825 dark]`)\n- Pass `left`, `center`, or `right` to align the embed (e.g. `[twitter https://twitter.com/MattIPv4/status/1576415168426573825 left]`)\n\n### Instagram\n\nYou can also embed a post from Instagram by passing the URL for the post:\n\n[instagram https://www.instagram.com/p/CkQuv3_LRgS]\n\nLike a few other embeds, you can also pass optional flags to customize the embed:\n\n- Pass any integer value (between 326 and 550) to set a custom width for the embed (e.g. `[instagram https://www.instagram.com/p/CkQuv3_LRgS 400]`)\n- Add `left`, `center`, or `right` to set the alignment of the embed (default is `left`).\n- Pass `caption` to include caption under the post (e.g. `[instagram https://www.instagram.com/p/CkQuv3_LRgS caption]`)\n\n### Slideshow\n\nYou can also embed Slideshow (url1, url2, ...urls, height, width):\n\n[slideshow https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png https://assets.digitalocean.com/banners/nodejs.png]\n\n_Both the width and height are optional, with the defaults being 480 and 270 respectively._\n\n### Image compare\n\nCompare two images side by side (url1, url2, height, width):\n\n[compare https://assets.digitalocean.com/banners/python.png https://assets.digitalocean.com/banners/javascript.png]\n\n_Both the width and height are optional, with the defaults being 480 and 270 respectively._\n\n## Step 6 — Tutorials\n\nCertain features of our Markdown engine are designed specifically for our tutorial content-types.\nThese may not be enabled in all contexts in the DigitalOcean community, but are enabled by default in the do-markdownit plugin.\n\n[rsvp_button 1234 \"Marketo RSVP buttons use the `rsvp_button` flag\"]\n\n[terminal ubuntu:focal Terminal buttons are behind the `terminal` flag]\n\n\n## Conclusion\n\nPlease refer to our [writing guidelines](https://do.co/style) for more detailed explanations on our style and formatting.\n",
  "createdAt": "2025-03-03T21:20:34.633Z",
  "visibility": "author"
}