Remember Cards Documentation

Formatting Your Cards

Remember Cards supports markdown as well as a variety of custom widgets to help you create rich flashcards. You can learn more about them below.

Terminal Widget

The terminal widget allows you to display command-line interactions with proper styling.

Syntax:

<terminal title="Optional Title">
git init
</terminal>

Result:

Optional Title
git init

Details:

  • The title attribute is optional - if omitted, it will display "terminal"

Code Highlighting

Format code blocks with syntax highlighting for better readability.

Syntax:

```python
def hello_world():
    print("Hello, World!")
    return 42
```

Result:

def hello_world():
print("Hello, World!")
return 42

Math Expressions

Remember Cards supports LaTeX-style math expressions for mathematical notation.

Syntax:

$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$

Result:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

Syntax:

$$\int_{a}^{b} f(x) \, dx = F(b) - F(a)$$

Result:

\int_{a}^{b} f(x) \, dx = F(b) - F(a)

Tips:

  • Use single dollar signs (\$...\$) for inline math
  • Use double dollar signs (\$\$...\$\$) for display math (centered on its own line)
  • We use Katex under the hood, so most of the LaTeX commands are supported

Custom HTML with Tailwind

For advanced styling, you can use custom HTML with Tailwind CSS classes.

Syntax:

<div class="p-4 bg-yellow-100 dark:bg-yellow-800 rounded-lg border-l-4 border-yellow-500 text-yellow-700 dark:text-yellow-100">
  <div class="font-bold">Note:</div>
  This is an important note.
</div>

Result:

Note:
This is an important note.

Tips:

  • Remember Cards supports all Tailwind CSS utility classes
  • Remember to add dark mode variants (dark:bg-color) for better dark mode support
  • You can create custom callouts, buttons, and more with HTML and Tailwind