Post formatting showcase

This post collects the formatting available for articles and writeups. Open Post formatting showcase in the writing desk to see or copy the Markdown behind each example.

Text and links

Normal paragraphs can include bold text, italic text, bold italic text, and crossed-out text. Use inline code for short values such as GET /api/notes, filenames like notes.json, or commands like pwd.

Links work within the site, like the tools page, or within an article, like the code examples below.

**bold** · *italic* · ***bold italic*** · ~~crossed out~~
`inline code`
[Tools](/tools/)
[Code examples](#code-blocks)

Heading levels

The post title is the level-one heading. Use ## for main sections; these also appear in the article’s table of contents on larger screens. Use smaller headings for subsections.

Level three: a subsection

Use ### to divide a section into smaller topics.

Level four: a specific step

Use #### when a subsection needs its own heading.

Level five: supporting detail

Use ##### for another level of detail.

Level six: a small reference

Use ###### for the deepest heading level.

Lists and checklists

An unordered list:

• Record the request.
• Compare the response.
  • Note the status code.
  • Keep the relevant response fields.
• Summarize the observation.

An ordered list:

1. Open the local lab.
2. Reproduce the behavior.
3. Save the result with enough context to understand it later.

A checklist uses - [x] for completed items and - [ ] for unfinished ones. These boxes show the saved state; readers cannot edit them.

• Add the challenge context.
• Include a code example.
• Add the final screenshots.

Quotes and notes

Use > at the beginning of a line for a blockquote. It can contain emphasis, links, and multiple paragraphs.

Observation: The response changed when the session expired.

The next step is to compare the same request with a fresh session.

Code blocks

Choose Code in the editor, select a language, and paste the snippet. You can also type triple backticks followed by a language name. Published blocks have a Copy button, and long lines scroll horizontally.

Bash / shell

mkdir -p notes/screenshots
printf '%s\n' 'Local lab notes' > notes/README.txt

Python

import json

note = {"title": "Session handling", "status": "draft"}
print(json.dumps(note, indent=2))

HTTP request / response

GET /api/notes/42 HTTP/1.1
Host: lab.example
Accept: application/json

HTTP/1.1 200 OK
Content-Type: application/json

{"id": 42, "title": "Session handling"}

JavaScript

const notes = ["Enumeration", "Session handling"];
const titles = notes.map((title) => title.toLowerCase());
console.log(titles);

JSON

{
  "title": "Session handling",
  "tags": ["web", "lab"],
  "published": false
}

SQL

SELECT title, created_at
FROM notes
WHERE published = true
ORDER BY created_at DESC;

Go

package main

import "fmt"

func main() {
    fmt.Println("Local lab notes")
}

PowerShell

$note = @{ Title = "Session handling"; Status = "Draft" }
$note | ConvertTo-Json

Plain text / command output

Request:  GET /api/notes/42
Expected: 200 OK
Observed: 200 OK
Result:   matches the expected behavior

Tables

Tables can contain inline code, emphasis, and links. Wide tables scroll inside the article on smaller screens.

| Check | Expected response | Result |
| --- | --- | --- |
| Read a public note | `200 OK` | **Pass** |

Images and captions

Use Image, paste a screenshot, or drop an image into the editor. Replace the text in square brackets with a description of the image. Click the image below to enlarge it; press Escape to close it.

This example uses the existing profile picture. Your uploads can be PNG, JPEG, GIF, or WebP.

To add a caption, wrap the image in a figure. Keep the blank lines around the Markdown image:

<figure>

![Describe what the screenshot shows](../../assets/posts/formatting-showcase/profile-example.jpg)

<figcaption>A short explanation of the image.</figcaption>
</figure>

Collapsible sections and spoilers

Use Spoiler in the editor to insert a collapsible section. Change the summary to describe what is hidden. It can contain the same paragraphs, lists, images, and code as the rest of the article.

{"flag": "flag{formatting_example}"}

<details>
<summary>Show the solution</summary>

Put the explanation here. **Markdown works inside.**

</details>

Dividers

Put --- on its own line, with a blank line before and after it, to separate two parts of a post:

This paragraph starts after the divider.

Using this as a reference

Start a new post in the writing desk and copy whichever examples you need. The toolbar provides shortcuts for headings, bold text, links, images, code, tables, and spoilers. Type the other Markdown formats directly in the editor.

Save a draft while working. When it is ready, check Ready for the next site build, save, and deploy the site to publish it.