David Wells

Builder of things

Serverless Architectures
User Experience & Product

Serverless, User Experience & Product

Code Blocks

January 01, 2020

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

Inline Code

Inline code can be added with the backticks

Inline code can be added with the backticks

Here's a inline code block that is very long and should wrap to the next line because it's a long line of text

And another Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labo

Inline code with syntax highlighting

This is an example of inline code with syntax highlighting.

js console.log('hello, world')

Code blocks

HTML code snippet

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

Javascript code snippet

console.log('test')

Markdown code snippet

# Heading One

Lorem ipsum dolor sit amet. **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*. 
Quisque eget massa a massa semper mollis [clickable link](https://google.com) mi ligula.

## Heading Two

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.

Code with Options (WIP)

Markdown example with filename

```js
console.log('hello, world')
```

Line numbers

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Highlight sub strings

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Copy Button

console.log('hello, world')

Show line numbers

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Code snippet with options

```js lines="1, 4-7, 12-23, 25-26" lineNumbers
import { useState } from 'react'
import Analytics from 'analytics'

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

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

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

// Fire a page view
analytics.page()
```

Renders:

import { useState } from 'react'
import Analytics from 'analytics'

function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

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

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

// Fire a page view
analytics.page()

Ansii highlighting

 ✓ src/index.test.ts (1)
   Test Files  1 passed (1)
        Tests  1 passed (1)
     Start at  23:32:41
     Duration  11ms
   PASS  Waiting for file changes...
         press h to show help, press q to quit

Code in details

Examples of code in the details element.

Expand code

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

Examples of code with description in details.

Expand code

This code does xyz.

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

Escaped Code in details

Javascript example:

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

Javascript code markdown

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

Python example:

s = "Python syntax highlighting"
print s

Python code markdown

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

Four tick box

Using 4 backticks (````) ticks

Four tick box

Options

No highlight

```javascript
console.log('test')
```

Code inside lists

List item one
```
const s = "custom code"
alert(s)
```

List item two

import Analytics from 'analytics'

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

// Fire a page view
analytics.page()

List item three with WIDE code. Horizontally scrollable.

import Analytics from 'analyticsskajldalkdalksdjalkddlaksjdlsakjdlkasjdlksajdlakjdlkasjdlkasjdlkajsdlkajdlkjalksdjalkdjalkdjalkdjaslkdjaslkjdlkasjdlaskdjalkalksjalkjasdlkadjas'

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

// Fire a page view
analytics.page()

Code inside of footnotes

Example of code inside a footnote^[1].

Code inside blockquotes

Bold text next to italic text and an example of underlined text.
Quote Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi. Praesent fringilla ornare ullamcorper.
const { Analytics } = require('analytics')

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

// Fire a page view
analytics.page()
Quote Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae mauris arcu, eu pretium nisi.

Code in an aside

This is an example of placing a code block inside an html aside element.

With 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.

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

For more info see the docs

Code inside list inside details

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

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

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

For more information see google

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

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

Notes

^ This is a big multiline footnote with multiple paragraphs and code.
To include multiple lines, you must indent content.
Here is inline code { my code }
And here is a nested block:
```
alert('hooray')
```

David Wells

Builder of things

Serverless ArchitecturesUser Experience & Product

Code Blocks

Inline Code

Inline code with syntax highlighting

Code blocks

Code with Options (WIP)

Code snippet with options

Code in details

Escaped Code in details

Four tick box

Options

Code inside lists

Code inside of footnotes

Code inside blockquotes

Quote Heading 3

Quote Heading 5

Code in an aside

Code inside list inside details

Notes

Serverless Architectures
User Experience & Product