Rich Card Rendering

Flipnem renders card content with support for Markdown links and tables, syntax-highlighted code blocks, diagrams, musical notation, and LaTeX math. All of these work in both the front and back of a card.

Markdown

Links

URLs in a card become clickable, in two styles:

• Bare URLs are linked automatically — just paste https://example.com into a card and it becomes a link.
• Labeled links use Markdown syntax: [Document name](https://example.com) renders as Document name, showing the label instead of the raw URL.

See [the HIPAA Security Rule](https://www.hhs.gov/hipaa/) for details,
or the raw link: https://www.hhs.gov/hipaa/

A few things to know:

• Links open in a new browser tab.
• Only http, https, and mailto: (labeled syntax only) links are created — other schemes are left as plain text for safety.
• URLs inside code blocks or inline code are left untouched, so you can show a URL as literal text.
• Link color adapts to the card background so links stay readable on any background color.

Tables

Standard GitHub-flavored Markdown pipe tables render as HTML tables:

| Element | Symbol | Atomic Number |
|---------|--------|---------------|
| Hydrogen | H | 1 |
| Carbon | C | 6 |
| Oxygen | O | 8 |

The header row and alignment separators (---) are required.

Syntax Highlighting

Wrap code in a fenced block with a language tag and it will be syntax-highlighted using highlight.js with the Atom One Dark theme.

```python
def fib(n):
    return n if n < 2 else fib(n-1) + fib(n-2)
```

Any language supported by highlight.js works — python, javascript, rust, sql, bash, java, go, cpp, and dozens more. Omit the language tag for a plain monospace block with no highlighting.

Mermaid Diagrams

Use the mermaid language tag to render flowcharts, sequence diagrams, class diagrams, and more using Mermaid.

```mermaid
graph LR
  A[Start] --> B{Condition}
  B -- Yes --> C[Do thing]
  B -- No --> D[Skip]
```

```mermaid
sequenceDiagram
  Client->>Server: GET /api/cards
  Server-->>Client: 200 OK
```

Supported diagram types include flowcharts (graph), sequence diagrams, class diagrams, state diagrams, entity-relationship diagrams, Gantt charts, and pie charts.

ABC Musical Notation

Use the abc language tag to render sheet music using abcjs.

```abc
X:1
T:Ode to Joy
M:4/4
L:1/4
K:C
E E F G | G F E D | C C D E | E3/2 D/ D2 |
```

This renders an interactive score directly on the card — useful for music theory or ear training decks.

MathJax (LaTeX)

LaTeX math expressions are rendered using MathJax v3.

• Inline math: wrap with \( ... \) — e.g. \( E = mc^2 \)
• Display math: wrap with \[ ... \] for a centred block equation

Anki decks that use <anki-mathjax> tags (the native Anki math format) also render correctly on import — no manual conversion needed.

Hashcards Source Blocks

Source notes that contain a ```hashcards ``` fence display the full deck source as a syntax-highlighted Markdown code block. This is useful for storing the original .md file alongside a deck so viewers can see exactly how it was built.

Inner fenced blocks (e.g. ```python) inside a hashcards fence are treated as literal content — they do not close the outer block.

Notes

• Rendering happens at study time, not at import time — card field content is stored as-is.
• If a card's field already contains raw HTML (e.g. imported from an Anki .apkg with HTML templates), the Markdown rendering step is skipped to avoid double-processing.