AnkiAssets

Load global CSS and JavaScript files for your Anki cards!

Installation

Download and run the latest AnkiAssets.ankiaddon release.

Usage

1. Place CSS and JavaScript files into their respective directories within the add-on's user_files directory. CSS files go into user_files/assets/css and JavaScript into user_files/assets/javascript. For example, the following shows the final structure of the add-on's directory when a card.css, _normalize.css and card.js are added.

   addons21/AnkiAssets
   ├── src/
   └── user_files
       ├── assets
       │   ├── css
       │   │   ├── _normalize.css  <- Here!
       │   │   └── card.css  <- Here!
       │   └── javascript
       │       └── card.js  <- And here!
       └── assets.json
   

Note that files starting with underscores _ or periods . are ignored. This allows for the use of CSS-style importing e.g. @import "_normalize.css";

2. Run Anki and go to Tools > AnkiAssets Preferences... to enable/disable the assets you want loaded for every card.

┌────────────────────────────────────────────┐
│           AnkiAssets Preferences           │
├────────────────────────────────────────────┤
│   CSS:                                     │
│ ┌────────────────────────────────────────┐ │
│ │  ■ card.css                            │ │
│ │  □ ...                                 │ │
│ └────────────────────────────────────────┘ │
│   JavaScript:                              │
│ ┌────────────────────────────────────────┐ │
│ │  ■ card.js                             │ │
│ │  □ ...                                 │ │
│ └────────────────────────────────────────┘ │
│ ┌─────────────┐ ┌─────────┐      ┌───────┐ │
│ └─────────────┘ └─────────┘      └───────┘ │
└────────────────────────────────────────────┘

Example Config

An example config can be found at: tnahs/anki-addon-configs:AnkiAssets.

Development

1. Install the required [python-version]. See the Anki development docs for more information.

   pyenv install [python-version]

2. Clone this repository.

   git clone git@github.com:tnahs/AnkiAssets.git

3. Set [python-version] as the local version:

   cd ./AnkiAssets
   pyenv local [python-version]

4. Create and enter a virtual environment:

   python -m venv .venv
   source .venv/bin/activate
   pip install --upgrade pip

5. Install required packages:

   pip install -r requirements.txt

6. Set development environment variables. See Anki development | Environment Variables for more information.

   Required:

   export ANKI_ADDON_DEVELOPMENT=1

   Optional:

   export ANKIDEV=1
   export LOGTERM=1
   export DISABLE_QT5_COMPAT=1

7. Run Anki from the terminal.

   anki