This post includes the markdown needed for various styles & layouts for markdown/html driven posts.

For more information on markdown see these posts:

• Markdown introduction
• Advanced Markdown Guide
• Extended Syntax

1. Check out my Github Profile
2. Don't forget to star Repo

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bold integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare inline code. Pellentesque diam orci, italics sodales in blandit ut, placerat quis felis. Italics vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Clickable link mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis. Here's a simple footnote,^[1] and here's a longer one^[2].

This is in bold, italics, and strikethrough.

This is a highlight with double equals Text.

Bold text next to italic text and an example of underlined text & highlighting via html tag.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox *jump*ed over the lazy dog.

The quick brown fox _jump_ed over the lazy dog.

Highlight very important words

Heading 1 with paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Heading 2 with paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Heading 3 with paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Heading 4 with paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Heading 5 with paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Heading 6 with paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Below is an aside HTML element that contains a details HTML element.

This HTML aside is used for floating elements to the right or left of the main content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Headings with no text. Aka. "ATX Headers". They are defined in Markdown by placing hash signs followed by a space before the heading text. The number of hash signs depends on the strength of the header. The hash sign must be placed on a new line.

Heading 1 stacked

Heading 2 stacked

Heading 3 stacked

Heading 4 stacked

Heading 5 stacked

Heading 6 stacked

Headings with links:

Heading 1 stacked

Heading 2 stacked

Heading 3 stacked

Heading 4 stacked

Heading 5 stacked

Heading 6 stacked

Setext headers are defined in Markdown by underlining heading text, with either an equals sign or with hyphens, depending on the strength of the header.

This is a first level heading

This is a first level heading
=============================

This is a second level heading

This is a second level heading
------------------------------

Line breaks

Line breaks are added with the html <br/> tag.

Here is an...
example of a break in the line.

Thematic breaks

Thematic breaks can take various syntaxes (listed below) but it's recommended to use triple dash --- syntax.

A paragraph before the thematic break ---.

A paragraph before the thematic break ***.

A paragraph before the thematic break ___.

A paragraph before the thematic break * * *.

A paragraph after the thematic break.

Blockquotes

Blockquotes are written with > prefixes.

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Markdown works within blockquotes.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Block quotes may also contain other Markdown elements nested inside of them, for example headers and lists:

Quote with Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bold integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare inline code. Pellentesque diam orci, italics sodales in blandit ut, placerat quis felis. Italics vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus > volutpat. Clickable link mi ligula, non hendrerit urna.

Bold text next to italic text and an example of underlined text & highlighting via html tag.

And a list

1. Item One
2. Item Two

And headers

Quote Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi.

Quote Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi.

Quote Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi.

Quote Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi.

Quote Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi.

If multiple paragraphs in block quotes are placed directly next to one another they will be joined together to produce a single block quote:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget eros in nulla dignissim suscipit. Phasellus tempor nisl sed nulla eleifend, ac imperdiet ipsum aliquam.

In ac eros ac ligula varius tempor. Phasellus efficitur volutpat ipsum, auctor faucibus velit finibus non. Fusce a nisl vitae diam faucibus vestibulum. Praesent velit massa, laoreet a rhoncus non, luctus in ligula.

Nested blockquote

This is a block quote containing another block quote which contains a header and a list.

This is a header

1. Item One
2. Item Two

Html blockquote

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Lists

Ordered List

1. First ordered list item
2. Second ordered list item
3. Third ordered list item
4. Fourth ordered list item

Unordered List

• Item One
• Item Two
• Item Three
• Item Four

Ordered List with children

1. Item one
   1. Ordered list child 1
   2. Ordered list child 2
2. Item two
   1. Ordered list child one
   2. Ordered list child two
      1. grandchildren one
      2. grandchildren two
      3. grandchildren three
3. Item with unordered children
   • One
   • Two

Unordered List with children

• Item One
• Item Two
• Item Four with children
  • child 1
  • child 2
  • child 3
  • child 4 with children
    • grandchild one
    • grandchild two
• Item Five with children
  1. child 1
  2. child 2
     • unordered child 1
     • unordered child 2
     • unordered child 3 with children
       • grandchild one
       • grandchild two
• Last item

Nested Mixed List

• Item

  1. First Sub-item
  2. Second Sub-item

• Bold Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

• Nested list with paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

  • list item 1
  • list item 2
  • list item 3
  • list item long Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper.

• Nested ordered list with paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

  1. list item 1
  2. list item 2
  3. list item 3
  4. list item long Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper.

Collapsable Details

Using the <details> tag to collapse contents.

<details>
  <summary>Preview text of details</summary>

  Contents
</details>

Stacked Details

Details stacked on each other

Typography inside Details

Typography elements in details

Expand

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bold integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, italics sodales in blandit ut, placerat quis felis. Italics vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Clickable link mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

Bold text next to italic text and an example of underlined text & highlighting via html tag.

List

• Item One
• Item Two
• Item Three
• Item Four

Details Heading 1 with paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Details Heading 2 with paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Details Heading 3 with paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Details Heading 4 with paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Details Heading 5 with paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna.

Inside lists Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper.

1. Using the Vendia Share Web Application's GraphQL Explorer of the Supplier's AWS Node, identify a Purchase Order to modify, noting the _id for one of the Purchase Orders listed for the subsequent step, referred to hereafter as <PO_ID>

   List Purchase Orders Query

   This is how you do this query thingie

   1. Xyz
   2. Abc
   3. Lol

   query listPurchaseOrders {
        list_PurchaseOrderItems {
          _PurchaseOrderItems {
            _id
            _owner
            created
            expected
            fulfilled
            orderId
            updated
            items {
              quantity
              sku
            }
          }
        }
      }

   For more information see google

2. Execute a GraphQL mutation (or use Vendia Share's Entity Explorer to make an equivalent update without any GraphQL) to modify the PO identified in the previous step

   Update Purchase Order Mutation

   mutation updatePurchaseOrder {
        update_PurchaseOrder(
          id: "<PO_ID>",
          input: {
            expected: "2022-01-03T00:00:00Z"
          }
        ) {
          transaction {
            submissionTime
            transactionId
            version
          }
        }
      }

1. Execute a GraphQL mutation (or use Vendia Share's Entity Explorer to make an equivalent update without any GraphQL) to modify the PO identified in the previous step

   Multiple Things

   Update Purchase Order Mutation

   mutation updatePurchaseOrder {
        update_PurchaseOrder(
          id: "<PO_ID>",
          input: {
            expected: "2022-01-03T00:00:00Z"
          }
        ) {
          transaction {
            submissionTime
            transactionId
            version
          }
        }
      }

   In here

   Update Purchase Order Mutation

   mutation updatePurchaseOrder {
        update_PurchaseOrder(
          id: "<PO_ID>",
          input: {
            expected: "2022-01-03T00:00:00Z"
          }
        ) {
          transaction {
            submissionTime
            transactionId
            version
          }
        }
      }

Nested Details

Large Details

const { Analytics } = require('analytics')
// or const Analytics = require('analytics').default

const analytics = Analytics({
  app: 'my-app-name',
  version: 100,
  plugins: [
    googleAnalyticsPlugin({
      trackingId: 'UA-121991291',
    }),
    customerIOPlugin({
      siteId: '123-xyz'
    })
  ]
})

// Fire a page view
analytics.page()

<script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
<script>
  const Analytics = _analytics.init({
    app: 'my-app-name',
    version: 100,
    ...plugins
  })

  Analytics.track()

  // optionally expose to window
  window.Analytics = Analytics
</script>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio.

Tables

Markdown Table

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

HTML Table

<table>
  <tbody>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </tbody>
</table>

Table with inline markdown styles

| Inline | Markdown | In  | Table  |
| ----------- | ------------ | ----------------- | ------ |
| _italics_   | **bold**     | ~~strikethrough~~ | `code` |

Larger HTML table

Super wide table

Code

Below are different examples of how to use code and syntax highlighting.

Inline Code

For inline code blocks, wrap your code in backticks: `const myCode = "isGreat"`. This will be rendered as follows: const myCode = "isGreat".

Code blocks

For code blocks that allows multiple lines, syntax highlighting, line numbers and line highlighting, use triple backticks for code fencing: ```.

Generic code fence:

Generic block no syntax highlighting

html pre & code tags

html pre code

Javascript example:

const s = "JavaScript syntax highlighting"
alert(s)

```javascript
const s = "JavaScript syntax highlighting"
alert(s)
```

JSON example:

{
  "data": {
    "list_Blocks": {
      "_Blocks": [{
        "BlockId": "000000000000001",
        "BlockContentHash": "48d47e9b5e9f93b6074b17",
        "PreviousBlockId": "000000000000000",
      }]
    }
  }
}

```json
{
  "data": {
    "list_Blocks": {
      "_Blocks": [{
        "BlockId": "000000000000001",
        "BlockContentHash": "48d47e9b5e9f93b6074b17",
        "PreviousBlockId": "000000000000000",
      }]
    }
  }
}
```

Python example:

s = "Python syntax highlighting"
print s

```python
s = "Python syntax highlighting"
print s
```

Bash example:

npm run build

```bash
npm run build
```

CSS example:

body {
  color: blue;
}
.blur {
  filter: blur(4px);
}

```css
body {
  color: blue;
}
.blur {
  filter: blur(4px);
}
```

If language is omitted the code blocks will look like this:

No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.

Tidles ~ example

alert('Hello, world!')

Wide code example

A very wide code snippet

import Analytics from 'analyticsskajldalkdalksdjalkddlaksjdlsakjdlkasjdlksajdlakjdlkasjdlkasjdlkajsdlkajdlkjalksdjalkdjalkdjalkdjaslkdjaslkjdlkasjdlaskdjalkalksjalkjasdlkadjas'
import googleAnalyticsPlugin from '@analytics/google-analytics'
import customerIOPlugin from '@analytics/customerio'

Code Tutorial Example

Install the package via npm

npm install analytics --save

Or include as a script tag:

<script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>

Then in your application, use the package like this:

import Analytics from 'analytics'
import googleAnalyticsPlugin from '@analytics/google-analytics'
import customerIOPlugin from '@analytics/customerio'

/* Initialize analytics */
const analytics = Analytics({
  app: 'my-app-name',
  version: 100,
  plugins: [
    googleAnalyticsPlugin({
      trackingId: 'UA-121991291',
    }),
    customerIOPlugin({
      siteId: '123-xyz'
    })
  ]
})

/* Track a page view */
analytics.page()

HTML Code

Using pre and code tags.

alert('hello')

Layouts

Full width layout

Images

Left alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

Left alignment snippet:

<img align="left" width="100" height="100" src="https://picsum.photos/100/100" />

Right alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

Right alignment snippet:

<p>
  <img align="right" width="100" height="100" src="https://picsum.photos/100/100" />
</p>

Center alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

Center alignment snippet:

<p align="center">
  <img width="460" height="300" src="https://picsum.photos/460/300" />
</p>

Full width image

Full width image snippet:

<img width="100%" height="500" src="https://picsum.photos/1400/500" />

Figure

Figure with caption

<figure>
  <img src="https://d24nhiikxn5jns.cloudfront.net/optimized/user-images.githubusercontent.com..85032783147981825-f0e94c34-6488-4fd3-82f4-7ef8e00224a2.png" />
  <figcaption><b>Figure 1</b> - <i>A Supplier, Distributor, and Retailer reacting in real-time across clouds as changes to purchase orders occur</i></figcaption>
</figure>

Stacked figure captions

Inline reference image

As with inline images reference images can contain an optional title which is placed in double quotes following the image destination URL:

![Referenced image link][ref-to-image]

[ref-to-image]: https://picsum.photos/460/300

Embeds

Twitter

We're launching 🚀 AWS AppSync as a new service for preview later today! Here are some of its features! @apatel72001#reInventpic.twitter.com/fG9thG6sAa

• AWS re:Invent (@AWSreInvent) November 28, 2017

Youtube

Youtube Video: Life as an Engineer - WFH

Video

HTML

Internal Link

External Link

Anchor Scroll Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Internal link Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, External link in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat.

Other Elements

abbr, sub, sup, kbd, mark

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Task lists

• Write the press release
• Update the website
• Contact the media

Definition lists

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.

Forms

Big form

Sticky sidebars

Video link with thumbnail

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper. Pellentesque diam orci, sodales in blandit ut, placerat quis felis. Vestibulum at sem massa, in tempus nisi. Vivamus ut fermentum odio. Etiam porttitor faucibus volutpat. Vivamus vitae mi ligula, non hendrerit urna. Suspendisse potenti. Quisque eget massa a massa semper mollis.

Comments

Examples of invisible md comments below