Hopp til hovedinnhold
LibraTool logoLibraTool

Gratis Markdown-redigerer

Skriv og forhåndsvis Markdown i sanntid. Støtter overskrifter, fet, kursiv, kodeblokker, tabeller og lister.

Fungerer uten nett når den er lastet
85 ord · 563 tegn
Markdown
Forhåndsvisning
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Velkommen til Markdown-editoren</h2> <p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Skriv <strong>Markdown</strong> på venstre side, se direktevisningen på høyre side.</p> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Funksjoner</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> og <del>gjennomstreking</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-kode</code> og avgrensede kodeblokker</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">Lenker</a></li><li class="my-0.5">Lister, sitater, tabeller og mer</li></ul> <h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Kodeeksempel</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 ble opprettet av John Gruber i 2004 for å gjøre webskriving enklere.</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">Funksjon</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øttet</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Overskrifter</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">Lister</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">Kode</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown-oversikt
# Heading 1H1
**bold**Fet
*italic*Kursiv
`code`Inline-kode
- itemPunktliste
1. itemNummerert liste
> quoteBlokksitat
[text](url)Lenke
![alt](url)Bilde
---Skillelinje

Vanlige bruksområder

  • Skriv API-dokumentasjon i MarkdownUtkast endepunktsbeskrivelser, forespørsel/svar-eksempler og parametertabeller i Markdown.
  • Ta Markdown-notaterSkriv strukturerte notater i Markdown som kan limes inn i Notion, Obsidian, Bear eller enhver Markdown-app.
  • Skriv en GitHub README i MarkdownKladd og forhåndsvis GitHub-lagrets README med live Markdown-gjengivelse.
  • Skriv teknisk dokumentasjonSkriv og forhåndsvis API-dokumenter, wikier og tekniske veiledninger i Markdown før publisering.
  • Skriv blogginnlegg i MarkdownKladd blogginnlegg i Markdown for Ghost, Jekyll, Hugo, Hashnode og andre Markdown-baserte publiseringsplattformer.

Hvordan det fungerer

Forhåndsvisningen gjengis av en håndskrevet Markdown-tolker bygget direkte inn i verktøyet — ingen marked, ingen remark, intet eksternt bibliotek. Den tokeniserer kilden linje for linje i nettleseren og gjør syntaksen om til HTML, som deretter går gjennom en renser før visning.

  1. 1
    Tokenisering linje for linje
    Den egne renderMarkdown-funksjonen deler kilden på linjeskift og går gjennom dem i én runde, og gjenkjenner kodeblokker, overskrifter (H1–H6), sitatblokker, nummererte og unummererte lister, GFM-tabeller (med kolonnejustering), horisontale linjer og avsnitt i prioritert rekkefølge.
  2. 2
    Utvidelse av inline-syntaks
    Hver innsamlet linje eller celle behandles deretter av inlineMarkdown, en kjede av regex-erstatninger som håndterer fet (** og __), kursiv (* og _), fet kursiv (***), gjennomstreking (~~), inline-kode (), bilder (![alt](url)) og lenker ([tekst](url)) — bilder løses før lenker, så !-prefikset ikke brukes opp feil.
  3. 3
    Rensing og blokkering av eksterne ressurser
    Den rå HTML-en fra gjengiveren sendes gjennom en renser (sanitize-html) som fjerner usikre tagger og attributter som <script>, onerror-behandlere og javascript:-lenker. En ny runde (neutralizeRemote) erstatter eksterne bildekilder med plassholdere som standard, så forhåndsvisningen ikke i det stille kontakter eksterne servere før du har sagt ja.
  4. 4
    Eksporter som .md eller frittstående .html
    Kopiering eller nedlasting av Markdown skriver den rå kildeteksten. Nedlasting av HTML pakker det rensede resultatet inn i et selvstendig dokument med eget inline-stilark — Tailwind-klasser virker bare på nettstedet, så eksporten har vanlige CSS-regler i stedet, og filen kan leses hvor som helst.

Relaterte verktøy

Ofte stilte spørsmål