Generated Table of Contents by inserting a {{ toc() }} shortcode with a depth of 3:

This shortcode actually just inserts <!-- toc --> which gets replaced by running the preprocess_post(resource=page) macro on it, which calls generate_toc(toc, level, depth) under-the-hood.

Summary

Mark the summary cutoff point by placing <div></div><!-- more --> at the desired location.

Links

Internal links get underlined with orange: Such as this link.

External links get underlined with blue: Such as this link.

Lists

Unordered list:

• First level item no. 1
• First level item no. 2
  • Second level item no. 1
  • Second level item no. 2
    • Third level item no. 1
    • Third level item no. 2
      • Fourth level item no. 1
      • Fourth level item no. 2
  • Second level item no. 3
• First level item no. 3

Ordered list:

1. First level item no. 1
2. First level item no. 2
   1. Second level item no. 1
   2. Second level item no. 2
      1. Third level item no. 1
      2. Third level item no. 2
         1. Fourth level item no. 1
         2. Fourth level item no. 2
3. Second level item no. 3
4. First level item no. 3

Footnotes

Here's a simple footnote,¹ and here's a longer one.²

Indent paragraphs to include them in the footnote.

`{ my code }`

Add as many paragraphs as you like.

Code blocks

Code blocks support the following annotations:

• linenos: Display line numbers column
• hl_lines: Highlight specific lines, e.g. hl_lines=1 3-5 9
• linenostart: Start line number, e.g. linenostart=20
• hide_lines: Hide specific lines, e.g. hide_lines=1-2

It's placed after the language, which will look like this:

```rust,linenos,hl_lines=1 3-5 9
println!("Hello, world!");
```

Examples

Plain, without line numbers:

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  trailingSlash: true,
  experimental: {
    // Statically type links to prevent typos and other errors when using next/link, improving type safety when navigating between pages.
    typedRoutes: true,
  },
};

module.exports = nextConfig;

With line numbers:

1
// @ts-check
2

3
/** @type {import('next').NextConfig} */
4
const nextConfig = {
5
  output: "export",
6
  trailingSlash: true,
7
  experimental: {
8
    // Statically type links to prevent typos and other errors when using next/link, improving type safety when navigating between pages.
9
    typedRoutes: true,
10
  },
11
};
12

13
module.exports = nextConfig;

With line numbers and highlighting:

1
// @ts-check
2

3
/** @type {import('next').NextConfig} */
4
const nextConfig = {
5
  output: "export",
6
  trailingSlash: true,
7
  experimental: {
8
    // Statically type links to prevent typos and other errors when using next/link, improving type safety when navigating between pages.
9
    typedRoutes: true,
10
  },
11
};
12

13
module.exports = nextConfig;

Without line numbers but with highlighting:

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  trailingSlash: true,
  experimental: {
    // Statically type links to prevent typos and other errors when using next/link, improving type safety when navigating between pages.
    typedRoutes: true,
  },
};

module.exports = nextConfig;

Code from files

Loading code from a colocated file, and hiding specific lines:

  trailingSlash: true,
  experimental: {
    // Statically type links to prevent typos and other errors when using next/link, improving type safety when navigating between pages.
    typedRoutes: true,

Inline code

We're using leptos_i18n for localization in Leptos, which supports an API that's very close to the one we used in Next.js. We already pulled in the dependency when we updated our Cargo.toml file earlier, so let's get the rest of it set up.

We'll create a ui-internal/messages/ folder where our locales will live....

Images

Pulling in a colocated image:

Pulling in a colocated image with caption:

codetalk

Showing multiple images:

codetalk logo 1

logo 2

For quick copying, use this one:

{{ images(paths=["logo.png", "logo.png"], captions=["logo1", "logo2"], widths=[400, 400]) }}

Tables

A simple table with a header, defaulting to centered alignment:

A table with different text alignment:

A left-aligned table (uses <left>...</left> HTML tags):

A right-aligned table (uses <right>...</right> HTML tags):

A simple table without header (empty headers hidden with CSS):

This is a clever little trick of convoluted logic (lots of negation!) which checks:

• If there's a thead element
• That do not have th elements
• That are not empty
• Then hide it

thead:not(thead:has(th:not(:empty))) {
  display: none;
}

Quotes

A single line quote:

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet.

And a multi-line quote:

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet.

And it can span multiple lines...

Callouts

A callout:

Headings

H1 (should not be used in posts)

H2 headings get an underline

H3 is slightly smaller

H4 smaller still

H5 smallest heading size

H6 has the same size as H5