Allows you to override the default styling of lists, links, etc. within Anki’s fields, as well as the overall look of the editor.
How to use it:
navigate to the add-on folder (Tools → Add-ons → CSS Injector - Change default editor styles → click “View Files”) edit the CSS files located in the folder user_files. editor.css is for general editor styles outside of fields field.css affects content within fields restart the editor Selectable attributes:
Here’s what the add-on adds to the whole document:
And here’s what’s selectable on anki-editable: Night mode specific styling is also supported: Use class .nightMode or .night_mode.
Changelog 21.02.23 patch for Anki versions 2.1.55-2.1.58+ 26.05.22 hotfix for older systems that don’t support optional chaining operator yet 25.05.22 support legacy versions (<2.1.49) add new selectable attributes: editor: “svelte” (2.1.50+) or “legacy” (below 2.1.49) pointversion: exact patch version of Anki install use reliable method of obtaining <anki-editable> (thanks to Hikaru!) this should also fix the HTML root node not receiving attributes fix change notetype behavior (again) greatly reduce complexity of add-on 22.05.22 fix broken browser behavior fix styles not applying when switching to notetype with more fields fix notetype specific styles not applying to first note in add mode 19.04.22 add notetype name, field name, field index (ord) as selectable attributes to body and shadow roots (anki-editable) 03.04.22 restructure and publish source code yet another fix for 2.1.50 API changes 19.01.22 Hotfix for 2.1.50 05.10.21 allow specific styling for night mode and individual note types move CSS folder to user_files to preserve them on updates 11.05.21 publication Made by Matthias Metelka | @kleinerpirat Thanks to Hikaru Y. for his amazing contribution to this add-on, and to ijgnd, Thomas Kahn and shallash, for their great suggestions and continued testing!
- inspired by Henrik Giesel: https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/8
Screenshots
Liên kết hỗ trợ
Reviews (20)
👍 2026-02-17
Incredibly useful for making CSS stuff in the editor look the same as it does in your actual card.
👍 2025-06-29
If anyone else has an issue since 24.10rc1, I’ve had to change the CSS rules like this:
“.fields { display: flex; flex-wrap: wrap; }”
Changed to:
“.fields.svelte-197fndw { display: flex; flex-wrap: wrap; }” … “[notetype=“name”] .fields > div:nth-child(1) {width: 60%}”
Changed to:
“[notetype=“name”] .field-container[data-index=“0”] {width: 60%}”
With data-index starting at 0 instead of 1 like nth-child.
👍 2024-09-18
worked really well used it to change format of list and to allow for quick copy and pasting from a source (reformatting header, list, font, links (making them inactive). if anyone ist interested here is an example
- field.css span { font-weight: inherit !important; font-size: 100% !important; text-decoration: none !important; } a { color: inherit !important; pointer-events: none !important; font-weight: inherit !important; font-size: 100% !important; text-decoration: none !important; } sup{ font
👍 2024-09-17
This addon provides styling capability that can be used to achieve what another unmaintained addon was able to: Multi-column note editor (outdated by 2.1.50) https://ankiweb.net/shared/info/3491767031
in editor.css add .fields { grid-template-columns: repeat(2,1fr) ;}
Thank you developers!
Tips and quick links: Quick and dirty AnkiWebView Inspector : https://ankiweb.net/shared/info/31746032 , or study files under https://github.com/ankitects/anki/blob/main/ts/editor/ . Also check out a simi
👍 2024-08-24
Awesome, thanks man! keep the good work
👍 2024-01-07
Awesome
👍 2023-10-08
field.css
img:not([data-editor-shrink=“false”]) { max-width: 40px !important; }
👍 2023-06-14
Muito bom!
👍 2023-05-03
Great for customizing the interface.
👍 2023-04-25
works for image resizing
👍 2023-04-14
Wonderfull! Do not forget to change fields.css if you want to change style of fields! :)
👍 2022-12-05
Great. Thank you. I use it to limit the image size shown in the editor:
In fields.css, add
anki-editable img {max-height: 100px}
👍 2022-07-21
Awesome!
Would be nice to be able to also inject css (and js?) in other views, such as Overview and DeckBrowser etc.
👍 2022-05-24
Super!
👍 2022-05-18
thanks! very need for it
👍 2022-04-20
Well, what can I say, this thing works.
👍 2021-10-08
very useful
👍 2021-10-06
Very cool!
Suggestion: It would be great if it was possible to apply certain attributes only if nightmode is enabled. I know that during review all elements get an additional “nightMode”-class applied to them. Maybe something similar could be done here?
Update: Thanks a lot, this is great! 😍 Comment from author before post was edited Thanks for the suggestion! Night mode scoped styling via .nightMode class is now possible.
👍 2021-05-13
This is awesome!!! Would it be possible to expand this to be able to edit also editable.css and deckbrowser.css ?? Until now i edited editor, editable and deckbrowser manually from aqt_data folder but this way i have to do it all again every time i update anki
👍 2021-05-11
Exactly what I was looking for, thanks to the author !
