My first post, thanks ChatGPT.

This first post is a small formatting playground. It shows what I can put in future entries about games, code and other experiments. Open the examples below to see how they are written.

Words, links and headings

There is bold text, italic text, crossed-out text and inline code such as std::vector. Links work too: my GitHub or the diagrams further down.

A smaller heading

Use ## for a section and ### for a subsection. The post title at the top is already the main heading.

## A section
### A subsection

**bold** · *italic* · ~~crossed out~~ · `inline code`
[A link](https://github.com/marcus1337)

Lists and checklists

• A short idea
• A useful link
  • A little more detail, indented underneath

1. Make something small.
2. Try it out.
3. Write down what happened.

• Set up the blog
• Try some formatting
• Write the next post

- A bullet
  - A nested bullet

1. First step
2. Next step

- [x] Finished
- [ ] Still to do

Code with syntax highlighting

Put a language name after the opening three backticks. Here is a tiny C++ state example:

enum class State { Idle, Running, Jumping };

State nextState(bool grounded, bool moving) {
    if (!grounded) return State::Jumping;
    return moving ? State::Running : State::Idle;
}

Shell commands work the same way:

python3 scripts/new-post.py "A small experiment"

```cpp
int main() {
    return 0;
}
```

Tables

| Feature | Why use it? |
| :--- | :--- |
| Code | Share a small example |
| Diagram | Explain how parts connect |

Diagrams from text

Mermaid turns a fenced code block into a diagram. For example, this is how a post reaches the site:

flowchart TB
    accTitle: From Markdown to a blog page
    accDescr: A Markdown post is built by Jekyll into a static HTML page, which a browser displays.
    A[Write a Markdown post] --> B[Jekyll builds the site]
    B --> C[Read it in a browser]

It can also describe a simple game state machine:

stateDiagram-v2
    accTitle: A simple game state machine
    accDescr: A character starts idle, begins running, jumps and returns to idle on landing.
    direction TB
    [*] --> Idle
    Idle --> Running: move
    Running --> Jumping: jump
    Jumping --> Idle: land

Open Diagram source below either diagram to copy its text. In a future post, add mermaid: true to the title block at the top of the file, then wrap that text in a code fence labelled mermaid:

---
title: "A small experiment"
mermaid: true
---

```mermaid
flowchart TB
    Idea --> Prototype
    Prototype --> Playtest
```

Images

Images can live in the repository alongside the posts. This small example is an SVG; PNGs, JPEGs and GIFs work too.

![Describe what the image shows](/assets/blog/markdown-demo.svg)

Put the file in assets/blog/ and use a description between the square brackets.

Quotes and footnotes

A little prototype can be enough to make an idea easier to explain.

That is an example quote for this demo. A footnote can hold a small aside without interrupting the paragraph.¹

> A quoted passage or a note.

A sentence with a footnote.[^note]

[^note]: The extra information goes here.

A few HTML extras

Markdown can include small pieces of HTML. For example, Ctrl + F looks like keyboard keys, and this phrase is highlighted.

print("Hello from an expandable section!")

<kbd>Ctrl</kbd> + <kbd>F</kbd>
<mark>A highlighted phrase</mark>

<details markdown="block">
<summary>A short label</summary>

Your extra explanation, with **Markdown** if you want it.

</details>

To make another entry, run python3 scripts/new-post.py "My next post" from the repository root and edit the file it creates. This post can stay here as a reference when I need a formatting example.