📝
Editor de Markdown de franc
Escriu i previsualitza Markdown en temps real. Admet encapçalaments, negreta, cursiva, blocs de codi, taules i llistes.
Funciona sense connexió un cop carregat
100 paraules · 588 caràcters
Markdown
Previsualització
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Benvingut a l'Editor de Markdown</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Escriviu <strong>Markdown</strong> a l'esquerra, veieu la vista prèvia en viu a la dreta.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Característiques</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>Negreta</strong>, <em>cursiva</em>, i <del>ratllat</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">Codi en línia</code> i blocs de codi</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">Enllaços</a></li><li class="my-0.5">Llistes, cites de bloc, taules i més</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Exemple de codi</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown va ser creat per John Gruber el 2004 per facilitar l'escriptura per a la web.</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Característica</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Admès</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Encapçalaments</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Llistes</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Taules</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Codi</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Referència ràpida de Markdown
# Heading 1H1
**bold**Negreta
*italic*Cursiva
`code`Codi en línia
- itemLlista de vinyetes
1. itemLlista numerada
> quoteBloc de cita
[text](url)Enllaç
Imatge
---Divisor
Usos habituals
- Escriviu documentació API en MarkdownDibuixeu descripcions de punts finals, exemples de sol·licitud/resposta i taules de paràmetres en Markdown.
- Preneu notes de MarkdownEscriviu notes estructurades en Markdown que es puguin enganxar a Notion, Obsidian, Bear o qualsevol aplicació de Markdown.
- Escriu un GitHub README en MarkdownRedacta i visualitza el teu GitHub repository README amb renderització en viu de Markdown.
- Escriu documentació tècnicaEscriu i visualitza documentació de l'API, wikis i guies tècniques en Markdown abans de publicar.
- Escriu publicacions de blog en MarkdownRedacta publicacions de blog en Markdown per a Ghost, Jekyll, Hugo, Hashnode i altres plataformes de publicació basades en Markdown.
Com funciona
La previsualització la renderitza un analitzador de Markdown escrit a mà integrat directament a l'eina — sense marked, sense remark, sense biblioteca externa. Tokenitza la font línia per línia al navegador, convertint la sintaxi a HTML que després passa per un sanejador abans de mostrar-se.
- 1Tokenització línia per líniaLa funció personalitzada renderMarkdown divideix la teva font per salts de línia i les recorre en un sol pas, coincidint blocs de codi delimitats, encapçalaments (H1–H6), citacions, llistes ordenades i no ordenades, taules GFM (amb alineació de columnes), regles horitzontals, i paràgrafs en ordre de prioritat.
- 2Expansió de sintaxi en líniaCada línia o cel·la recollida es processa després per inlineMarkdown, una cadena de reemplaçaments d'expressió regular que gestiona negreta (** i __), cursiva (* i _), negreta-cursiva (***), ratllat (~~), codi en línia, imatges (), i enllaços ([text](url)) — les imatges es resolen abans que els enllaços perquè el prefix ! no es consumeixi incorrectament.
- 3Sanejament i bloqueig de recursos remotsL'HTML brut produït pel renderitzador es passa per un sanejador (sanitize-html) per eliminar etiquetes i atributs insegurs com <script>, gestors onerror, i hrefs javascript:. Una segona passada (neutralizeRemote) reemplaça els valors src d'imatges remotes per marcadors de posició per defecte, evitant que la previsualització truqui silenciosament a servidors externs abans que hi optis.
- 4Exporta com a .md o .html autònomCopiar o descarregar Markdown escriu el text font en brut. Descarregar HTML embolica la sortida sanejada en un document autocontingut amb el seu propi full d'estil en línia — les classes de Tailwind només funcionen dins del lloc, així que l'exportació inclou regles CSS planes en canvi, fent el fitxer llegible a qualsevol lloc.
Eines relacionades
Convertidor d'HTML a Markdown
Converteix HTML a Markdown net. Gestiona encapçalaments, llistes, enllaços, imatges, blocs de codi, taules i cites. Perfecte per moure contingut fora de CMSes.
Prova-ho
Convertidor de Markdown a HTML
Converteix Markdown a HTML net amb previsualització en viu. Usa la vista de codi font per copiar HTML llest per enganxar en blocs, CMSes o plantilles de correu.
Prova-ho
Editor de diagrames Mermaid
Escriu diagrames de flux, diagrames de seqüència, diagrames de Gantt i més en sintaxi Mermaid amb previsualització en viu. Exporta com a SVG o PNG. S'executa completament al teu navegador.
Prova-ho