Pages Test Page / Jekyll Markdown Guide
Original Date: 2021-05-04
The following guide, after being rendered into Hypertext Markup Language (HTML) by Jekyll, will show you what the HTML looks like in the browser. Following the content is a code box with the markdown used to create the content.
It is a good idea to use this page as a test page for css formatting. Test it in each browser you want to support.
Jekyll Notes
Jekyll uses kramdown markdown processor with out of the box settings by default, but you can change options or the processor. Look it up, if you feel the need.
Paragraphs (HTML P tag)
Any line of text will be converted to a <p></p> tag.
Separate any markdown by an empty line to start a new paragraph. Two contiguous lines will be in the same paragraph with only a single space separating them. Compare this paragraph with the markdown below that created it.
Separate any markdown by an empty line to start a new paragraph.
Two contiguous lines will be in the same paragraph as if only a space separated them.
Compare this paragraph with the markdown below that created it.
Line Break
To indicate a <br> tag end the line with two or more spaces.
Then the next line will appear right below the previous line.
Basic Text Formatting (Bold, Italics, Strikethrough
To italisize, surround text with a single asterisk or single underscore
To *italisize*, surround text with a single asterisk or single _underscore_
Bold text by surrounding it with two asterisks or two underscores
**Bold** text by surrounding it with two asterisks or two __underscores__
Bold Italics can be accomplished three ways, but really just learning the three asterisk way is more than enough.
***Bold Italics*** can be accomplished three ways, but really just learning the three asterisk way is more than enough.
The three ways are: **_text_**, ___text___, or ***text***.
To strikethrough text surround it with two tildes on either side.
To ~~strikethrough~~ text surround it with two tildes on either side.
Headers
To create headers you can use the # character. This translates into an HTML heading (H1, H2, H3, or H4)
You can also underline the text with an = or -. The = sign creates a H1 and the - creates a H2.
Heading 1 (HTML H1)
# Heading 1 (HTML H1)
Is this an issue? Why is this smaller than a heading 2?
Viewing the source on the page indicates that Jekyll rendered it correctly to an H1 tag, so it is probably in the CSS.
Jekyll team has a issue for this and says that it is frowned upon to have more than one h1 on a page. So when working with markdown remember to nest the headings starting with an h2 for top level headings.
Heading 2 (H2)
## Hash Heading 2 (H2)
Heading 3 (H3)
### Hash Heading 3 (H3)
Heading 4 (H4)
#### Hash Heading 4 (H4)
Underlined Heading 1
Underlined Heading 1
====================
Underlined Heading 2
Underlined Heading 2
--------------------
Lists
Ordered lists are created by preceding each line with a 1. Note: some editors will autoincrement as you type (GitHub does this). Those that don't will make it harder to insert an item in the middle of the list if you use 1, 2, 3, ..., so it has been a best practice to always use "1." for each item and when it is rendered it increments correctly.
- First
- Second
- Third
Ordered lists are created by preceding each line with a `1.` Note: some editors will autoincrement as you type (GitHub does this). Those that don't will make it harder to insert an item in the middle of the list if you use 1, 2, 3, ..., so it has been a best practice to always use "1." for each item and when it is rendered it increments correctly.
1. First
1. Second
1. Third
Unordered lists are created by preceding each line with an asterisk or a hyphen.
- Some item
- Another item
- etc..
or
- Someone
- Somebody else
- Bucky Fuller
Unordered lists are created by preceding each line with an asterisk.
* Some item
* Another item
* etc..
or
- Someone
- Somebody else
- Bucky Fuller
Checklists are created using the following syntax: - [ ] Task One (Not Done) or - [X] Task Two (Done).
- [X] Write Jekyll Markdown post
- [ ] Test it in markdown previewer
- [ ] Test it in browser after Jekyll rendering.
- [X] Write Jekyll Markdown post
- [ ] Test it in markdown previewer
- [ ] Test it in browser after Jekyll rendering.
Links
Inline link: developer journal
Inline link: [developer journal](https://rolandchristensen.github.io/developer-journal/)
Inline link with a title attribute: developer journal (hover mouse over the link to see the hover text)
Inline link with a title attribute: [developer journal](https://rolandchristensen.github.io/developer-journal/ "Go to the home page")
If you don't want to define custom text for the link, surrounding the url with less than and greater than works to create a clickable link: http://google.com.
If you don't want to define custom text for the link, surrounding the url with less than and greater than works to create a clickable: <http://google.com>.
Test to see if http://google.com is made clickable automagically. (Probably depends on the markdown interpreter used, which you can change, but out of the box it looks like this is not clickable.)
Anchor link: Links
Anchor link: [Links](#links)
Note: the markdown interpreter creates an id tag for each header that matches the text in the header, BUT it converts it to all lower case. This makes copy and paste a little more painful.
Relative Links
Todo
Blockquotes
Todo
Code
Todo
Fenced Code Block
Todo
Horizontal Rule
Todo
Images
Todo
Tables
Todo
Syntax Highlighting
Todo
Footnotes
Todo
Heading IDs
Todo
Definition Lists
Todo
Emoji (Copy and paste)
Todo
HTML
Todo
References
https://markdown.land/
https://www.markdownguide.org/tools/jekyll/
https://daringfireball.net/projects/markdown/