👾 use flashcard agent to create highlight.js classes on <code> tags

Author: jaka-k

backend/statemachine/agents/flashcards/templates.py

@@ -19,7 +19,7 @@
 1. **Front**: `<h3>{{concept}}</h3>`
 2. **Back** layout (all HTML, no Markdown):
    • definition  → `<div class="definition">…</div>`, can be slightly formatted with html tags if applicable, otherwise use as is
-   • example     → if exists wrap in `<pre><code class="hljs">…</code></pre>`
+   • example     → if exists wrap in `<pre><code class="hljs (detect language from snippet and add highlight.js class of that langauge, example: language-go)">…</code></pre>`
    • anti-pattern→ if exists wrap in `<div class="anti">️…</div>`
    • contrast    → if exists wrap in `<div class="contrast">(can use emojis at the beginning like ☣,⚠, or similar)…</div>`
    • source    → if exists wrap in `<div class="source">(can use emojis at the beginning like ☯,🔀 or similar ️)…</div>`

frontend/src/app/layout.tsx

@@ -1,4 +1,7 @@
 import './globals.css'
+// TODO: handle locally
+// eslint-disable-next-line import/no-unresolved
+import 'highlight.js/styles/nnfx-light.css'
 
 import { Toaster } from '@components/ui/toaster'
 import type { Metadata } from 'next'

frontend/src/components/containers/chat.tsx

@@ -1,8 +1,6 @@
 'use client'
 
-// TODO: handle locally
-// eslint-disable-next-line import/no-unresolved
-import 'highlight.js/styles/nnfx-light.css'
+
 
 import { Button } from '@components/ui/button'
 import { logger } from '@lib/logger.ts'