📘
Lab Website Template docs
  • Introduction
    • Overview
    • Is this right for me?
    • Gallery
    • Support
  • Getting Started
    • Set up your site
    • Set up your URL
    • Tidy up your repo
    • Change your site
    • Preview your site
  • Basics
    • Repo structure
    • Configure your site
    • Edit pages
    • Write basic content
    • Use your logo
    • Customize your theme
    • Team members
    • Blog posts
    • Citations
    • Components
      • Section
      • Figure
      • Button
      • Icon
      • Feature
      • List
      • Citation
      • Card
      • Portrait
      • Post Excerpt
      • Alert
      • Tags
      • Float
      • Grid
      • Cols
      • Search
      • Site Search
  • Advanced
    • Update your template
    • Embeds
    • Math, diagrams, videos, etc.
    • Analytics
    • Data and collections
    • Jekyll plugins
    • Custom components
    • Background knowledge
Powered by GitBook
On this page
  • Links
  • Link parameters
  • Basic text styles
  • Line breaks
  • Comments
  • Lists
  • Images
  • Headings
  • Horizontal rule
  • Table
  • Block quote
  • Code block
  • Inline code
  • Util classes
  1. Basics

Write basic content

PreviousEdit pagesNextUse your logo

Last updated 11 months ago

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.

Advanced

You can of course use any :

Page/photo located in same folder as current page (i.e. a sub-page)
[Link text](page)
[Link text](photo.jpg)

Photo located in sub-folder of current page
[Link text](assets/photo.jpg)

Photo located in folder one level up from current page
[Link text](../photo.jpg)

Page/sub-page, starting from root of website
[Link text](/page)
[Link text](/page/sub-page)

But note, if starting from root (last examples above), you need to prepend your "baseurl", if the has one (e.g. your-lab.github.io/your-lab-website):

Manually prepend baseurl
[Link text](/your-lab-website/page/sub-page)

Jekyll automatically prepends the right baseurl
[Link text]({{ "/page/sub-page" | relative_url }})
[Link text]({% link page/sub-page/index.md %})

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 , , and . 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

![plain image](/images/photo.jpg)

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

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.

For most purposes, prefer using the more richly featured (e.g. captions) and styled component instead.

In Markdown, you can attach an arbitrary 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.

figure
CSS
👁️
PREVIEW
Markdown
standard path syntax
URL you set up
components
front matters
data lists