anki-smiles-inline

An open-source Anki add-on proof-of-concept to render SMILES organic structures inline using SmilesDrawer. This is supposed to be custom markup parser that acts just like Anki's native [math]...[/math] or [$]...[/$] tags.

🧪 SmileAnki <sub style="font-size: 0.5em; opacity: 0.7;">(Proof of Concept)</sub>

An open-source prototype for an Anki Desktop add-on that renders organic chemistry 2D structures directly inline using SMILES strings (e.g., <code>[smileanki]c1ccccc1[/smileanki]</code>).

<blockquote> <strong>⚠️ Note to Developers:</strong><br> I have little to no programming background, and so this is created basically entirely with AI with only little input from me. Hence, I am releasing this <strong>100% open-source under the MIT License</strong>. Since I couldn't find something similar to suit my needs, I was forced to create it. It is not the best, due to my limited knowledge, and hence my aim was to plant a seed for others to water. Anyone is welcome to fork this, fix bugs, refine the code, but NOT to publish it directly to AnkiWeb. While this code is MIT licensed, please do not re-upload exact duplicates of this add-on to AnkiWeb. Submitting pull requests here ensures improvements reach all users without cluttering the AnkiWeb add-on directory with duplicate listings. </blockquote>

⚡ How It Works (Intended Design)

<ol> <li><strong>JS Injection:</strong> Injects the <code>SmilesDrawer</code> library directly into Anki's WebViews.</li> <li><strong>Tag Parsing:</strong> Scans card HTML for custom <code>[smileanki]SMILES_CODE[/smileanki]</code> tags.</li> <li><strong>Inline Rendering:</strong> Converts tags into vector 2D chemical structure SVGs seamlessly alongside standard text or <code>MathJax</code>/<code>mhchem</code> markup.</li> <li><strong>Editor Integration:</strong> Adds a quick <code>SMILES</code> wrapper button to the Anki note editor toolbar.</li> </ol>

🛠️ Tech Stack & Dependencies

📜 License

This project is licensed under the MIT License.