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.
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.mdpage, you will refer to the image asimages/filename.jpg- From an folder (ie.
docs/assignments/week01.md) page you will refer to it as../images/filename.jpgThe../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.
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.mdpage, you will refer to the image asfiles/filename.stl- From an folder (ie.
docs/assignments/week01.md) page you will refer to it as../files/filename.stlThe../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