Sandbox

Media

Audio

Vimeo

Animations

Rive

example here

Animated SVG

example here

---

Writing

Code

Via Prismatic. 🚧 TODO: how to use Fira Code here?

def greetings(name) do
      "Hello" <> name
      |> Makeup.highlight()
    end
    

Inline code

Here is some inline code != |>

Science

LaTeX math

Here is an inline \(E=mc^2\)

$$E=mc^2$$

LaTeX chem equation

Here is an inline chemical equation \(\ce{H2SO4}\)

$$\ce{H2SO4\aq <=>> H+\aq{} + HSO4^{-}\aq}$$

3D molecules

This is done as an iFrame embed of 3Dmol. The interesting thing here is that there is Session enabled, which makes it possible to annotate on a particular screen and the annotations sync’ed to linked devices. (🔗 Documentation for the URL scheme)

This is performant for macromolecules as well:

Pictures

Mermaid diagrams

The markup of the following diagram contains styling for use in this website. 🔗 documentation.

wp-mermaid doesn’t actually work. The themed diagrams for this website’s style is in the following.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'fontFamily': 'Piazzolla',
      'primaryColor': '#05A2C2',
      'primaryTextColor': '#eee',
      'lineColor': '#687076',
      'secondaryColor': '#A07653',
      'tertiaryColor': '#E7F9FB'
    }
  }
}%%

flowchart LR
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

Interactives

Sli.dev

reveal.js

Elixir LiveView

A dead view

A LiveView.