Write basic content
Last updated
Last updated
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.
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.
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
_italic text_
**bold text**
~~strike-through text~~
<br>
<br>
Text with extra blank lines above and below
<br>
<br>
<!-- a comment in HTML -->
{% comment %}
A comment in Liquid
{% endcomment %}
- list item a
- list item b
- list item c
1. ordered list item 1
2. ordered list item 2
3. ordered list item 3

For most purposes, prefer using the more richly featured (e.g. captions) and styled figure component instead.
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
---
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 |
> 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.
With syntax highlighting.
```javascript
// a comment
const popup = document.querySelector("#popup");
popup.style.width = "100%";
popup.innerText = "Lorem ipsum dolor sit amet.";
```
This sentence has `inline code`, useful for making references to variables, packages, versions, etc. within a sentence.
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.