Forever Jekyll Kitchen Sink
All the stuff this system can perform.
A little elusive but the Read More breaker is used right above. It’s defined in the _config.yml file as excerpt_separator.
Heading 1
Usually to be avoided since the title of the page is inserted as the top header. The rest are as follows
Heading 2
Example: ## Two Hashes
Heading 3
Example: ### Three Pound Signs
Heading 4
Example: ### Four Octothorpes
Heading 5
Example: ##### Five Sharps
Heading 6
Example: ###### Probably Overkill
Lists
- First, using: * First
- Second, again using: * Second
- Another, using: - Another
- List, using: - List
- But, using: tab indented - But
- Indented, using: tab indented * Indented
- Actual First, using: 1. Actual First
- Actual Second, using: 2. Actual Second
- Identation a. Is Possible too b. But letters are not displayed
Links
Link Text in Square Brackets! Link URL in Parentheses!
[My Site](https://goldenxp.com)
You can link within a page’s headers like this:
[Link Text](#heading-id)
Heading IDs are added automatically based on the header name with some processing. For example, spaces are converted to dashes.
It’s possible to customize these IDs by appending {#custom-id}
To turn a URL into text, one may enclose it in angle brackets like this
<https://goldenxp.com>
Tables
You create tables using pipes. Table headers are separated from the rest with dashes.
Part | Function |
---|---|
Heart | Pump Blood |
Eyes | See stuff |
Inline HTML
It’s better to use the markdown equivalents when available.
Useful ones for writing could include:
<abbr>
for abbreviations<cite>
for citations<del>
for deleted text, not quite the same as strikethrough<ins>
for inserted text<kbd>
for keyboard input<mark>
for highlighting<samp>
for code output<small>
for small text<sup>
and<sub>
for superscript and subscript<time>
for date-time display<var>
for variables<wbr>
for long word breaks
To display HTML tags, surround them with backticks.
Liquid
As I learned building this kitchen sink, writing liquid tags without processing them is tricky. There’s a few ways around it
- Use raw/endraw to skip processing - good for huge chunks of template code
- Use HTML entities - good for few entries and my choice for this doc
- Use page or site variables
Liquid Highlight
Done with Rouge which supports 209 languages! Enclose your code with {% highlight c/lua/whatever %} and {% endhighlight %}
GitHub Gists
Enclose within {% and %} both the word gist
and the gist id which you can find in the gist’s URL as the trailing guid.
Example: {% gist 3e81d4d8a2e2d74a308ec272f8d50155 %}
YouTube Videos
A quick way is to add glightbox at the end like so
[FFXV Stadia Bug](https://www.youtube.com/watch?v=G6qqyNQgv88){:.glightbox}
Note that this is just a link that opens the video player. But you can also add HTML to embed YouTube videos as well as other widgets.
Image Gallery
Forever Jekyll supports Lightbox like so.
[![Title](ImageThumbnail)](Image){:.glightbox}
ImageThumbnail and Image can be the same image path.
Mermaid Diagrams
Enclose your Mermaid data with divs with a class attribute value of “mermaid”.