How to use Markdown and MkDocs

This documentation is built using Markdown and MkDocs. This page is a guide to get you started contributing.

What is Markdown

Markdown is a lightweight markup language used to format text in a simple and readable way. It uses plain-text syntax to define elements like headings, lists, links, and emphasis (e.g., bold, italic). Markdown is commonly used in documentation, blogging platforms, and version control systems like GitHub because it is easy to write and converts seamlessly into HTML for web display. -ChatGPT

Markdown files are often recognizable by their .md and rarely .markdown file extensions.

Basic Syntax

Bold and Italics

To make bold text, surround your text with double asterisks:

**This text will be bolded** This text will be bolded

For italics, use a single asterisk:

*This text will be italicized* This text will be italicized

These can be combined:

***This text will be bold and italic*** This text will be bold and italic

Headings

Headings are denoted using # at the beginning of a line. The number of # determines the depth of the header:

Input Render
# Heading 1

Heading 1

## Heading 2

Heading 2

### Heading 3

Heading 3

#### Heading 4

Heading 4

##### Heading 5
Heading 5

Warning

A space is required for a heading to work.

  • #Heading 1 ❌
  • ## Heading 1 ✔️

To add links, use the following syntax:

[The text that will be displayed](The link to follow)

[A link to example.org](https://example.org/)

A link to example.org

Note

These can be used for internal links as well. For example, we can link this section with [Links](#Links) or [Links](/building_docs/#Links): Links.

The second method can be generalized to reach any page or header on the website.

Images

The syntax to add images is almost the same as links. Alt text is the text used by accessibility readers. It should therefore be descriptive rather than a title.

![Alt text](path/to/image.png)

![A square version of the autotech logo. It is used as a favicon for the site](img/favicon.png)

A square version of the autotech logo. It is used as a favicon for the site

Note

See Images in HTML for more fine-grain control of images.

Code Blocks

Code blocks in Markdown can be created using triple backticks (```). You can specify the language for syntax highlighting by adding the language name after the opening backticks. Here is an example of a code block in Python:

```python

def hello_world():

print("Hello, world!")

```

def hello_world():
    print("Hello, world!")

You can also create inline code by wrapping text in single backticks (`). For example, `print("Hello, world!")` renders as print("Hello, world!").

Advanced Syntax

Markdown's strength is in the simplicity of writing, but that sometimes comes back to bite us when trying to do something a little more complicated. Luckily, most Markdown renderers accept some HTML in Markdown files. This is the case with MkDocs and GitHub. HTML should only be used as necessary.

Comments

In Markdown, there is no built-in syntax for comments. However, you can use HTML comments to add notes or comments that will not be rendered in the final output. Here is an example:

<!-- This is a comment and will not be rendered in the final output -->

Images in HTML

Images are impossible to scale or render next to text. Using the HTML <img> tag, it is possible to customize your image's behavior. Here is an example of an image that is scaled and displayed to the right. Keep in mind that images can't be rendered above the position of the <img> tag:

<img src="../img/favicon.png" alt="A square version of the autotech logo. It is used as a favicon for the site" title="A UST-10lx Lidar" width="200" align="right"/>

A square version of the autotech logo. It is used as a favicon for the site

Warning

Due to differences in how the HTML and Markdown are compiled, there are different paths when adding images in HTML and Markdown.

Admonitions

Admonitions are a way to highlight important information in your documentation. MkDocs supports several types of admonitions, such as notes, warnings/caution, danger, and tips/hint. Here is an example of how to use them:

!!! note
    This is a note admonition.

Note

This is a note admonition.

!!! warning
    This is a warning admonition.

Warning

This is a warning admonition.

Using MkDocs

For full documentation, visit mkdocs.org.

Commands

  • mkdocs serve - Start the live-reloading docs server. It should now be accessible at 127.0.0.1:8000 on your machine.
  • mkdocs gh-deploy - Build the documentation site on the gh-pages branch of your repository.

Note

On the Club-INTech/CoVAPSy repository, mkdocs gh-deploy is automatically called upon push to the main branch. It can still be manually called when on another branch, but gh-pages will be overwritten by any push on main.

Project Layout

mkdocs.yml    ## The configuration file.
docs/
    index.md  ## The documentation homepage.
    ...       ## Other markdown pages, images, and other files.
    img/
        favicon.png ## The icon that appears on the browser tab.
        ... other images

Using GitHub Pages

Navigate to the repository, then to settings/pages. Using the drop-down menus, select "Deploy from branch" for source and "gh-pages" and "/root" for branch.

Note

You may have to run mkdocs gh-deploy for the gh-pages branch to show. See Commands.