micro-mdx-parser

For code blocks that allows multiple lines, syntax highlighting, line numbers and line highlighting, use triple backticks for code fencing: ```. HTML code snippet <pre class="language-html" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-html"><p align="center"> <img width="460" height="300" src="https://picsum.photos/460/300" /> what </p></code></pre> Javascript code snippet <pre class="language-javascript" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-javascript">console.log('test')</code></pre> Markdown <pre class="language-md" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-md"># Test text ## Test text</code></pre> ## Code in details Examples of code in `details` <details> <summary>Expand code</summary> <pre class="language-graphql" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-graphql">mutation updatePurchaseOrder { update_PurchaseOrder( id: "<PO_ID>", input: { expected: "2022-01-03T00:00:00Z" } ) { transaction { submissionTime transactionId } } }</code></pre> </details> Examples of code with description in `details` <details> <summary>Expand code</summary> This code does xyz. <pre class="language-js" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-js">const s = "JavaScript syntax highlighting" alert(s)</code></pre> </details> ## Escaped Code in details Javascript example: <pre class="language-javascript" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-javascript">const s = "JavaScript syntax highlighting" alert(s)</code></pre> <details> <summary>Javascript code markdown</summary> ```` ```javascript const s = "indented JavaScript syntax highlighting" alert(s) ``` ```` </details> Python example: <pre class="language-python" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-python">s = "Python syntax highlighting" print s</code></pre> <details> <summary>Python code markdown</summary> <pre class="language-md" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-md">```python s = "Python syntax highlighting" print s ```</code></pre> </details> ## Four tick box Using 4 backticks (<code>````</code>) ticks <pre class="language-md" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-md">Four tick box</code></pre> ## Options No highlight ````md ```javascript console.log('test') ``` ```` ## Code inside lists 1. List item one <pre class="language-js" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-js">const s = "custom code" alert(s)</code></pre> 2. List item two <pre class="language-js" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-js">alert(s)</code></pre> 3. List item three --- ## Code inside list inside 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>` <details> <summary>List Purchase Orders Query</summary> This is how you do this query thingie 1. Xyz 2. Abc 3. Lol <pre class="language-graphql" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-graphql">query listPurchaseOrders { list_PurchaseOrderItems { _PurchaseOrderItems { _id _owner created expected fulfilled orderId updated items { quantity sku } } } }</code></pre> For more information see [google](http://google.com) </details> 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 <details> <summary>Update Purchase Order Mutation</summary> <pre class="language-graphql" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-graphql">mutation updatePurchaseOrder { update_PurchaseOrder( id: "<PO_ID>", input: { expected: "2022-01-03T00:00:00Z" } ) { transaction { submissionTime transactionId version } } }</code></pre> </details> 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 <details> <summary>Update Purchase Order Mutation</summary> <pre class="language-graphql" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-graphql">mutation updatePurchaseOrder { update_PurchaseOrder( id: "<PO_ID>", input: { expected: "2022-01-03T00:00:00Z" } ) { transaction { submissionTime transactionId version } } }</code></pre> </details> In here <details> <summary>Update Purchase Order Mutation</summary> <pre class="language-graphql" style="background-color:#fff;--shiki-dark-bg:#282A36;color:#24292e;--shiki-dark:#F8F8F2" tabindex="0"><code class="language-graphql">mutation updatePurchaseOrder { update_PurchaseOrder( id: "<PO_ID>", input: { expected: "2022-01-03T00:00:00Z" } ) { transaction { submissionTime transactionId version } } }</code></pre> </details>