Muunna Markdown HTML:ksi reaaliajassa jaetulla näkymällä. Kirjoitat vasemmalle ja näet lopputuloksen oikealla - kätevä työkalu blogikirjoittajille ja kehittäjille.
Aloittelija · 2-3 tuntia · Next.js, TypeScript, Tailwind CSS, Marked
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
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.
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.
Reaaliaikainen muunnos
Syntaksikorostus
Kopioi HTML
Teeman vaihto
Tallenna/lataa
Kun perusprojekti on valmis:
Tallenna pilvipalveluun
Jaa linkillä
PDF-export
Taulukko-editori
Mermaid-kaaviot
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.
Valitse työkalu ja käytä aloituspromptiä.