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
      1. Actual First, using: 1. Actual First
      2. Actual Second, using: 2. Actual Second
      3. Identation a. Is Possible too b. But letters are not displayed

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

  1. Use raw/endraw to skip processing - good for huge chunks of template code
  2. Use HTML entities - good for few entries and my choice for this doc
  3. Use page or site variables

Liquid Highlight

Done with Rouge which supports 209 languages! Enclose your code with {% highlight c/lua/whatever %} and {% endhighlight %}

void NullNull()
{
	// Does Nothing
}

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}

FFXV Stadia Bug

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.

Forever Jekyll supports Lightbox like so.

[![Title](ImageThumbnail)](Image){:.glightbox}

Flare

ImageThumbnail and Image can be the same image path.

Mermaid Diagrams

Enclose your Mermaid data with divs with a class attribute value of “mermaid”.

graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]
 Date: February 12, 2022
 Tags:  website docs

Previous
⏪ Book Challenge 2021

Next
SF Game Dev Meetup Presentation ⏩