Test afbeeldingMDX Test met Aangepaste Componenten
MDX Test met Aangepaste Componenten
Dit is een inleidende tekst met behulp van de IntroText-component. Het moet worden opgemaakt met een blauwe linkerrand en juiste tussenruimte.
Standaard Markdown-functies
Dit is een gewone alinea met vetgedrukte tekst en cursieve tekst.
Lijsten
Hier is een opsommingslijst:
- Item 1
- Item 2
- Item 3
En een genummerde lijst:
- Eerste item
- Tweede item
- Derde item
Afbeeldingstest
Dit is een afbeelding:
De standaardgrootte van afbeeldingen is 'medium', maar je kunt afbeeldingen ook kleiner of groter maken:
Grootte 'full' bestaat ook, maar met de beperkte blog-weergave zal het hier dezelfde grootte tonen als 'large'.
Linkstest
Je kunt ook links in documenten plaatsen: 'Dit is een externe link'
Dit omvat ook links naar lokale pagina's (de landinstelling wordt automatisch toegevoegd) 'Dit is een interne link'
Blockquote-test
Hier is een blockquote met standaard Markdown-syntax:
Dit is een blockquote. Het moet worden opgemaakt met een blauwe linkerrand en juiste tussenruimte.
Het kan meerdere alinea's bevatten.
Het is ook mogelijk om mensen te citeren:
Dat wist ik nooit!
Mahatma Gandhi
AvatarQuote-test
Als we een testimonial hebben toegevoegd, kunnen we ook hun avatar aan het citaat toevoegen:
Tidal Control is de beste compliance-automatiseringstool die we ooit hebben gebouwd.
| Tidal
PhotoQuote-test
We kunnen ook een foto aan het citaat toevoegen, zolang deze in het afbeeldingenregister staat:
Een kleine stap voor de mens. Een reuzenstap voor de mensheid.
Callout-componenttest
Dit is een informatieve callout-component. Het moet een blauwe opmaak hebben.
Dit is een waarschuwings-callout-component. Het moet een gele opmaak hebben.
Dit is een fout-callout-component. Het moet een rode opmaak hebben.
Docusaurus-waarschuwingen!
Deze pagina laat zien hoe u Docusaurus-stijl callouts in uw MDX-inhoud kunt gebruiken.
::: note Dit is een eenvoudige note callout. :::
::: tip Mijn aangepaste tiptitel Hier is een handige tip met een aangepaste titel!
U kunt meerdere alinea's en andere markdown-elementen erin opnemen.
- Like-lijsten
- Met meerdere items :::
::: info Hier is wat belangrijke informatie. :::
::: caution Wees voorzichtig wanneer u dit doet. :::
::: warning Dit is een waarschuwingsbericht. :::
::: danger Deze bewerking is gevaarlijk en niet omkeerbaar! :::
Native JSX Admonitions (Geen Plugin Nodig!)
De ::: syntax hierboven vereist de remark-docusaurus-admonitions plugin om het naar JSX te converteren.
Maar MDX ondersteunt native JSX componenten, dus je kunt de Admonition component direct gebruiken:
Dit gebruikt native JSX syntax - geen plugin nodig! MDX ondersteunt dit uit de doos.
Dit is een tip met native JSX syntax. Veel schoner en explicieter!
Dit is een waarschuwing met native JSX syntax.
Dit is een danger admonition. Perfect voor het benadrukken van destructieve acties.
Dit is een info admonition met de Tidal blauwe kleur.
Dit is een caution admonition in geel.
Zonder aangepaste titel
Deze notitie heeft geen aangepaste titel - het gebruikt de standaard "Note" titel uit de vertalingen.
Standaard "Tip" titel wordt hier gebruikt.
Met Complexe Inhoud
Je kunt markdown opmaak, links, en zelfs lijsten toevoegen:
- Eerste item met vetgedrukte tekst
- Tweede item met cursieve tekst
- Derde item met
inline code
En code blocks:
const voorbeeld = "Dit is code binnen een admonition";
console.log(voorbeeld);
En zelfs geneste opmaak en interne links.
Vergelijking: Oude vs Nieuwe Syntax
Oude Manier (vereist plugin):
:::note Belangrijk
Inhoud hier
:::
Nieuwe Manier (native MDX):
<Admonition type="note" title="Belangrijk">
Inhoud hier
</Admonition>
Voordelen van JSX syntax:
- ✅ Geen plugin nodig - verwijder
remark-docusaurus-admonitions.mjs - ✅ Betere IDE ondersteuning (autocomplete, type checking)
- ✅ Meer expliciet en makkelijker te debuggen
- ✅ Standaard MDX aanpak
Codeblokken
Hier is een codeblok:
function greeting(name) {
return `Hello, ${name}!`;
}
console.log(greeting('World'));