Muunna Markdown HTML:ksi reaaliajassa jaetulla näkymällä. Kirjoitat vasemmalle ja näet lopputuloksen oikealla — kätevä työkalu blogikirjoittajille ja kehittäjille.
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:
Testaa ja debuggaa säännöllisiä lausekkeita visuaalisella editorilla. Näe matchit reaaliajassa, ymmärrä regex-syntaksi ja tallenna hyödylliset patternit myöhempää käyttöä varten.
Muotoile, validoi ja vertaa JSON-dataa yhdessä näppärässä työkalussa. Korvaa usean erillisen verkkosivun tarpeen ja tekee API-kehityksestä sujuvampaa.
Värien muunnos eri formaattien välillä, palettien generointi ja WCAG-kontrastin tarkistus. Hyödyllinen työkalu suunnittelijoille ja frontend-kehittäjille.
Selaa kaikkia kehittäjätyökalut projekteja tai tutustu muihin kategorioihin.