Markdown — Magello styleguide

Syntax

Skriv så här, få det här

Alla Markdown-fält renderas till HTML i en <div class="mg-prose">. Bibliotekets .mg-prose formger allt.

Rubriker

Du skriver

## Rubrik 2

### Rubrik 3

Det blir

Rubrik 2 — avsnitt

Rubrik 3 — underavsnitt

# (rubrik 1) är sidans titel och skrivs inte i texten.

Text

Du skriver

Ett stycke med **fet**, *kursiv* och en [länk](https://magello.se).

Det blir

Ett stycke med fet, kursiv och en länk.

Brödtext 18 px. Länkar är magenta och understrukna.

Listor

Du skriver

- Punkt ett
- Punkt två

1. Första
2. Andra

Det blir

Punkt ett
Punkt två

Första
Andra

Numrerad lista när ordningen betyder något.

Citat

Du skriver

> Vi är generalister med spetskompetens.

Det blir

Vi är generalister med spetskompetens.

Blir automatiskt ett Magello-citat med citattecknet.

Tabell

Du skriver

| Område | Fokus |
|---|---|
| Cloud | Skalbarhet |
| Integration | Flöden |

Det blir

Område	Fokus
Cloud	Skalbarhet
Integration	Flöden

Rosa rubrikrad och bandning. Första kolumnen fet.

Luft

Du skriver

Första stycket.

---

Nästa avsnitt.

Det blir

Första stycket.

Nästa avsnitt.

--- ger extra luft, aldrig en linje.

Regler

Vad som inte ska stå i Markdown

Håll texten enkel. Det som ska se ut på ett särskilt sätt görs med komponenter, inte med syntax.

Gör

Rubrik 2 och 3, stycken, listor, citat och tabeller
Korta stycken, en tanke per stycke
Länka med beskrivande text, inte ”klicka här”

Gör inte

# Rubrik 1. Sidans titel är H1
Bilder i texten. Använd bildkomponenter så att de blir svartvita och polygonformade
Rå HTML eller färgade ord
Kodblock, om inte sajten är teknisk

Tänk på

Rendera med en standardparser (marked, markdown-it) med tabeller påslagna, html: false, och sanitera ändå
Sidor som visar Markdown använder typografiprofilen mg-type-editorial när de är artiklar

Strapi

I Strapi 5 är fälttypen richtext Markdown-editorn. Använd den för alla längre texter. Se avsnitt 36 i docs/design-guidelines-web.md för innehållsmodellen och syntaxen ovan som facit för utseendet.