Basic Formatting

How to write basic content on your site.

Most of this is just the formatting built into Markdown. Lookup help for Markdown for more thorough documentation.

👁️ PREVIEW 👁️

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

Link

[Link text](https://some-website.org/)

Link to a page within your site

[Meet our team!](team)

Unless noted otherwise, all links in .yaml files, .md files, and components can be absolute links (e.g. https://google.com/) or relative links to items within your repo (e.g. images/group-photo.jpg).

Centered element

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.
{:.center}

Most things are centered by default, where appropriate. But sometimes you may need to attach this center utility class to an element to center it. Depending on what you're trying to center, the {:.center} tag may have to go on the same line or the next line.

Headings

# Top level heading
## Secondary heading
### Very specific heading
#### Even more specific heading

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, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
```

Inline code

This sentence has `inline code`, useful for making references to variables, packages, versions, etc. within a sentence.

Icons

This template has Font Awesome Free built-in, a large library of beautiful, clean, consistent, professionally-designed icons. Find the icon you want, and paste its HTML code right into your Markdown:

<i class="fas fa-flask"></i>
<i class="fas fa-microscope"></i>
<i class="fas fa-bacteria"></i>
<i class="fas fa-virus"></i>

Use the same style of icon across your site to maintain a consistent look. See the styling section of their docs to see some of the easy ways you can modify the look of the icons. Several of the Components use these icons.

Front matter

Markdown files can also have a section at the top called the "front matter" to hold metadata about the page in YAML format.

---
title: A nice page title
description: A nice description of the page
---

Regular markdown

This is how you can pass special per-page details to the template to display in various ways, as you will see in later pages of this documentation.

Important note: Jekyll, the tool that this template is built upon, will not process any files that do not have a front matter. If you have a .md file without a front matter, it will not be converted to an .html file and thus will not end up on your site. If you really don't need any page metadata, you can just put an empty front matter like this:

---
---

Markdown content