Meer opmaak-mogelijkheden

Behalve de al genoemde opmaakmogelijkheden met Markdown zijn er nog vele andere. Sommige hebben extra plugins nodig, andere niet. Wat je wel moet doen is in de Configuratie de instelling van Markdown aanpassen en Markdown extra op Yes zetten:

Markdown extra

Dit geeft je onder andere de mogelijkheid om Markdown te gebruiken binnen HTML tags, bijvoorbeeld:

<div markdown="1">
Dit is *echte* markdown tekst.
</div>

We kunnen nu ook als volgt tabellen maken:

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

Dit ziet er dan, afhankelijk van stijlregels, bijvoorbeeld zo uit:

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

In feite hoe je niet eens de de eerste en laatste strepen te zetten, maar ik vind het er toch beter uitzien.

We kunnen nu ook attributen toevoegen aan bijvoorbeeld afbeeldingen. Stel er is de volgende stijlregel ingesteld:

.float-left {float:left;margin-right:20px}

Een afbeelding die voorzien is van deze class zou links in de tekst geplaatst worden, waarbij de tekst om het beeld loopt en aan de rechter-kant van de afbeelding komt een ruimte van 20 pixels om de tekst op afstand te houden. Om dit voor elkaar te krijgen zou je de Markdown van de afbeelding als volgt kunnen uitbreiden:

![afbeelding met tekstomloop](plaatje.jpg?class=float-left)

Tekstomloop

Zie verder hier de mogelijkheden van Markdown Extra.

Werken met Shortcode

Met behulp van de Shortcode plugins kunnen we nog meer mogelijkheden gebruiken, zoals Tabs en Accordions. Hiermee kunnen we op een overzichtelijke manier veel meer gegevens kwijt in een relatief kleine ruimte op de pagina. De HTML en stijling van deze containers is behoorlijk ingewikkeld, maar door het gebruik van Shortcode een fluitje van een cent.

De plugins moeten dus eerst geïnstalleerd worden. Dit gaat als volgt:
Klik in de Admin links in het menu op Plugins. Je ziet dan de plugins die op dit moment geïnstalleerd zijn. Bovenin kun je klikken op de knop +Add.

Plugins

Er gaat een hele lijst open van plugins die geïnstalleerd kunnen worden. Zoek in de lijst naar de plugin Shortcode Core en klik op +Install (mocht je deze plugin niet zien staan, dan is ze waarschijnlijk al geïnstalleerd). De plugin zal geïnstalleerd worden. Klik terug op de knop +Add en installeer de plugin Shortcode UI.

Hieronder een paar voorbeelden.

Tabs

Tabs maak je zo:

en dan ziet dat er zo uit:

In tempor sed sapien eu porttitor. Aliquam cursus facilisis ante. Etiam neque nunc, blandit vel lacus et, faucibus accumsan lacus. Proin posuere varius purus quis faucibus. Quisque et enim vitae orci placerat tincidunt id ac eros. Fusce et gravida libero.

Phasellus cursus odio ex, in mattis lorem tincidunt vel. Donec nibh odio, dapibus non ligula a, semper ornare massa. Nulla consectetur eu nunc sed ultrices. Integer at turpis dolor.

Er zijn drie verschillende thema's die gekozen kunnen worden: default, lite en badges.

Accordion

Op dezelfde manier kan ook een accordion gemaakt worden:

En dat ziet er zo uit:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu porttitor augue. Etiam dignissim nisl ut molestie consequat. Maecenas luctus pretium metus, et aliquam est pretium vel. Nullam interdum ipsum sed sagittis dictum. Suspendisse potenti. Nunc non tortor gravida, tempus ipsum non, efficitur eros. Donec lorem urna, ultricies in metus ac, sagittis mollis mi. Vestibulum at ullamcorper magna, nec mollis massa. Proin varius egestas felis eu accumsan.

Maecenas a velit feugiat, pulvinar libero sit amet, fermentum tellus. Fusce gravida interdum arcu, non congue turpis mollis id. Aenean laoreet arcu id euismod suscipit. Nam eget aliquam sapien. Fusce ut viverra ipsum. Mauris tincidunt erat et nunc porta, id dictum mauris ornare.

Nulla vehicula lacus id neque convallis, at tempor sapien pellentesque. Ut lacinia eros condimentum felis tincidunt, in dictum sapien dapibus. Sed pretium arcu vel luctus dictum. Donec vitae suscipit ex. Vivamus lorem ante, posuere eu elit quis, suscipit imperdiet diam. Praesent blandit rutrum lorem interdum dictum. Mauris ultrices rhoncus erat vitae facilisis.

Voor meer mogelijkheden zie hier.