Write basic content
👁️ PREVIEW
Markdown is a way to write basic text content and formatting in a clean and simple way. Markdown .md
files are plain text files that get converted into .html
pages on your resulting website.
Links
To an external site:
[Link text](https://some-website.org/)
To a page within your site:
[Meet our team!](team)
The example above works in most cases, because your site is likely to only have top-level pages and the URL is relative to the level of the current page. If you have sub-pages or more complex linking needs, see below.
Link parameters
The above section shows how you can write links as plain text content. But you will probably more often be linking to images/pages/whatever using the template's components, data lists, and front matters. In these cases, links work slightly differently.
You can still link to an external, absolute URL, e.g. https://some-website.org/
. But if you are trying to link to something within your repo, the URL must start from the root of your repo, without any site name/"baseurl" prefix. You also cannot refer to files relative to the current file, or use the ..
to move up folders.
✓ GOOD
{% include some-component.html image="images/photo.jpg" %}
---
image: https://some-website.org/journal-cover.jpg
---
- id: 123
link: team/join
✘ BAD
{% include some-component.html link="../images/photo.jpg" %}
---
image: ./image-in-current-folder.jpg
---
- id: 123
link: /your-lab-website/team/join
Basic text styles
_italic text_
**bold text**
~~strike-through text~~
Line breaks
<br>
<br>
Text with extra blank lines above and below
<br>
<br>
Comments
<!-- a comment in HTML -->
{% comment %}
A comment in Liquid
{% endcomment %}
Lists
- list item a
- list item b
- list item c
1. ordered list item 1
2. ordered list item 2
3. ordered list item 3
Images

For most purposes, prefer using the more richly featured (e.g. captions) and styled figure component instead.
Headings
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
Horizontal rule
---
Table
With left-aligned, centered, and right-aligned columns.
| TABLE | Game 1 | Game 2 | Game 3 | Total |
| :---- | :----: | :----: | :----: | ----: |
| Anna | 144 | 123 | 218 | 485 |
| Bill | 90 | 175 | 120 | 385 |
| Cara | 102 | 214 | 233 | 549 |
Block quote
> It was the best of times it was the worst of times.
> It was the age of wisdom, it was the age of foolishness.
> It was the spring of hope, it was the winter of despair.
Code block
With syntax highlighting.
```javascript
// a comment
const popup = document.querySelector("#popup");
popup.style.width = "100%";
popup.innerText = "Lorem ipsum dolor sit amet.";
```
Inline code
This sentence has `inline code`, useful for making references to variables, packages, versions, etc. within a sentence.
Util classes
In Markdown, you can attach an arbitrary CSS class to an element with the syntax {:.class}
. Depending on the type of element, this code may have to go on the same line or on the next line.
The template comes with a few alignment utility classes:
Lorem ipsum dolor sit amet.
{:.left}
Consectetur adipiscing elit.
{:.center}
Sed do eiusmod tempor incididunt.
{:.right}
Most things in the template are centered by default where appropriate, and left/right in a few other places where appropriate. But sometimes you may want to force the alignment of something.
Last updated