Markdown cheat sheet

We use Markdown files to manage the content on the Infectious Diseases Toolkit in a structured and easy to edit way. For more information about Markdown, please check the Markdown guidelines. If you want more information about the specific markdown flavor we use, Kramdown, please checkout the Kramdown documentation.

Besides the syntax to describe the main content on which this page focuses, we also make use of metadata fields in the Markdown. If you want to know more about them and how they can unlock certain features on pages, please go to our page metadata page

Titles

Using:

## Title

Sub titles

Using:

### Sub titles

Sub sub titles

Using:

#### Sub sub titles

Bold text

Bold text

Using:

**Bold** text

Make sure there are no spaces between the asterisks and the text you want to put in bold.

Italic text

Italic text

Using:

*Italic* text

Make sure there are no spaces between the asterisks and the text you want to put in italic.

File names/ files / software names

Text can be highlighted using:

`Text`

Tables

You can use Multimarkdown syntax for tables. The following shows a sample:

| Priority apples | Second priority | Third priority |
|-------|--------|---------|
| ambrosia | gala | red delicious |
| pink lady | jazz | macintosh |
| honeycrisp | granny smith | fuji |

Result:

Message boxes

Change the content attribute in the code snippet to change the text in the message box

This is done by using this snippet:

{% include callout.html type="note" content="This is my note." %}

note can be replaced with tip, warning, important, depending on the type of message you want.

Images

This image is inserted in the markdown using following snippet:

{% include image.html file="logos/ELIXIR-logo.svg" caption="Figure 1. Say something about this pic." alt="ELIXIR logo" max-width="10" %}

or a smaller image

This image is inserted in the markdown using following snippet:

{% include image.html file="logos/ELIXIR-logo.svg" alt="ELIXIR logo" max-width="3em" %}

Make sure that you add the image to the images directory and give it an understanding filename. Adapt the snippet so it points towards you image (only the filename is needed). In the case of the example, the image exampleImage.png is loaded. Supported attributes are:

• click: if true, the image will be clickable -> the image will be loaded in another tab
• url: f you want the image to link to anther page
• alt: describes the image and is used for people that are visually impaired
• caption: Text that will appear under the image
• inline: if true this image can be used in a list
• max-width: Max width in px or em

or using following markdown syntax:

![ELIXIR logo](/images/logos/ELIXIR-logo.svg)
![ELIXIR logo](/images/logos/ELIXIR-logo.svg){: height="200px" width="200px"}

gives:

Icons

Go to the Font Awesome library to see the available icons.

The Font Awesome icons allow you to adjust their size by simply adding fa-2x, fa-3x and so forth as a class to the icon to adjust their size to two times or three times the original size. As vector icons, they scale crisply at any size.

Here’s an example of how to scale up a camera icon:

<i class="fa-solid fa-camera-retro"></i> normal size (1x)
<i class="fa-solid fa-camera-retro fa-lg"></i> fa-lg
<i class="fa-solid fa-camera-retro fa-2x"></i> fa-2x
<i class="fa-solid fa-camera-retro fa-3x"></i> fa-3x
<i class="fa-solid fa-camera-retro fa-4x"></i> fa-4x
<i class="fa-solid fa-camera-retro fa-5x"></i> fa-5x

Here’s what they render to:

1x fa-lg fa-2x fa-3x fa-4x fa-5x

Links

Create an external link

When linking to an external site, use:

[Google](http://google.com)

Linking to internal pages

When linking to internal pages, you can manually link to the pages like this:

[Pathogen characterisation](/data-analysis/pathogen-characterisation)

Will link to the planning page.

If you change the file name, you’ll have to update all of your links.

Emoji’s

Use GitHub emoticons! This github page about emoticons has a cheat sheet for all the emoticons. is made with :+1:

Code snippets

For syntax highlighting, use fenced code blocks optionally followed by the language syntax you want:

```java
import java.util.Scanner;

public class ScannerAndKeyboard
{

	public static void main(String[] args)
	{	Scanner s = new Scanner(System.in);
		System.out.print( "Enter your name: "  );
		String name = s.nextLine();
		System.out.println( "Hello " + name + "!" );
	}
}
```

This looks as follows:

import java.util.Scanner;

public class ScannerAndKeyboard
{

	public static void main(String[] args)
	{	Scanner s = new Scanner(System.in);
		System.out.print( "Enter your name: "  );
		String name = s.nextLine();
		System.out.println( "Hello " + name + "!" );
	}
}

List and sub-list

• List line 1
• List line 2
  • Sublist line 1

Is made with:

* List line 1
* List line 2
    * Sublist line 1
		* Subsublist line 1

Numbered lists look like this:

1. Number one
2. Number two
3. Number three
   1. Sub number one
   2. Sub number two

and are made with:

1. Number one
1. Number two
1. Number three
   1. Sub number one
   1. Sub number two

Block quotes

You can add a blockquote using:

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>
> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Giving:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

A collapsible piece of text

Is made with this code snippet:

<details>
  <summary>Click to expand!</summary>
<ol>
Text
</ol>
</details>

Add “Related pages” to a page

If you want pages from specific sections to be shown as Related pages, list their page_id. If you want to list multiple related pages, make sure to put them in a list like this: [page_id1, page_id2].

An overview of all Infectious Diseases Toolkit pages (belonging to the sections listed above) and their page_id can be found in the List of page IDs page.

related_pages: 
   showcase: [page_id1, page_id2]

Listing training material

You can list training material by using the metadata fields as in the example below. Each training item will be automatically added as an entry to the table in the All training resources page.

training:
   - name: Training in TeSS
     registry: TeSS
     url: https://tess.elixir-europe.org/search?q=data%20analysis

   - name: Training in TeSS
     registry: TeSS
     url: https://tess.elixir-europe.org/search?q=data%20analysis

Enforce space between two lines

To have space between two lines of text, simply leave one empty line in between the line in the markdown. If more is needed, you can force this with:

<br>

Enfore line break

When you want to have a line of text.
And another line underneath it without space, use:

When you want to have a line of text.\\
And another line underneath it without space, use:

Without these backslashes

When you want to have a line of text.
And another line underneath it without space, use:

looks like this:

When you want to have a line of text. And another line underneath it without space, use:

Bert Droesbeke

Editor

VIB-UGent / ELIXIR-BE