This is a visual shorthand (for myself) about how to call upon various features in MDX. Their integration is detailed elsewhere.

Table of Contents

• h1 Header

  • h2 Header

    • h3 Typography
    • Tasks

  • MDX

    • Importing from node-modules
    • From mdx-embed

  • Cantonese

  • Math & chemistry

    • Maths from LaTeX
    • 3D molecules from 3Dmol.js

  • Audio Video

  • Layout

  • Charts

    • eCharts
    • Flowchart
    • Digraph
    • PrimeReact charts
    • AirBnB VisX
    • Nivo
    • Statecharts
    • Mermaid diagrams
    • Graphviz / DOT files

  • Animations

    • Rive.app based animations

  • Flask APIs

h1 Header

h2 Header

h3 Typography

Some normal text, with some italics text, some bold text, some doubly-so text. And here is a strikeout text.

And here is a link.

An unordered list:

• item 1
• item 2
• item 3

An ordered list:

1. Item A
2. Item B
3. Item C
4. Nested

Here is a plugin remark-jargon from freesewing.

Tasks

• list syntax required (any unordered or ordered list supported)
• this is a complete item
• this is an incomplete item

MDX

Importing from node-modules

From mdx-embed

Cantonese

<!-- Jyutping defined as MDX component -->
<Jyutping manual="sik6 je5" />
<font size="+5">
  <ruby>
    食嘢
    <rt>
      <Jyutping manual="sik6 je5" />
    </rt>
  </ruby>
</font>

Math & chemistry

Maths from LaTeX

3D molecules from 3Dmol.js

<Molecule dataPdb="1bl8" />

The component accepts the following props:

Molecule.defaultProps = {
  height: '400px',
  width: '100%',
  dataPdb: '',
  dataHref: '',
  dataType: '',
  dataBackgroundColor: '0x003466',
  dataBackgroundAlpha: '0.9',
  dataSelect: '',
  dataZoomto: '',
  dataStyle: 'stick;colorscheme:Jmol',
  dataSurface: 'opacity:.5;color:white',
  dataSpin: '',
}

See 3Dmol.js docs for tag usage.

Audio Video

<audio src="/static/audio/audiotest.mp3" vtt="/static/audio/audiotest.vtt" />

Layout

Charts

eCharts

In the future, revisit Apache eCharts integration. At the moment (Jul 2021) this seems to be incompatible with SSR in Next.js.

Flowchart

With react-flow-renderer:

<Flow />

Digraph

Need to investigate integrating react-digraph from Uber. Naive attempt failed; something to do with types?

PrimeReact charts

<DoughnutChartDemo />

This is OK as an option but I think something d3-based like nivo or VisX will be more flexible.

AirBnB VisX

I really like the design philosophy behind VisX, and it more-or-less integrates OK. There are some broken dependencies as of 1.6.1, mostly relating to outdated dependencies on React 16.8 and react-spring v8, but these are known issues and should be handled in the 2.0.0 release.

Nivo

Statecharts

I really really wanted a statechart visualizer for Xstates... maybe end of 2021?

Mermaid diagrams

Mermaid can be imported directly into a mdx file and the <Mermaid> component used inline:

import Mermaid from 'react-mermaid2'
;<Mermaid
  chart={`
%%{init: {'theme':'dark'}}%%
flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2
`}
/>

produces:

For custom styling see application of CSS styles here.

For inclusion of images see this issue comment.

Graphviz / DOT files

Graphviz .DOT files can also be used (!!) See d3-graphhviz documentation here.

<Graphviz dot="{`" digraph { grandparent ->
  "parent A"; child; "parent B" -> child; grandparent -> "parent B"; } `} /></Graphviz
>

Animations

Rive.app based animations

import Rive from 'rive-react'
<Rive src="/static/rive/heart.riv" />
<Rive src="https://cdn.rive.app/animations/vehicles.riv" />

See docs for rive-react, rive-js, and Rive Help Center.

Flask APIs