The source file for this page is pages/markdown.md
. There you can see the raw Markdown.
Styling content
With the Kramdown Markdown parser that Jekyll uses, you can add CSS classes to your content (see this blog post). By sticking to Bootstrap classes, you can easily style your content. If that doesn’t fit your needs, you can always write html in your Markdown.
For example, the paragraph at the top of this page is styled as a Bootstrap alert because it has {: .alert .alert-warning}
right before it. Block elements like paragraphs need their class on the line above it.
Inline elements on the other hand, need a class right after it. For example, to style a link as a button, use [Don't click](http://example.com){: .btn .btn-danger}
:
Headings
Heading h1
h1 headings are reserved for page titles and are hidden from content. Start your headings at h2.
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
Heading with custom id
Table of content
Add toc: true
to your page/post front matter. See configuration.
Paragraphs
Set i won’t void spirit all. Had after called us It wherein Tree in deep abundantly also midst Seed. Beast. Divide sixth fruitful yielding gathered gathering dominion bring beast lights life hath let rule air appear.
Bring let rule creature. Very open hath to years. In second kind. Divide land night. Earth bearing tree lesser likeness likeness won’t. Likeness creature light.
Line breaks
This is the first line.
And this is the second line.
Emphasis
This is bold text
This is italicized text
This is bold italicized text
This is strikethrough text
Blockquotes
Gathering brought him green. Creeping very after hath a, from likeness dry tree moved dry fowl. Our let forth, male dry won’t god. Kind a thing, dominion lights midst him gathering waters fruitful greater god have dry land deep abundantly.
Lists
Unordered list:
- Item 1
- Item 2
- Item 3
- Subitem 1
- Subitem 2
Ordered list:
- Item 1
- Item 2
- Item 3
- Subitem 1
- Subitem 2
Task list:
- Item 1
- Item 2
- Item 3
Definition list:
- term 1
- definition 1.1
- definition 1.2
- term 2
- definition 2
Code
Inline code
Code block by indenting code with 4 spaces:
part_of_team = True
if part_of_team:
print("Everything is awesome!") # If you're part of a team
Code block by fencing code in backticks. This method allows supports syntax highlighting by adding the language, e.g. ```python
:
part_of_team = True
if part_of_team:
print("Everything is awesome!") # If you're part of a team
Horizontal rules
Links
See the Jekyll documentation to create internal links. All internal links start from the url
in _config.yml
.
You can include internal links using Jekyll syntax:
- For pages:
[link text]({% link pages/about.md %})
- For posts:
[link text]({% link _posts/2010-07-21-name-of-post.md %})
or[link text]({% post_url 2010-07-21-name-of-post %})
. The latter will validate links when building your website. - For images and documents:
[link text]({% link /assets/images/name-of-image.jpg %})
You can also link using root-relative permalinks (starting with /
):
- For pages:
[link text](/about/)
- For posts:
[link text](/permalink_of_post/)
- For images and documents:
[link text](/assets/images/name-of-image.jpg)
Tables
Header 1 | Header 2 |
---|---|
Row 1 col 1 | Row 1 col 2 |
Row 2 col 1 | Row 2 col 2 |
Aligned columns:
Right aligned | Center aligned |
---|---|
Row 1 col 1 | Row 1 col 2 |
Row 2 col 1 | Row 2 col 2 |
Footnotes
Here’s a sentence with a footnote. 1
Images
You can add an image caption by including an
_emphasized sentence_
directly below the image without inserting a new line. This will wrap both image and caption in a paragraph.
See the the links section to learn how to reference your own images and documents.
By default, images will be centered horizontally and use the full width if they can. But you can change image alignment by using Bootstrap classes.
For example, the image below is wrapped in a paragraph with {: .col-md-8 .mx-auto}
to contain it (and its caption) to 8/12 of the width on medium and larger screens. On small screens the full width will be used. Controlling the width of an image is especially useful for portrait images.
Image caption for this image should nicely wrap to the width of the container.
The image to the left is styled with
{: .rounded .float-start}
to give it round corners and position it at the start (i.e. left), with text wrapping around it. Note that in Bootstrap v5 .float-left
was renamed to .float-start
and .float-right
to .float-end
, but the old class names are still supported in Petridish.
The image does not wrap around this paragraph, because the previous paragraph also has a {: .clearfix}
class, which contains wrapping to that paragraph only.
-
This is the footnote. ↩