Heading 1

Basic Formatting¶

Text Emphasis¶

*italic* or _italic_
**bold** or __bold__
***bold italic*** or ___bold italic___
~~strikethrough~~

italic | bold | bold italic | ~~strikethrough~~

Headings¶

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Links & Images¶

Links¶

[Link text](https://example.com)
[Link with title](https://example.com "Title")
<https://example.com>
[Reference link][ref]

[ref]: https://example.com

Images¶

![Alt text](/path/to/image.jpg)
![Alt text](/path/to/image.jpg "Title")

<!-- With link -->
[![Alt text](/path/to/image.jpg)](https://example.com)

<!-- Reference style -->
![Alt text][img-ref]

[img-ref]: /path/to/image.jpg "Title"

Image Sizing (HTML)¶

<img src="/path/to/image.jpg" alt="Alt text" width="300">

<!-- Centered image -->
<p align="center">
  <img src="/path/to/image.jpg" alt="Alt text" width="500">
</p>

Lists¶

Unordered Lists¶

- Item 1
- Item 2
  - Nested item
  - Another nested
- Item 3

* Alternative bullet
+ Also works

Ordered Lists¶

1. First item
2. Second item
   1. Nested numbered
   2. Another nested
3. Third item

<!-- Numbers don't need to be sequential -->
1. First
1. Second (renders as 2)
1. Third (renders as 3)

Task Lists¶

- [x] Completed task
- [ ] Incomplete task
- [ ] Another task
  - [x] Nested completed
  - [ ] Nested incomplete

Completed task
Incomplete task
Another task

Definition Lists¶

Term 1
: Definition for term 1

Term 2
: Definition for term 2
: Additional definition

Code¶

Inline Code¶

Use `code` for inline code.
Use `` `backticks` `` inside code.

Use code for inline code.

Code Blocks¶

```python
def hello():
    print("Hello, World!")
```

```javascript
const greeting = () => {
    console.log("Hello!");
};
```

Code with Line Numbers (Jekyll)¶

```python
def hello():
    print("Hello, World!")
```
{: .line-numbers}

Syntax Highlighting Languages¶

Common language identifiers: - python, py - javascript, js - typescript, ts - ruby, rb - bash, shell, sh - html, css, scss - json, yaml, yml - sql, markdown, md

Tables¶

Basic Table¶

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Alignment¶

| Left     | Center   | Right    |
|:---------|:--------:|---------:|
| Left     | Center   | Right    |
| Aligned  | Aligned  | Aligned  |

Left	Center	Right
Left	Center	Right
Aligned	Aligned	Aligned

Complex Tables¶

| Feature | Basic | Pro | Enterprise |
|:--------|:-----:|:---:|:----------:|
| Users   | 1     | 10  | Unlimited  |
| Storage | 5GB   | 50GB| 500GB      |
| Support | Email | Chat| 24/7 Phone |
| Price   | Free  | $10 | $99        |

Blockquotes¶

Simple Quote¶

> This is a blockquote.
> It can span multiple lines.

This is a blockquote. It can span multiple lines.

Nested Quotes¶

> First level
>> Second level
>>> Third level

First level

Second level

Third level

Quote with Attribution¶

> The best way to predict the future is to invent it.
>
> — Alan Kay

Footnotes¶

Here is a sentence with a footnote.[^1]

Another sentence with a named footnote.[^note]

[^1]: This is the footnote content.
[^note]: This is a named footnote.

Here is a sentence with a footnote.¹

Horizontal Rules¶

---
***
___

All three create a horizontal rule:

Special Characters¶

Escaping¶

\*not italic\*
\`not code\`
\# not a heading
\[not a link\]

*not italic* | `not code`

HTML Entities¶

&copy; &reg; &trade;
&mdash; &ndash;
&larr; &rarr; &uarr; &darr;
&lt; &gt; &amp;

Advanced Features¶

Abbreviations¶

HTML is great for web pages.

*[HTML]: Hyper Text Markup Language

Emoji¶

:smile: :rocket: :thumbsup:
:warning: :bulb: :memo:

Keyboard Keys¶

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.

Press Ctrl + C to copy.

Collapsible Sections¶

<details>
<summary>Click to expand</summary>

Hidden content here.
- Can include markdown
- And lists
- And code

</details>

Click to expand

Hidden content here. - Can include markdown - And lists

Alerts/Callouts (GitHub)¶

> [!NOTE]
> Useful information.

> [!TIP]
> Helpful advice.

> [!IMPORTANT]
> Key information.

> [!WARNING]
> Potential issues.

> [!CAUTION]
> Serious concerns.

Jekyll-Specific¶

Liquid Variables¶

{% raw %}

{{ page.title }}
{{ site.title }}
{{ content }}

Include Files¶

{% raw %}

{% include note.html content="This is a note." %}

Kramdown Attributes¶

This paragraph has a class.
{: .custom-class}

[Link with attributes](url){: .btn .btn-primary target="_blank"}

![Image with class](/image.jpg){: .img-fluid .rounded}

Table of Contents¶

* TOC
{:toc}

Quick Reference¶

Element	Syntax
Bold	`text`
Italic	`text`
Code	`code`
Link	`[text](url)`
Image	`![alt](url)`
Heading	`# H1` to `###### H6`
List	`- item` or `1. item`
Quote	`> quote`
HR	`---`
Task	`- [x] done`
Table	`\| H1 \| H2 \|`

Resources¶

This is the footnote content. ↩