Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tnahs/ankiassets
Load global CSS and JavaScript files for your Anki cards!
https://github.com/tnahs/ankiassets
anki
Last synced: 4 days ago
JSON representation
Load global CSS and JavaScript files for your Anki cards!
- Host: GitHub
- URL: https://github.com/tnahs/ankiassets
- Owner: tnahs
- License: mit
- Created: 2020-03-20T03:05:02.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-19T06:52:21.000Z (about 2 years ago)
- Last Synced: 2024-12-12T14:44:55.045Z (about 2 months ago)
- Topics: anki
- Language: Python
- Homepage:
- Size: 124 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AnkiAssets
Load global CSS and JavaScript files for your Anki cards!
## Installation
Download and run the latest [`AnkiAssets.ankiaddon`][releases] 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.
```plaintext
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.
```plaintext
┌────────────────────────────────────────────┐
│ AnkiAssets Preferences │
├────────────────────────────────────────────┤
│ CSS: │
│ ┌────────────────────────────────────────┐ │
│ │ ■ card.css │ │
│ │ □ ... │ │
│ └────────────────────────────────────────┘ │
│ JavaScript: │
│ ┌────────────────────────────────────────┐ │
│ │ ■ card.js │ │
│ │ □ ... │ │
│ └────────────────────────────────────────┘ │
│ ┌─────────────┐ ┌─────────┐ ┌───────┐ │
│ └─────────────┘ └─────────┘ └───────┘ │
└────────────────────────────────────────────┘
```
## Example Config
An example config can be found at: [tnahs/anki-addon-configs:AnkiAssets][anki-assets-config].
## Development
1. Install the required `[python-version]`. See the [Anki development][anki-dev]
docs for more information.
```shell
pyenv install [python-version]
```
2. Clone this repository.
```shell
git clone [email protected]:tnahs/AnkiAssets.git
```
3. Set `[python-version]` as the local version:
```shell
cd ./AnkiAssets
pyenv local [python-version]
```
4. Create and enter a virtual environment:
```shell
python -m venv .venv
source .venv/bin/activate
pip install --upgrade pip
```
5. Install required packages:
```shell
pip install -r requirements.txt
```
6. Set development environment variables. See
[Anki development | Environment Variables][env-var] for more information.
Required:
```shell
export ANKI_ADDON_DEVELOPMENT=1
```
Optional:
```shell
export ANKIDEV=1
export LOGTERM=1
export DISABLE_QT5_COMPAT=1
```
7. Run Anki from the terminal.
```shell
anki
```
[anki-assets-config]: https://github.com/tnahs/anki-addon-configs/tree/AnkiAssets
[anki-dev]: https://github.com/ankitects/anki/blob/main/docs/development.md
[env-var]: https://github.com/ankitects/anki/blob/main/docs/development.md#environmental-variables
[releases]: https://github.com/tnahs/AnkiAssets/releases