📝
Gratis Markdown-redigerare
Skriv och förhandsgranska Markdown i realtid. Stöder rubriker, fetstil, kursiv stil, kodblock, tabeller och listor.
Fungerar offline när den väl lästs in
81 ord · 544 tecken
Markdown
Förhandsvisning
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Välkommen till Markdown-redigeraren</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Skriv <strong>Markdown</strong> till vänster, se liveförhandsvisningen till höger.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Funktioner</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>Fet</strong>, <em>kursiv</em> och <del>genomstruken</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">Inline-kod</code> och omslutna kodblock</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">Länkar</a></li><li class="my-0.5">Listor, citat, tabeller och mer</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Kodexempel</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 skapades av John Gruber 2004 för att göra webskrivning enklare.</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">Funktion</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">Stöds</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Rubriker</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">Listor</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">Tabeller</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">Kod</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown-referens
# Heading 1H1
**bold**Fet
*italic*Kursiv
`code`Inline-kod
- itemPunktlista
1. itemNumrerad lista
> quoteBlockcitat
[text](url)Länk
Bild
---Avdelare
Vanliga användningar
- Skriv API-dokumentation i MarkdownUtkast slutpunktsbeskrivningar, begära/svara exempel och parametertabeller i Markdown.
- Ta Markdown-anteckningarSkriv strukturerade anteckningar i Markdown som kan klistras in i Notion, Obsidian, Bear eller någon Markdown-app.
- Skriv en GitHub README i MarkdownSkapa och förhandsgranska din GitHub-arkivs README med direkt Markdown-rendering.
- Skriv teknisk dokumentationSkriv och förhandsgranska API-dokument, wikier och tekniska guider i Markdown innan publicering.
- Skriv blogginlägg i MarkdownSkapa blogginlägg i Markdown för Ghost, Jekyll, Hugo, Hashnode och andra Markdown-baserade publiceringsplattformar.
Så här fungerar det
Förhandsvisningen renderas av en handskriven Markdown-tolk inbyggd direkt i verktyget — inget marked, inget remark, inget externt bibliotek. Den tokeniserar källan rad för rad i webbläsaren, och omvandlar syntax till HTML som sedan skickas genom en sanerare före visning.
- 1Rad-för-rad-tokeniseringDen anpassade renderMarkdown-funktionen delar upp din källa på radbrytningar och går igenom dem i en enda genomgång, och matchar inramade kodblock, rubriker (H1–H6), citatblock, numrerade och punktade listor, GFM-tabeller (med kolumnjustering), horisontella linjer och stycken i prioritetsordning.
- 2Inline-syntaxexpansionVarje insamlad rad eller cell bearbetas sedan av inlineMarkdown, en kedja av regex-ersättningar som hanterar fet (** och __), kursiv (* och _), fet-kursiv (***), genomstruken (~~), infogad kod (), bilder () och länkar ([text](url)) — bilder löses upp innan länkar så att !-prefixet inte konsumeras felaktigt.
- 3Sanering och blockering av fjärrresurserDen råa HTML som skapas av renderaren skickas genom en sanerare (sanitize-html) för att ta bort osäkra taggar och attribut som <script>, onerror-hanterare och javascript:-hreferenser. Ett andra steg (neutralizeRemote) ersätter fjärrbilders src-värden med platshållare som standard, vilket förhindrar att förhandsvisningen tyst kontaktar externa servrar innan du väljer att aktivera det.
- 4Exportera som .md eller fristående .htmlAtt kopiera eller ladda ned Markdown skriver ut den råa källtexten. Att ladda ned HTML omsluter den sanerade utdatan i ett fristående dokument med sin egen infogade formatmall — Tailwind-klasser fungerar bara inuti webbplatsen, så exporten paketerar vanliga CSS-regler i stället, vilket gör filen läsbar var som helst.
Relaterade verktyg
HTML till Markdown-konverterare
Konvertera HTML till ren Markdown. Hanterar rubriker, listor, länkar, bilder, kodblock, tabeller och blockcitat. Perfekt för att flytta innehåll ut ur CMS:er.
Prova det
Markdown till HTML-konverterare
Konvertera Markdown till ren HTML med liveförhandsvisning. Använd källvyn för att kopiera färdig HTML för bloggar, CMS:er eller e-postmallar.
Prova det
Mermaid-diagramredigerare
Skriv flödesscheman, sekvensdiagram, Gantt-diagram och mer i Mermaid-syntax med liveförhandsvisning. Exportera som SVG eller PNG. Körs helt i din webbläsare.
Prova det