Muunna Markdown HTML:ksi reaaliajassa.
Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.
Luo Markdown-editori reaaliaikaisella esikatselulla. Layout: - Split view: editor vasemmalla, preview oikealla - Työkalupalkki ylhäällä (bold, italic, jne.) - Footer (merkkilaskuri, sanamonist) Ominaisuudet: - Reaaliaikainen MD -> HTML muunnos - Syntaksikorostus koodiblokeille - Kopioi HTML -nappi - Kopioi Markdown -nappi - Tyhjennä -nappi - Vaalea/tumma teema Tech: - Next.js - TypeScript - Tailwind CSS - marked (MD parser) - highlight.js (koodikorostus) Tee siisti, moderni developer tool -tyylinen UI.
Tässä projektissa rakennetaan seuraavat ominaisuudet:
Luo editor ja esikatselu vierekkäin.
Luo Markdown-editori split-näkymällä: vasemmalla tekstialue Markdownille, oikealla renderöity HTML-esikatselu. Käytä marked-kirjastoa muunnokseen.
Lisää koodin korostus.
Lisää syntaksikorostus koodiblokeille käyttäen highlight.js tai prism-kirjastoa. Tee korostus sekä editoriin että esikatseluun.
Lisää Markdown-pikakomennot.
Luo työkalupalkki editorin yläpuolelle: bold, italic, linkki, kuva, lista, otsikot. Napit lisäävät Markdown-syntaksin tekstiin kursorin kohdalle.
Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:
Selaa kaikkia kehittäjätyökalut projekteja tai tutustu muihin kategorioihin.