Skip to content

Adding content with Markdown

Writing in Markdown

The website template provides examples for the most common content including bullet lists, images, videos, tables and so on. This way you can just start editing the page right away replacing the content.

For some basic Markdown examples, visit the Markdown cheatsheet for reference. Below you will find some useful specific examples.

Adding a new line

Adding a new line

<br />

Over here

Adding a new line


Over here

Adding a border/separation

Hello,
****
Welcome to my site

Hello,


Welcome to my site

How to center text

<p align=center>My centered text</p>

My centered text

How to add an image

The following is the markup to add an image to your markdown files.

![Some alternative text](images/filename.jpg)

Where the ../images/filename.jpg part is the path to the image relative to the markdown file, .md.

<back-on-folder> / <folder> / <image-name>

Note on finding the path of your image

If you uploaded your image inside the docs/images folder:

  • From the index.md page, you will refer to the image as images/filename.jpg
  • From an folder (ie. docs/assignments/week01.md) page you will refer to it as ../images/filename.jpg The ../ part simply tells mkdocs to look for images in the parent folder, we can repeat it to go in the parent’s parent folder, etc. i.e. ../../images/filename.jpg

How to add a file

The following is the markup to add a file to your markdown files.

![Some alternative text](files/filename.stl)

Where the ../files/filename.stl part is the path to the image relative to the markdown file, .md.

<back-on-folder> / <folder> / <file-name>

Note on finding the path of your file

If you uploaded your file inside the docs/files folder:

  • From the index.md page, you will refer to the image as files/filename.stl
  • From an folder (ie. docs/assignments/week01.md) page you will refer to it as ../files/filename.stl The ../ part simply tells mkdocs to look for files in the parent folder, we can repeat it to go in the parent’s parent folder, etc. i.e. ../../files/filename.stl

Files must be uploaded in any of the universal interchange formats for 2D drawings and 3D models such as: SVG, EPS, PDF, DXF, STL.

How to add a video

Try to host your videos on Vimeo or Youtube if the videos are not short and small.

Video from Vimeo

Starting from a video uploaded to Vimeo, you can use the embedded HTML share code.

NOTE: the video player might not show up the GitLab preview tab, as the web editor disables external includes in the preview. However thats ok, as the video will show up in the published website.

Example embed code from Vimeo

<iframe src="https://player.vimeo.com/video/10048961" width="640" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<p><a href="https://vimeo.com/10048961">Sound Waves</a> from <a href="https://vimeo.com/radarboy">George Gally (Radarboy)</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

Video from Youtube

Starting from a video uploaded to Youtube, you can use the embedded HTML share code.

NOTE: the video player might not show up the GitLab preview tab, as the web editor disables external includes in the preview. However thats ok, as the video will show up in the published website.

Example embed code from Youtube

<iframe width="560" height="315" src="https://www.youtube.com/embed/jjNgJFemlC4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Small video flie

If the video file is very small, less than 10 MB you can add the video to the "files" folder. Then add the below markdown relative to the .md file.

<embed type="video/mp4" src="files/flower.mp4">

How to add an audio file

<audio controls>
    <source src="files/sample-audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Advanced mkDocs markdown

There are extra supported features that the Material theme supports with Markdown.

For example, you can do more advanced stuff to layout your images in your document. See the Material theme's reference documentation


Last update: January 20, 2021