Skip to content

Latest commit

 

History

History
838 lines (622 loc) · 24.1 KB

typography.mdx

File metadata and controls

838 lines (622 loc) · 24.1 KB
title description date
Markdown Styleguide
Styles for blog content
2020-01-01

This post includes the markdown needed for various styles/layouts.

Typography

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.

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.

Headings with no text:

Heading 1 stacked

Heading 2 stacked

Heading 3 stacked

Heading 4 stacked

Heading 5 stacked
Heading 6 stacked

Blockquote

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

Quote break.

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.

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>
Preview text of details

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.

Stacked Details

Details stacked on each other

Preview text of details 1

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.

Preview text of details 2

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.

Preview text of details 3

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.

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 
    query listPurchaseOrders {
  list_PurchaseOrderItems {
    _PurchaseOrderItems {
      _id
      _owner
      created
      expected
      fulfilled
      orderId
      updated
      items {
        quantity
        sku
      }
    }
  }
}

  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
    }
  }
}

  3. 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
    }
  }
}

Large Details

Node.js usage

For ES6/7 javascript you can import Analytics from 'analytics' for normal node.js usage you can import like so:

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()
Browser usage

When importing global analytics into your project from a cdn the library is expose via a global _analytics variable.

Call _analytics.init to create an analytics instance.

<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
Table markdown snippet 
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

HTML Table

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
HTML table snippet 
<table>
  <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>
</table>

Table with inline markdown styles

Inline Markdow In Table
italics bold strikethrough code
Table with inline markdown styles snippet 
| Inline | Markdow | In  | Table  |
| ----------- | ------------ | ----------------- | ------ |
| _italics_   | **bold**     | ~~strikethrough~~ | `code` |

Larger HTML table

Decentralized Real-time Consistent Ledgered Access controlled
Low Medium Medium Medium High
These solutions have similar drawbacks to the traditional “monolithic” architectures. Many of these hubs utilize connectors to connect to platforms continuously. There is no general consensus across participants. Often the hub does not have change logs for the data. The hub itself collects all the data and we can set up limited access to that data.

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: ```.

Javascript example:

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

JSON example:

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

Python example:

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

Bash example:

npm run build
Bash code markdown 
```bash
npm run build
```

CSS example:

body {
  color: blue;
}
.blur {
  filter: blur(4px);
}
CSS code markdown 
```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>.

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 pakcage 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()

Layouts

Full width layout

Full width content in a div. If elements are `span` or `div` they will stretch full width. 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. Full width content in a div. If elements are `span` or `div` they will stretch full width. 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.

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>

Figure 1 - A Supplier, Distributor, and Retailer reacting in real-time across clouds as changes to purchase orders occur

Stacked figure captions

Figure 1 - Adding a File to Vendia Share

Figure 2 - Viewing File History in Vendia Share

Embeds

Twitter

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

— AWS re:Invent (@AWSreInvent) November 28, 2017
<script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></script>

Youtube

<iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameBorder="0" allowFullScreen></iframe>

Video

HTML

Internal Link

Internal link

External Link

External link

Anchor Scroll 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.

custom div

Paragraph text in custom div

  • Coffee
  • Tea
  • Milk
  1. Coffee
  2. Tea
  3. Milk

Underlined text

Other Elements

abbr, sub, sup, kbd, mark

GIF is a bitmap image format.

H2O

Xn + Yn = Zn

Press CTRL+ALT+Delete to end the session.

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