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.
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 URL you set up 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 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" %}
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 commentconstpopup=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.