Adding content with Markdown
Writing in Markdown
On your website each page 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 more information on the Markdown used see the Zensical authoring docs.
Below you will find some extra 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
If you uploaded your image inside the docs/images folder:
- From the
index.mdpage, you can reference images asimages/filename.jpg - From an sub-folder, like
docs/assignments/week01.md, page you can refer to an image as../images/filename.jpg
The ../ part simply tells the Markdown to find the image in the parent folder. We can repeat it to go in the parent of parent folder, etc. (i.e. ../../images/filename.jpg).
How to add a file
To link to a file, so can be downloaded you can use normal links
[Download my 2D drawing](../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>
Markdown extensions
There are extra features for Markdown that can be enabled in Zensical, see the reference documentation.