Markdown syntax

11/14/25About 4 min

Markdown syntax

Markdown Cheatsheet
Markdown syntax
Vuepress Markdown
Vuepress book
Custom markdown
- extra classes
- Background raster for CodePen
- Can I Use
- CodePen
- CodeSandbox
- Video (enkel Youtube momenteel)

Some layout agreeements

File names in italic: index.html, style.css, ...
Code fragments (tags, attributes, properties, ...) in code-format: <img>, src, ...
Important words in items in bold
Tables for overviews
- required attributes in red (danger)
- other attributes in green (success)
- closed tags in blue (primary)
Warning(s) in red

WARNINGS

Lorem ipsum ...
Dolor sit amet ...

Remark(s) in yellow

REMARK

Lorem ipsum ...

Tip(s) in green

Tips

Lorem ipsum ...

General markdown

Start H1 with one hash, H2 with 2 hashes, ...

End a paragraph with two spaces to start a new line
Like this...

Bold
Italic
Italic
Bold + italic
~~Strikethrough~~

Blockquotes

**Bold**  
*Italic*  
_Italic_  
***Bold + italic***  
~~Strikethrough~~  
> Blockquotes  
\<div>HTML code\</div>

Table

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	~~are neat~~	$1

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|   -> : bepaalt de uitlijning!
| **col 3 is**  | right-aligned | $1600 |
| col 2 is      | *centered*    |   $12 |
| zebra stripes | ~~are neat~~  |    $1 |

Horizontal rule

Horizonal rule = 3 or more hypens, 3 or more asterisks, 3 or more underscores or hr-tag

List

list 1 *(prefix with - or ) -list item 2
- list item 2.1
- list item 2.1
list item 3

ol list (prefix with 1.)
list item 2
1. list item 2.1
2. list item 2.1
list item 3

Images

Nomale image
![Image Alt Text 1](https://lorempixel.com/300/150/technics/ "Image Title Text 1")

Image with reference
![Image Alt Text 2][logo]
[logo]: https://lorempixel.com/300/150/technics/ "Image Title Text 2"

Image in HTML
<img src="https://www.thomasmore.be/themes/custom/wundertheme/logo.svg" height="100" alt="Logo TM" title="Logo TM"/>

Youtube video

<a href="https://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE-ID" target="_blank">
    <img src="https://img.youtube.com/vi/YOUTUBE-ID/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" />
</a>

Code

    ```language 
    Start/stop codeblock with 3 backticks, folowing the language of your code
    Language can be php, html, css, sh, bash...
    ```

    ```html
    <a href="https://thomasmore.be">Thomas More</a>
    ```

Vuepress specific

Info blocks

    ::: tip
    This is a tip
    :::
    
    ::: warning
    This is a warning
    :::
    
    ::: danger
    This is a dangerous warning
    :::
    
    ::: danger STOP!
    This is a dangerous warning with title **STOP**
    :::

Tips

This is a tip

Warning

This is a warning

Caution

This is a warning

STOP!

This is a dangerous warning with title STOP!

Double curly braces

::: v-pre
### Blade syntax: @foreach and {{double curly braces}}
:::

Custom classes for this site

   * This line <span class="info">has class **info**</span>  
   * This line <span class="primary">has class **primary**</span>  
   * This line <span class="success">has class **success**</span> 
   * This line <span class="warning">has class **warning**</span>  
   * This line <span class="danger">has class **danger**</span>  
   * This line <span class="primary">has class **primary**</span>

This line has class info
This line has class primary
This line has class success
This line has class warning
This line has class danger
This line has class primary

Background raster

Zie gradient als background-image

         <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas corrupti voluptate, labore vel velit ipsam repellendus consectetur rerum quidem dignissimos reprehenderit dolores illum autem, voluptates nam nisi maxime possimus fugit!</p> </div>

         * { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; background: #eee; background-image: linear-gradient(rgba(0, 0, 255, .7), transparent 1px), linear-gradient(90deg, rgba(0, 0, 255, .7), transparent 1px); background-size: 20px 20px; } div { text-align: justify; padding: 20px; margin: 20px; width: 400px; border: 20px solid rgba(255, 0, 0, .5); }

Can I Use

Attribute		Description
feat	required	feat-parameter ok caniuse.com
interactive	optional	toon interactieven versie ipv statische afbeelding

<Caniuse feat="css-grid"></Caniuse>

<Caniuse feat="css-grid" interactive></Caniuse>

CodePen

Codepen tag met 1, 2 of 3 templates
- <template v-slot:html> </template> (verplicht en MOET escaped HTML code bevatten )
  Installer de String Manipulation Plugin
  Selecteer de te converteren code en kies uit het snelmenu: String Manipulation -> Escape/Unescape -> Escape HTML
- <template v-slot:style> </template> (optioneel)
- <template v-slot:script> </template> (optioneel)

Attribute		Description
scss	optional	gebruik scss ipv css
title	optional	titel van het project (default: WebDev TMK)
height	optional	hoogte (default 400)
jquery	optional	link jQuery via CDN
bootstrapgrid	optional	link Bootstrap 4 grid + reboot
bootstrap	optional	link Bootstrap 4 + jQuery via CDN
fa5	optional	link fontawesome 5 via CDN

<Pen>
<template v-slot:html>
&lt;p&gt;CodePen with only HTML&lt;/p&gt;
</template>
</Pen>

         <p>CodePen with only HTML</p>

<Pen scss bootstrap>
<template v-slot:html>
&lt;div class=&quot;container mt-2&quot;&gt;
  &lt;h1&gt;CodePen with Bootstrap and SCSS&lt;/h1&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col&quot;&gt;
      &lt;div class=&quot;alert alert-primary&quot;&gt;
      A simple primary alert
    &lt;/div&gt;
  &lt;/div&gt;
    &lt;div class=&quot;col&quot;&gt;
      &lt;div class=&quot;alert alert-danger&quot;&gt;
      A simple danger alert
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</template>
<template v-slot:style>
$color: lightyellow;
.container {
  background-color: $color;
  transition: 1s;
  &:hover {
    background-color: darken($color, 20%);
  }
}
</template>
<template v-slot:script>
$('h1').click(function() {
    alert($(this).text());
})
</template>
</Pen>

         <div class="container mt-2"> <h1>CodePen with Bootstrap and SCSS</h1> <div class="row"> <div class="col"> <div class="alert alert-primary"> A simple primary alert </div> </div> <div class="col"> <div class="alert alert-danger"> A simple danger alert </div> </div> </div>

         $color: lightyellow; .container { background-color: $color; transition: 1s; &:hover { background-color: darken($color, 20%); } }

         $('h1').click(function() { alert($(this).text()); })

CodeSandbox

Attribute		Description
id	required	first part of url e.g: `id="8o991"` https://8o991.csb.app/
height	optional	E.g: `height="800px"` (default `500px`)
open	optional	First file to show e.g: `open="page2.html"` (default `index.html`)

<Sandbox id="8o991"></Sandbox>

Video

Attribute		Description
id	required	Youtube movie id
start	optional	Start movie at xxx seconds e.g: `start="180"`
end	optional	Stop movie at xxx seconds e.g: `end="200"`

<Video id="wmAP2xvNs08" start="600" end="605"></Video>