Een uitgebreide gids voor Markdown en wat tips die je misschien nog niet wist.steemCreated with Sketch.

in #nl7 years ago

SteemMarkdown.pngMarkdown 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
OmscHTMLResultaatMarkdownResultaat
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

Let op de spatie tussen # en de header tekst,
Zonder deze spatie wordt de header tekst beschouwd als een tag!!

En hiervan mag je er slechts totaal 5 hebben.

TEKST FORMATTEREN

OmsHTMLResultaatMarkdownResultaat
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 printGeen alternatiefGebruik HTML
Strikethrough<del>Strikethrough</del>Strikethrough~~Strikethrough~~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:

  1. Eerste genummerde lijst item - Let op de . na het nummer
  2. 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
  3. Zoals gezegd maakt het niet uit welke nummers je gebruikt, deze heb ik nummer 888 gegeven.
  4. 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;
iceberg-1421411_960_720[1].jpg

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>

Gecentreerde tekst of plaatje

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:

Plaatje links, tekst rechts van plaatje.
Plaatje rechts, tekst links van plaatje.


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:

OmschrijvingHTMLResultaatMarkdownResultaat
Bold<b>Bold</b>Bold**Bold**Bold

Dit kan gebruikt worden om tekst te formatteren, maar het is beperkt.

Kop 1Kop 3Laatste 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:

EnglishNederlands
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.

Sort:  

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! 😉

Coin Marketplace

STEEM 0.15
TRX 0.16
JST 0.028
BTC 67807.24
ETH 2423.65
USDT 1.00
SBD 2.33