{"id":48435149,"url":"https://github.com/stared/equations-explained-colorfully","last_synced_at":"2026-04-06T12:30:26.045Z","repository":{"id":322259606,"uuid":"1088719188","full_name":"stared/equations-explained-colorfully","owner":"stared","description":"KaTeX + coloring + interactivity to make equations explained well (prototype)","archived":false,"fork":false,"pushed_at":"2025-12-31T20:12:39.000Z","size":1009,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-01-05T07:23:14.693Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://p.migdal.pl/equations-explained-colorfully/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stared.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-03T11:11:49.000Z","updated_at":"2026-01-01T18:28:53.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/stared/equations-explained-colorfully","commit_stats":null,"previous_names":["stared/equations-explained-colorfully"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stared/equations-explained-colorfully","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stared%2Fequations-explained-colorfully","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stared%2Fequations-explained-colorfully/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stared%2Fequations-explained-colorfully/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stared%2Fequations-explained-colorfully/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stared","download_url":"https://codeload.github.com/stared/equations-explained-colorfully/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stared%2Fequations-explained-colorfully/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31473271,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-06T08:36:52.050Z","status":"ssl_error","status_checked_at":"2026-04-06T08:36:51.267Z","response_time":112,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-06T12:30:24.871Z","updated_at":"2026-04-06T12:30:26.037Z","avatar_url":"https://github.com/stared.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Equations Explained Colorfully\n\nA minimal framework for creating interactive mathematical explanations with colored, annotated equations.\n\n**Demo:** [https://p.migdal.pl/equations-explained-colorfully/](https://p.migdal.pl/equations-explained-colorfully/)\n\n![](public/social-media-preview.png)\n\n**Inspired by:**\n\n- [Explorable explanations and science-based games](https://p.migdal.pl/blog/2024/05/science-games-explorable-explanations/)\n- [BetterExplained's colorized equations](https://betterexplained.com/articles/colorized-math-equations/)\n- [Stuart Riffle's color-coded Fourier transform](https://web.archive.org/web/20130318211259/http://www.altdevblogaday.com/2011/05/17/understanding-the-fourier-transform)\n\nI am grateful to [Amit Patel (Red Blob Games)](https://www.redblobgames.com/) for valuable feedback on an early draft.\n\n## Features\n\n- **Markdown-based**: Write equations in simple markdown format\n- **Interactive**: Hover over colored terms to see definitions\n- **Accessible**: Multiple color schemes including color-blind friendly options\n- **Minimal**: Built with Vue 3, KaTeX, CodeJar, and Prism\n- **Export**: Generate standalone HTML, LaTeX, Beamer, or Typst output\n- **Editable**: Real-time editor for creating and modifying equations\n\n## Content Format\n\nCreate a markdown file with three sections:\n\n### 1. Equation (LaTeX with annotations)\n\nUse `\\mark[classname]{formula}` to annotate terms:\n\n```latex\n$$\n\\mark[imaginary]{i}\\mark[planck]{\\hbar}\\mark[timederiv]{\\frac{\\partial\\psi}{\\partial t}} = ...\n$$\n```\n\n### 2. Description (Markdown with term references)\n\nUse `[text]{.classname}` to reference terms with the same color:\n\n```markdown\n## Description\n\nMultiply the [imaginary unit]{.imaginary} by [Planck constant]{.planck}...\n```\n\n### 3. Definitions (Heading-based)\n\nUse `## .classname` headings for detailed explanations:\n\n```markdown\n## .imaginary\n\nIndicates the quantum nature of the equation and ensures unitary time evolution.\n\nThe imaginary unit $i$ is fundamental to quantum mechanics.\n\n## .planck\n\nFundamental constant connecting energy and frequency.\n\n**Value:** $\\hbar \\approx 1.055 \\times 10^{-34}$ J·s\n```\n\n## How It Works\n\n1. **Parse** markdown: Convert `\\mark[label]{content}` to `\\htmlClass{term-label}{content}` for KaTeX\n2. **Render** equation using KaTeX, description and definitions as HTML\n3. **Color** terms based on order of appearance in equation (first term → first color, etc.)\n4. **Interact**: Hover over colored terms to see definitions, click to lock\n\n**Color schemes available:** Vibrant (default), Accessible (Wong palette), High Contrast, No Color\n\n## Examples\n\nSee `src/examples/` for complete examples:\n\n- `new.md` - Simple starter template (E = mc²)\n- `schrodinger.md` - Schrödinger equation\n- `maxwell.md` - Maxwell's equations\n- `navier-stokes.md` - Navier-Stokes equation\n- `euler.md` - Euler's identity\n\n## Usage\n\n```bash\n# Install dependencies\npnpm install\n\n# Run dev server\npnpm dev\n\n# Build for production\npnpm build\n```\n\n## Creating New Equations\n\n1. Create a markdown file in `src/examples/` (e.g., `my-equation.md`)\n2. Use the in-browser editor to refine your equation interactively\n\n## Key Files\n\n```\nsrc/examples/            # Equation markdown files\n  └── *.md               # Individual equation files\nsrc/\n  ├── main.ts            # Vue app entry point\n  ├── App.vue            # Main app layout with three-panel design\n  ├── components/\n  │   ├── CentralPanel.vue       # Equation display with hover interactions\n  │   ├── MarkdownEditor.vue     # CodeJar editor with Prism highlighting\n  │   ├── controls/              # EquationSelector, ColorSchemeSwitcher, ExportControls\n  │   └── equation/              # EquationDisplay, DescriptionPanel, DefinitionPopup\n  ├── export/            # Export formats (HTML, LaTeX, Beamer, Typst)\n  └── utils/             # parser.ts, colorSchemes.ts, termDom.ts\n```\n\n## Author\n\nCreated by [Piotr Migdał](https://p.migdal.pl)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstared%2Fequations-explained-colorfully","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstared%2Fequations-explained-colorfully","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstared%2Fequations-explained-colorfully/lists"}