Anki add-on: Anki-Coder

A powerful, integrated code editor for Anki that brings beautiful syntax highlighting and a rich editing experience directly into your flashcards. After configuring and syncing the code snippets are also highlighted on mobile devices, it also works with cloze cards as well. NEW NEW NEW This addon didn't get mutch love from me lately. But now as I am advancing in university I have to learn several other languages, and I noticed that this didnt work. So now users can select the languages they want to learn themselfs. ✨ Features Vim navigation: press Esc to enter the vim console. Rich Syntax Highlighting: Supports a wide variety of languages out of the box. Theme Support: Easily switch between popular code editor themes. Live In-Editor Preview: See your formatted code directly within the Anki editor. Seamless Editing: Simply double-click any code block to open it for modifications. Easy Configuration: A simple dialog to manage which note types use the editor. Highly Customizable: Directly edit the CSS files to fine-tune the appearance. ⚠️ Important: Before You Start If you have used other code syntax highlighting add-ons in the past, they may have modified your note types in a way that can conflict with this add-on. For the best experience, it is highly recommended to: Deactivate any previous code highlighting add-ons. Create a fresh, new note type for your code cards (e.g., by cloning the basic type and naming it "Basic - CodeMirror"). 🚀 Recommended Note Types To get started immediately with note types that are perfectly adapted for this editor, you can download a pre-configured Anki package. These note types are optimized for both desktop and mobile viewing. (As I just uploaded these note types they available tomorrow.) Download Recommended Note Types Here ✍️ How to Use Click the </> button in the editor toolbar to open the CodeMirror dialog. Select your language, write your code, and click Insert Code. To edit an existing block, simply double-click on it in the editor. ⚙️ Configuration To configure the add-on, go to Tools > CodeMirror Configuration.... Here you can: (new) Enter the languages which you want to use. Important: watch for spelling (see) https://codemirror.net/5/mode/index.html Select which of your Note Types the editor should be active on. Choose a global theme for all your code blocks. 🎨 Advanced Customization For more direct control, got to: tools, addons, anki-coder and click the configure button. This will open the styles folder in your system's file explorer. Inside this folder, you can edit the CSS files to change properties like font-size , font-family , and colors to perfectly match your preferences. 🤝 Perfect Synergy For an even more powerful workflow, I highly recommend using this add-on alongside my Automatic Cloze add-on. You can use CodeMirror to create a beautifully formatted code block, and then use Automatic Cloze which automatically converts the basic to a cloze card so you dont need to manually switch to a cloze card template. It's the perfect combination for quickly creating high-quality programming flashcards. Get Automatic Cloze Here ❤️ Contributing Contributions, issues, and feature requests are welcome! Feel free to check the issues page or submit a pull request. View Project on GitHub 📄 License & Credits This add-on is built upon the fantastic CodeMirror library and is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License.

GitHub repository: liwoe/anki-codemirror
Repository description: Implements a code editor into anki.
Languages: Python, JavaScript, CSS, HTML