Card Template Setup - Anki Automation

Why Configure Card Templates?

Anki Automation generates cards with professional formatting that typical users wouldn't create manually. This styling enables:

Tables

Beautifully formatted data tables with headers, zebra stripes, and theme support

Math & LaTeX

Rendered equations like E = mc² using MathJax

Code Blocks

Syntax-styled code with monospace fonts and dark backgrounds

Callout Boxes

Info, Warning, and Tip boxes to highlight key information

Spoilers

Hidden hints that reveal on hover (desktop) or tap (mobile)

Badges & Tags

Colored labels for categorization and emphasis

Keyboard Keys

Styled <kbd> elements for shortcuts like Ctrl+C

Light/Dark Mode

Automatic theme detection for comfortable viewing

Automatic Reverse Cards

AI decides when a card benefits from a reversed version - created automatically

Without this styling, your AI-generated cards will display as plain text without any of these professional features.

Quick Setup Guide

Open Anki Desktop
Make sure Anki is running on your computer.
Go to Note Type Manager
Click Tools → Manage Note Types (or press Ctrl+Shift+N / Cmd+Shift+N)
Create a New Note Type
We recommend creating a dedicated note type called "Anki Automation" for cards from Anki Automation.

How to: Click "Add" → Select "Clone: Basic" → Name it "Anki Automation"
Verify Field Names (Important for Non-English Users)
The templates below use the standard field names Front and Back. If your Anki is in another language (e.g., German), your fields might be named Vorderseite and Rückseite.

Action Required: Select your new note type, click "Fields...", and rename your fields to exactly Front and Back. This ensures compatibility with the templates and the automation tool.
Open the Card Editor
Select your new note type and click the "Cards..." button.
Paste the Templates
Copy and paste each section below into the corresponding tab in Anki:
- Front Template → paste into "Front Template"
- Back Template → paste into "Back Template"
- Styling (CSS) → paste into "Styling"
Close and Save
Click "Close" to save your changes. Your cards will now display with professional styling!

Card Templates

Copy each section and paste into the corresponding area in Anki's card editor:

{{Front}}

<!-- MathJax for LaTeX rendering -->
<script>
(function() {
    // 1. Convert $...$ to \(...\) for Anki's default MathJax (safe for text nodes)
    function convertMath() {
        if (!document.body) return;
        function walk(node) {
            var child, next;
            switch (node.nodeType) {
                case 1:  // Element
                case 9:  // Document
                case 11: // Document fragment
                    if (['SCRIPT', 'STYLE', 'TEXTAREA', 'PRE', 'CODE'].indexOf(node.tagName) === -1) {
                        child = node.firstChild;
                        while (child) {
                            next = child.nextSibling;
                            walk(child);
                            child = next;
                        }
                    }
                    break;
                case 3: // Text node
                     // Use regex to replace $...$ with \(...\)
                     // Using ES5 compatible regex (no lookbehind) to ensure compatibility with all Anki versions
                     if (node.nodeValue.indexOf('$') !== -1) {
                         node.nodeValue = node.nodeValue.replace(/\$([^\$]+)\$/g, '\\($1\\)');
                     }
                    break;
            }
        }
        walk(document.body);
    }
    
    // Config if loading fresh
    if (typeof MathJax === "undefined") {
        window.MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                processEscapes: true
            }
        };
        var script = document.createElement("script");
        script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
        script.async = true;
        script.onload = function() { convertMath(); };
        document.head.appendChild(script);
    } else {
        // Already loaded? Run conversion then force typeset
        convertMath();
        setTimeout(function() {
            // MathJax 3
            if (window.MathJax.typesetPromise) window.MathJax.typesetPromise();
            // MathJax 2 (Legacy Anki)
            else if (window.MathJax.Hub) window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub]);
        }, 0);
    }
    
    // Also run convert immediately in case
    convertMath();
})();
</script>

{{FrontSide}}

<hr id="answer">

{{Back}}

<!-- MathJax for LaTeX rendering -->
<script>
(function() {
    // 1. Convert $...$ to \(...\) for Anki's default MathJax (safe for text nodes)
    function convertMath() {
        if (!document.body) return;
        function walk(node) {
            var child, next;
            switch (node.nodeType) {
                case 1:  // Element
                case 9:  // Document
                case 11: // Document fragment
                    if (['SCRIPT', 'STYLE', 'TEXTAREA', 'PRE', 'CODE'].indexOf(node.tagName) === -1) {
                        child = node.firstChild;
                        while (child) {
                            next = child.nextSibling;
                            walk(child);
                            child = next;
                        }
                    }
                    break;
                case 3: // Text node
                     // Use regex to replace $...$ with \(...\)
                     // Using ES5 compatible regex (no lookbehind) to ensure compatibility with all Anki versions
                     if (node.nodeValue.indexOf('$') !== -1) {
                         node.nodeValue = node.nodeValue.replace(/\$([^\$]+)\$/g, '\\($1\\)');
                     }
                    break;
            }
        }
        walk(document.body);
    }
    
    // Config if loading fresh
    if (typeof MathJax === "undefined") {
        window.MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                processEscapes: true
            }
        };
        var script = document.createElement("script");
        script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
        script.async = true;
        script.onload = function() { convertMath(); };
        document.head.appendChild(script);
    } else {
        // Already loaded? Run conversion then force typeset
        convertMath();
        setTimeout(function() {
            // MathJax 3
            if (window.MathJax.typesetPromise) window.MathJax.typesetPromise();
            // MathJax 2 (Legacy Anki)
            else if (window.MathJax.Hub) window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub]);
        }, 0);
    }
    
    // Also run convert immediately in case
    convertMath();
})();
</script>

/* ============================================================
   ANKI AUTOMATION - Professional Card Styling
   Version: 2.1.0
   
   Features: Tables, Code Blocks, Callouts, Spoilers, Badges,
             Keyboard Keys, Math/LaTeX, Light/Dark Mode
   
   Design Philosophy: Clean, professional styling with color
   used purposefully for emphasis, not decoration.
   ============================================================ */

/* === BASE CARD STYLING === */
.card {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: #1F2937;
    background-color: #FFFFFF;
    padding: 24px;
    text-align: left;
    max-width: 100%;
    word-wrap: break-word;
}

/* === ANSWER DIVIDER === */
hr#answer {
    border: none;
    height: 1px;
    background-color: #D1D5DB;
    margin: 24px 0;
}

/* === TABLE STYLING === */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.95em;
}

th {
    background-color: #F3F4F6;
    color: #374151;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #E5E7EB;
}

/* Table alignment classes */
th.text-center, td.text-center,
th[align="center"], td[align="center"] {
    text-align: center;
}

th.text-right, td.text-right,
th[align="right"], td[align="right"] {
    text-align: right;
}

td {
    padding: 10px 16px;
    border-bottom: 1px solid #E5E7EB;
    vertical-align: top;
    background-color: #FFFFFF;
}

tr:last-child td {
    border-bottom: none;
}

tr:nth-child(even) td {
    background-color: #F9FAFB;
}

/* Compact table variant */
table.compact th,
table.compact td {
    padding: 8px 12px;
}

/* === CODE STYLING === */
code {
    font-family: 'SF Mono', 'Consolas', 'Monaco', 'Menlo', monospace;
    background-color: #F3F4F6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: #1F2937;
}

pre {
    background-color: #1F2937;
    color: #E5E7EB;
    padding: 16px 20px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 16px 0;
    font-family: 'SF Mono', 'Consolas', 'Monaco', 'Menlo', monospace;
    font-size: 0.85em;
    line-height: 1.6;
}

pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

/* === CALLOUT BOXES === */
.callout {
    padding: 16px 20px;
    border-radius: 6px;
    margin: 16px 0;
    border-left: 4px solid;
}

.callout-info, .info {
    background-color: rgba(59, 130, 246, 0.08);
    border-left-color: #3B82F6;
    color: #1F2937;
}

.callout-warning, .warning {
    background-color: rgba(251, 191, 36, 0.1);
    border-left-color: #F59E0B;
    color: #1F2937;
}

.callout-tip, .tip {
    background-color: rgba(16, 185, 129, 0.1);
    border-left-color: #10B981;
    color: #1F2937;
}

.callout-error, .error {
    background-color: rgba(239, 68, 68, 0.1);
    border-left-color: #EF4444;
    color: #1F2937;
}

.callout strong, .info strong, .warning strong, .tip strong, .error strong {
    display: block;
    margin-bottom: 4px;
    color: inherit;
}

/* === SPOILER / REVEAL (Hover + Click/Tap) === */
.spoiler {
    background-color: #E5E7EB;
    color: transparent;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    user-select: none;
    border: 1px dashed #9CA3AF;
}

.spoiler:hover, .spoiler.revealed {
    background-color: #F3F4F6;
    color: #1F2937;
    border-color: #6B7280;
    border-style: solid;
}

/* Details/Summary spoiler (click-to-expand) */
details.spoiler-block {
    background-color: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    margin: 16px 0;
    overflow: hidden;
}

details.spoiler-block summary {
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 500;
    color: #374151;
    background-color: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
    user-select: none;
    list-style: none;
}

details.spoiler-block summary::-webkit-details-marker {
    display: none;
}

details.spoiler-block summary::before {
    content: "▶ ";
    display: inline-block;
    transition: transform 0.2s ease;
}

details.spoiler-block[open] summary::before {
    transform: rotate(90deg);
}

details.spoiler-block > *:not(summary) {
    padding: 16px;
}

/* === BADGES / TAGS === */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
    margin: 2px 4px 2px 0;
    vertical-align: middle;
}

.badge-cyan, .badge-primary {
    background-color: rgba(0, 229, 255, 0.15); /* PRIMARY ACCENT */
    color: #0891B2;
}

.badge-blue {
    background-color: rgba(59, 130, 246, 0.15);
    color: #2563EB;
}

.badge-green, .badge-success {
    background-color: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.badge-amber, .badge-warning {
    background-color: rgba(251, 191, 36, 0.15);
    color: #D97706;
}

.badge-red, .badge-error {
    background-color: rgba(239, 68, 68, 0.15);
    color: #DC2626;
}

.badge-purple {
    background-color: rgba(139, 92, 246, 0.15);
    color: #7C3AED;
}

.badge-gray {
    background-color: rgba(107, 114, 128, 0.15);
    color: #4B5563;
}

/* === KEYBOARD KEYS === */
kbd {
    display: inline-block;
    padding: 4px 8px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.85em;
    color: #374151;
    background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 100%);
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    box-shadow: 0 2px 0 #D1D5DB;
    margin: 0 2px;
    vertical-align: middle;
}

/* === BLOCKQUOTE === */
blockquote {
    border-left: 4px solid #D1D5DB;
    margin: 16px 0;
    padding: 12px 20px;
    background-color: #F9FAFB;
    border-radius: 0 6px 6px 0;
    color: #4B5563;
    font-style: italic;
}

blockquote cite {
    display: block;
    margin-top: 8px;
    font-size: 0.9em;
    color: #6B7280;
    font-style: normal;
}

/* === DEFINITION LIST === */
dl {
    margin: 16px 0;
}

dt {
    font-weight: 600;
    color: #1F2937;
    margin-top: 12px;
}

dd {
    margin-left: 20px;
    padding: 8px 0;
    color: #4B5563;
    border-left: 2px solid #E5E7EB;
    padding-left: 16px;
}

/* === LISTS === */
ul, ol {
    margin: 16px 0;
    padding-left: 24px;
}

li {
    margin-bottom: 8px;
    line-height: 1.6;
}

ul ul, ol ol, ul ol, ol ul {
    margin: 8px 0;
}

/* === HIGHLIGHT / MARK === */
mark, .highlight {
    background-color: rgba(251, 191, 36, 0.35);
    padding: 2px 6px;
    border-radius: 4px;
    color: inherit;
}

.highlight-yellow {
    background-color: rgba(251, 191, 36, 0.35);
}

.highlight-green {
    background-color: rgba(16, 185, 129, 0.3);
}

.highlight-red {
    background-color: rgba(239, 68, 68, 0.2);
}

.highlight-cyan {
    background-color: rgba(0, 229, 255, 0.25);
}

/* === COMPARISON TABLE (Checkmarks) === */
.yes, .check {
    color: #10B981;
    font-weight: bold;
}

.no, .cross {
    color: #EF4444;
    font-weight: bold;
}

/* === HEADINGS === */
h1, h2, h3, h4, h5, h6 {
    margin: 20px 0 12px 0;
    color: #111827;
    line-height: 1.4;
    font-weight: 600;
}

h1 { font-size: 1.6em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }

/* === LINKS === */
a {
    color: #2563EB;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #1D4ED8;
}

/* === IMAGES === */
img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 12px 0;
}

/* === HORIZONTAL RULE === */
hr {
    border: none;
    height: 1px;
    background-color: #D1D5DB;
    margin: 24px 0;
}

/* === STRONG / EMPHASIS === */
strong, b {
    font-weight: 600;
    color: #111827;
}

em, i {
    font-style: italic;
}

/* === LATEX / MATHJAX === */
.MathJax, .mathjax, mjx-container {
    font-size: 1.1em !important;
    overflow-x: auto;
}

/* === CLOZE DELETIONS === */
.cloze {
    font-weight: 600;
    color: #2563EB;
    background-color: rgba(59, 130, 246, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}


/* ============================================================
   NIGHT MODE / DARK THEME
   ============================================================ */
.nightMode .card {
    background-color: #111827;
    color: #E5E7EB;
}

.nightMode hr#answer {
    background-color: #374151;
}

/* Tables - Night */
.nightMode table {
    background: #1F2937;
    border-color: #374151;
}

.nightMode th {
    background-color: #374151;
    color: #F9FAFB;
    border-bottom-color: #4B5563;
}

.nightMode td {
    border-bottom-color: #374151;
    background-color: #1F2937;
}

.nightMode tr:nth-child(even) td {
    background-color: #263244;
}

/* Code - Night */
.nightMode code {
    background-color: #374151;
    color: #E5E7EB;
}

.nightMode pre {
    background-color: #0F172A;
}

/* Callouts - Night */
.nightMode .callout-info, .nightMode .info {
    background-color: rgba(96, 165, 250, 0.1);
    border-left-color: #60A5FA;
    color: #E5E7EB;
}

.nightMode .callout-warning, .nightMode .warning {
    background-color: rgba(251, 191, 36, 0.1);
    color: #E5E7EB;
}

.nightMode .callout-tip, .nightMode .tip {
    background-color: rgba(52, 211, 153, 0.1);
    color: #E5E7EB;
}

.nightMode .callout-error, .nightMode .error {
    background-color: rgba(248, 113, 113, 0.1);
    color: #E5E7EB;
}

/* Spoilers - Night */
.nightMode .spoiler {
    background-color: #374151;
    border-color: #4B5563;
}

.nightMode .spoiler:hover, .nightMode .spoiler.revealed {
    background-color: #4B5563;
    border-color: #6B7280;
    color: #E5E7EB;
}

.nightMode details.spoiler-block {
    background-color: #1F2937;
    border-color: #374151;
}

.nightMode details.spoiler-block summary {
    background-color: #263244;
    border-bottom-color: #374151;
    color: #E5E7EB;
}

/* Badges - Night */
.nightMode .badge-cyan, .nightMode .badge-primary {
    background-color: rgba(34, 211, 238, 0.2);
    color: #67E8F9;
}

.nightMode .badge-blue {
    background-color: rgba(96, 165, 250, 0.2);
    color: #93C5FD;
}

.nightMode .badge-green, .nightMode .badge-success {
    background-color: rgba(52, 211, 153, 0.2);
    color: #6EE7B7;
}

.nightMode .badge-amber, .nightMode .badge-warning {
    background-color: rgba(251, 191, 36, 0.2);
    color: #FCD34D;
}

.nightMode .badge-red, .nightMode .badge-error {
    background-color: rgba(248, 113, 113, 0.2);
    color: #FCA5A5;
}

.nightMode .badge-purple {
    background-color: rgba(167, 139, 250, 0.2);
    color: #C4B5FD;
}

.nightMode .badge-gray {
    background-color: rgba(156, 163, 175, 0.2);
    color: #D1D5DB;
}

/* Keyboard - Night */
.nightMode kbd {
    background: linear-gradient(180deg, #374151 0%, #1F2937 100%);
    color: #E5E7EB;
    border-color: #4B5563;
    box-shadow: 0 2px 0 #374151;
}

/* Blockquote - Night */
.nightMode blockquote {
    background-color: #1F2937;
    border-left-color: #4B5563;
    color: #9CA3AF;
}

.nightMode blockquote cite {
    color: #6B7280;
}

/* Definition List - Night */
.nightMode dt {
    color: #F3F4F6;
}

.nightMode dd {
    color: #9CA3AF;
    border-left-color: #374151;
}

/* Highlights - Night */
.nightMode mark, .nightMode .highlight {
    background-color: rgba(251, 191, 36, 0.3);
}

.nightMode .highlight-yellow {
    background-color: rgba(251, 191, 36, 0.3);
}

.nightMode .highlight-green {
    background-color: rgba(52, 211, 153, 0.25);
}

.nightMode .highlight-cyan {
    background-color: rgba(34, 211, 238, 0.25);
}

.nightMode .highlight-red {
    background-color: rgba(248, 113, 113, 0.2);
}

/* Headings - Night */
.nightMode h1, .nightMode h2, .nightMode h3,
.nightMode h4, .nightMode h5, .nightMode h6 {
    color: #F3F4F6;
}

/* Links - Night */
.nightMode a {
    color: #60A5FA;
}

.nightMode a:hover {
    color: #93C5FD;
}

/* Strong - Night */
.nightMode strong, .nightMode b {
    color: #F9FAFB;
}

/* Cloze - Night */
.nightMode .cloze {
    color: #60A5FA;
    background-color: rgba(96, 165, 250, 0.15);
}


/* ============================================================
   MOBILE OPTIMIZATIONS
   ============================================================ */
@media screen and (max-width: 600px) {
    .card {
        font-size: 16px;
        padding: 16px;
    }
    
    table {
        font-size: 0.9em;
    }
    
    th, td {
        padding: 10px 12px;
    }
    
    pre {
        font-size: 0.8em;
        padding: 12px 14px;
    }
    
    .badge {
        font-size: 0.75em;
    }
}


/* ============================================================
   SPOILER CLICK/TAP FUNCTIONALITY (JavaScript-free fallback)
   This uses :focus for tap support on mobile
   ============================================================ */
.spoiler:focus {
    background-color: rgba(0, 229, 255, 0.1);
    color: #1F2937;
    border-color: #00E5FF;
    border-style: solid;
    outline: none;
}

.nightMode .spoiler:focus {
    background-color: rgba(34, 211, 238, 0.15);
    color: #E5E7EB;
    border-color: #22D3EE;
}

What Your Cards Will Look Like

Automatic Reverse Cards: When the AI determines a card is suitable for bidirectional learning (e.g., vocabulary, definitions, translations), it marks it with reverse: true. The system automatically creates both the original card and a reversed version—no user action needed! Reversed cards have a reversed tag so you can filter them in Anki's browser if needed.

After applying the styling, your AI-generated cards will display these professional features:

Callout Boxes

Info: This highlights important information that helps understanding.

Warning: This draws attention to potential pitfalls or common mistakes.

Tip: This provides helpful hints and best practices.

Badges / Tags

Perfect for categorizing concepts:

Primary Easy Medium Important

Feature	HTML Element	Description
Tables	`<table>`	Headers, zebra stripes, responsive
Code	`<code>`, `<pre>`	Inline and block code formatting
Callouts	`<div class="info">`	Info, Warning, Tip, Error boxes
Spoilers	`<span class="spoiler">`	Hidden hints (hover/tap to reveal)
Badges	`<span class="badge-cyan">`	Colored category labels
Keys	`<kbd>`	Keyboard shortcuts

Customizing Colors

The default color scheme uses cyan (#00E5FF) as the primary accent to match Anki Automation's interface. To change this:

Find and Replace
In the CSS, search for #00E5FF (light mode) and #22D3EE (dark mode) and replace with your preferred color.
Alternative Colors
Some popular alternatives:
- Blue: #3B82F6 (light) / #60A5FA (dark)
- Purple: #8B5CF6 (light) / #A78BFA (dark)
- Green: #10B981 (light) / #34D399 (dark)
- Orange: #F97316 (light) / #FB923C (dark)

Prompt-Based Control: You can also tell the AI to avoid certain features when generating cards. For example: "Don't use spoilers or callout boxes" or "Keep formatting minimal".

HTML Element Reference

The AI uses these HTML elements when generating cards. This reference helps you understand what's possible:

<!-- Tables -->
<table>
  <tr><th>Header 1</th><th>Header 2</th></tr>
  <tr><td>Data 1</td><td>Data 2</td></tr>
</table>

<!-- Code -->
<code>inline code</code>
<pre><code>block of code</code></pre>

<!-- Keyboard Keys -->
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.

<!-- Highlighted Text -->
This is <mark>highlighted</mark> text.

<!-- Blockquote -->
<blockquote>
  "Important quote here."
  <cite>— Author Name</cite>
</blockquote>

<!-- Info Box -->
<div class="info">
  <strong>Note:</strong> Important information here.
</div>

<!-- Warning Box -->
<div class="warning">
  <strong>Warning:</strong> Be careful about this.
</div>

<!-- Tip Box -->
<div class="tip">
  <strong>Tip:</strong> Helpful hint here.
</div>

<!-- Error Box -->
<div class="error">
  <strong>Error:</strong> Common mistake to avoid.
</div>

<!-- Inline Spoiler (hover on desktop, tap on mobile) -->
The answer is <span class="spoiler" tabindex="0">hidden text</span>.

<!-- Block Spoiler (click/tap to expand) -->
<details class="spoiler-block">
  <summary>Click to reveal hint</summary>
  <p>The hidden hint content appears here when expanded.</p>
</details>

<!-- Badge Colors -->
<span class="badge badge-cyan">Primary</span>
<span class="badge badge-blue">Blue</span>
<span class="badge badge-green">Success</span>
<span class="badge badge-amber">Warning</span>
<span class="badge badge-red">Error</span>
<span class="badge badge-purple">Purple</span>
<span class="badge badge-gray">Gray</span>

<!-- Comparison Table with Checkmarks -->
<table>
  <tr><th>Feature</th><th>Option A</th><th>Option B</th></tr>
  <tr><td>Speed</td><td class="yes">✓</td><td class="no">✗</td></tr>
</table>

Troubleshooting

Tables showing as plain text?

Make sure you pasted the CSS in the "Styling" section, not in the Front or Back template.

LaTeX / Math not rendering?

The MathJax script loads from the internet. Make sure you have an internet connection when reviewing cards. On mobile, this may take a moment to load.

Spoilers not revealing on mobile?

Make sure the spoiler element has tabindex="0" for tap support. For guaranteed mobile support, use the <details> block spoiler instead.

Changes not visible?

Press Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac) in the card browser to refresh, or restart Anki.

Night mode colors not working?

Make sure Anki's night mode is enabled in preferences. The CSS uses the .nightMode class which Anki adds automatically.

How do reverse cards work?

When the AI marks a card with reverse: true, the system automatically creates two cards: the original and a reversed version (Front↔Back swapped). Reversed cards have a reversed tag so you can filter them in Anki's browser if needed.

Additional Resources

Back to Getting Started Open Anki Automation

Need more help?