Een uitgebreide gids voor Markdown en wat tips die je misschien nog niet wist.
Markdown is een versimpelde manier om tekst te formatteren, zonder kennis van HTML.
Het heeft echter een aantal tekortkomingen, waardoor kennis van HTML noodzakelijk is om tot een mooie lay-out te komen.
De Steemit Markdown editor is niet echt sterk, daarom heb ik deze cheat-sheet gemaakt, met een aantal trucs die je misschien nog niet kent.
N.B. er zijn zogenaamde Markdown Editors, die het wat makkelijker maken. Helaas kan het gebeuren dat wat in de editor er goed uitziet, in Steemit niet net zo werkt. Voor lange teksten gebruik ik Markdownpad 2, maar met name om te voorkomen dat mijn tekst weg is als er onverwacht een storing optreedt.
HEADERS
Ik raadt je aan om headers te gebruiken, zeker als de tekst lang(er) wordt.
Dit maakt het lezen van een artikel een stuk makkelijker
Dit maakt het lezen van een artikel een stuk makkelijker
Omsc | HTML | Resultaat | Markdown | Resultaat |
---|---|---|---|---|
Header 1 | <h1>header 1</h1> | header 1 | # header 1 | header 1 |
Header 2 | <h2>header 2</h2> | header 2 | ## header 2 | header 2 |
Header 3 | <h3>header 3</h3> | header 3 | ### header 3 | header 3 |
Header 4 | <h4>header 4</h4> | header 4 | #### header 4 | header 4 |
Header 5 | <h5>header 5</h5> | header 5 | ##### header 5 | header 5 |
Header 6 | <h6>header 6</h6> | header 6 | ###### header 6 | header 6 |
Zonder deze spatie wordt de header tekst beschouwd als een tag!!
En hiervan mag je er slechts totaal 5 hebben.
TEKST FORMATTEREN
Oms | HTML | Resultaat | Markdown | Resultaat |
---|---|---|---|---|
Bold | <b>Bold</b> | Bold | **Bold** | Bold |
Italic | <i>Italic</i> | Italic | *Italic* | Italic |
Bold & Italic | <b><i>Bold&Italic</i></b> | Bold & Italic | ***Bold&Italic*** | Bold&Italic |
Bold & Italic | <b>Bold</b>&<i>Italic</i> | Bold & Italic | **Bold**&*Italic* | Bold&Italic |
Small print | <sup>Small print</sup> | Small print | Geen alternatief | Gebruik HTML |
Strikethrough | <del>Strikethrough</del> | ~~Strikethrough~~ |
LIJNEN
Een lijn kan worden gemaakt door --- of *** met een spatie ervoor en erachter toe te voegen.
LIJSTEN
Ongenummerde lijsten maak je door
* lijstitem 1
* lijstitem 2
* subitem 1 - zie de extra spatie aan het begin
* subitem 2
Let op de spatie tussen * en de tekst!*
Resultaat:
- lijstitem 1
- lijstitem 2
- subitem 1
- subitem 2
Het is mogelijk meerdere regels te hebben in een lijst-item.
Deze regels worden dan onderdeel van dit item.
Genummerde lijsten:
- Eerste genummerde lijst item - Let op de . na het nummer
- Het volgende item. De nummering is automatisch, ik heb alle items nummer 1 gegeven.
1 Sub-lijst. Let op, GEEN . na het nummer
2 Sub item 2 - Zoals gezegd maakt het niet uit welke nummers je gebruikt, deze heb ik nummer 888 gegeven.
- En een ander item,
met meerdere regels.
Om te zorgen dat een regel geen onderdeel is van een lijst-item moet je deze een extra line-break geven door enter of <br />.
PLAATJES
Het goed toepassen van plaatjes in een artikel wordt nog vaak onderschat. Je kunt een plaatje links, midden of rechts centreren en zelfs de grootte aanpassen.
De standaard manieren om een plaatje toe te voegen zijn; drag/drop een plaatje van je pc in de editor, kopieer een plaatje naar het clipboard (ctrl/c) en plaats in de editor (ctrl/v) of kies "selecting them" onder het editor veld.
Al deze manieren werken hetzelfde, het plaatje wordt gekopieerd naar Steemit (eigenlijk Steemitimages.com) en wordt direct in de editor geplaatst.
Let op; als een plaatje wordt gekopieerd en je gaat met de cursor naar een andere plaats in de tekst, dan wordt het plaatje daar geplaatst, niet waar de cursor was toe je begon met kopieren!!
Echter, er zijn nogal wat beperkingen met deze methodes
Een plaatje wat op deze manieren is gekopieerd kan niet worden geschaald.
Schalen doe je door https://steemitimages.com/[width]x[height]/
voor de URI van het plaatje toe te voegen.
Hier een gekopieerd plaatje op Steemitimages.com;
Hier de geschaalde versie, met de Steemitimages.com functie, maar met de originele URI:
https://steemitimages.com/0x100/https://cdn.pixabay.com/photo/2016/05/28/13/04/iceberg-1421411_960_720.jpg
En hier hetzelfde, maar dan vanaf Steemitimages.com;
https://steemitimages.com/0x100/https://steemitimages.com/DQmZjp699K4iHsykYwFuoW6UAksqod7MHmjZgQocGhY6Fdi/iceberg-1421411_960_720.jpg
Zoals je ziet wordt de laatste niet geschaald. De beste oplossing is om de oorspronkelijke URI te gebruiken, of het plaatje ergens te kopieren waar de schaal-functie wel werkt.
Let op; schalen maakt de fysieke grootte van een plaatje niet kleiner, het wordt enkel kleiner getoond. Een grote foto kost dus nog steeds veel bandbreedte.
Uitlijnen
Je kunt links-uitlijnen, centreren en rechts-uitlijnen.
Centreren is simpel, je hoeft enkel de tekst en/of het plaatje in te sluiten met <center>Gecentreerde tekst of plaatje</center>
Als je tekst zowel gecentreerd en dikgedrukt wilt hebben, moet je ** rond de tekst plaatsen, na <center> en voor </center>
Uitlijnen van tekst en plaatjes:
Dit bereik je door gebruik te maken van deze 2 classes:
<div class="pull-left">Tekst of Plaatje URL</div> of <div class="pull-right">Tekst of Plaatje URL</div>
TABELLEN
Tabellen kun je als volgt maken:
Omschrijving | HTML | Resultaat | Markdown | Resultaat <--- Tabel kop
------ | -------- | -------- | ------------- | ------------ <---- Dit bepaalt dat dit een tabel is
Bold | <b>Bold</b> | Bold | **Bold** | Bold <----- Eerste tabel rij
Dit geeft:
Omschrijving | HTML | Resultaat | Markdown | Resultaat |
---|---|---|---|---|
Bold | <b>Bold</b> | Bold | **Bold** | Bold |
Dit kan gebruikt worden om tekst te formatteren, maar het is beperkt.
Kop 1 | Kop 3 | Laatste Kop | ||
---|---|---|---|---|
Kolom 1 | Kolom 3 | Laatste Kolom | ||
Kolom 2 | Kolom 4 |
Rechts uitlijnen van een kolom doe je door een : achter ----- te plaatsen, zoals in deze tabel ------ | -------- | -------- | ------------- | -----------:
Een andere mogelijkheid:
English | Nederlands | |
---|---|---|
Here the text is in English, as most of you can read. | En hier is het in het Nederlands. | |
And some more text, but you have virtually no influence on the width of the columns. | En nog meer NL. Als we dit nu wat langer maken wordt de tekst meer uitgelijnd. |
Hyperlinks
Hyperlinks maak je met [Go to Steemit Homepage](https://www.steemit.com "Possible title of link")
Go to Steemit Homepage.
Eigenlijk zorgt []() voor de hyperlink. In [] staat de tekst voor de lezer, de () bevat de hyperlink URI. De spatie en tekst ziet de lezer als informatie als de muis over de hyperlink staat.
Het is helaas (nog) niet mogelijk zelf te bepalen of een hyperlink een opent in een nieuwe tab of pagina.
ALs je een @ voor een naam zet, bijvoorbeeld @blevley, dan krijgt deze persoon een seintje dat hij genoemd is in een artikel
Hopelijk helpt dit om wat Markdown wat beter te begrijpen en je artikelen mooier te maken, in geval van vragen of opmerkingen hoor ik het graag.
This post recieved an upvote from minnowpond. If you would like to recieve upvotes from minnowpond on all your posts, simply FOLLOW @minnowpond Please consider upvoting this comment as this project is supported only by your upvotes!
Handig, handig. Deze moet ik ff marken door te replyen ;) Upvote voor de tips en het harde werk ;)
Graag gedaan. Zoek anders op Steemit naar Steemit UI Tools. Dit is een (tampermonkey) plugin waarbij je onder andere pagina's of personen kunt markeren.
Ik gebruik deze om snel te schakelen.
Ik zal eens kijken, dankjewel!
Dit is super! Bedankt! Helaas vind ik m te laat om omhoog te stemmen! 😉