Content formatting reference

This page collects examples for checking our content styles. Compare them in light and dark mode, on a narrow screen and on a wide screen.

Text and headings

A regular paragraph should have comfortable line spacing. Bold text, italic text, bold italic text, strikethrough and inline code should remain easy to distinguish.

A second paragraph checks the space between paragraphs. Here is an external link to Astro, an internal link to the roadmap, and a link to the mathematics section.

A deliberate line break ends here.
This continues on the next line within the same paragraph.

Third-level heading

A short paragraph under a subsection.

Fourth-level heading with inline code

A short paragraph under a smaller subsection.

Fifth-level heading

A short paragraph under a fifth-level heading.

Sixth-level heading

A short paragraph under the smallest heading. The page title supplies the first-level heading.

Lists

• Physical quantities
  • Length and time
  • Mass and temperature
• Motion
  • Position and displacement
  • Velocity and acceleration

1. Choose a system.
2. Identify the quantities.
   1. Record known values.
   2. Identify the unknown value.
3. Check the units.

• Read the definitions.
• Check the examples.
  • Constant velocity
  • Constant acceleration
• Revisit the assumptions.

Definitions

Use Definition for a mathematical definition. Its optional title names the concept; the content supports Markdown and mathematics.

<Definition title="Unit vector">
 
A **unit vector** is a vector whose norm is one:
 
$$
\lVert\mathbf{u}\rVert=1.
$$
 
</Definition>

Quotes and callouts

A quoted paragraph can contain emphasis, a link, and inline mathematics such as $v = d/t$.

A second paragraph checks spacing within the quotation.

• First quoted item

• Second quoted item

A nested quotation checks indentation.

Callout colours and icons

Use color to choose a palette colour and icon to choose an SVG from src/assets/icons, without its .svg extension. Omitting them gives a neutral callout with the information icon.

<Callout title="Explore further" color="purple" icon="arrow-up-right">
 
Follow this connection when you are ready.
 
</Callout>

Tables

Code

Inline code: distance = speed * time.

speed = 2
time = 3
distance = speed * time
print(f"Distance: {distance} m")

const speed = 2;
const time = 3;
console.log(speed * time);

Plain text without syntax highlighting.
A long line checks horizontal scrolling: distance_covered_during_the_first_interval + distance_covered_during_the_second_interval + distance_covered_during_the_third_interval

PASS Equation rendered
CHECK Narrow-screen spacing

Mathematics

Inline mathematics

Simple notation should sit comfortably in a sentence: $x$, $0$, $x^2$, $a_n$, $\alpha$, and $\mathbf{v}$.

A fraction $\dfrac{a+b}{c}$ and a root $\sqrt{x^2+y^2}$ check different inline heights.

Longer expressions use display blocks so they do not crowd a paragraph:

A speed of $2\,\mathrm{m/s}$ checks text inside mathematics.

Display mathematics

This unnumbered equation checks the default display layout:

Numbered equations and references

The reference to equation (2) points forward. References should resolve regardless of where they appear in this post.

Equation (1) relates distance, speed and time for constant speed.

Compare equations (1) and (2). Repeated references should retain the same numbers.

Labels and references use our custom plugin. Labels go inside display math; references go directly in prose. This code block shows the source literally:

$$
d = vt
\label{sample-distance}
$$
 
See equation \eqref(sample-distance).

Aligned equations

Equation (3) gives two relations in one numbered block.

A derivation with one number

Use equation with split when several lines describe one derivation. The whole block receives one number.

Equation (4) is the work–energy theorem for a particle of constant mass.

Aligned equations with separate numbers

Use align to number each row. Place a label on each row you want to reference. These numbers continue from the earlier equations in this post.

Equation (5) gives velocity, equation (6) gives position, and equation (7) eliminates time. Each link points to its own row.

$$
\begin{align}
v(t) &= v_0 + at \label{velocity} \\
x(t) &= x_0 + v_0t + \dfrac{1}{2}at^2 \label{position}
\end{align}
$$
 
See equations \eqref(velocity) and \eqref(position).

In prose, use \eqref(label) with parentheses so MDX does not treat braces as JavaScript. Our plugin resolves the labels before KaTeX renders the mathematics. Missing or duplicate labels stop the build.

Skipping a row number

Use \notag or \nonumber to skip a row. Use align* for an unnumbered group, or aligned for several lines sharing one label.

Only equation (8) receives a number in this group.

Matrices and piecewise functions

Sums, operators and accents

Mathematics in other content

• A list item with $\Delta x = x_2-x_1$.
• A checklist can include a mathematical expression:
  • Evaluate $\int_0^1 x^2\,\mathrm{d}x$.

The expression $\dfrac{\mathrm{d}x}{\mathrm{d}t}$ should keep its mathematical formatting inside a quotation.

Wide equation

This deliberately long equation checks horizontal overflow on small screens:

Images and video

The paragraph after the image checks the return to regular text spacing.

The video should keep its proportions as the page narrows and load lazily.

Footnotes

This sentence has a short footnote.¹ This one has a longer footnote.² The short footnote is referenced again here.¹

Definitions and disclosure

This definition list uses explicit MDX markup, rather than unsupported Markdown definition-list syntax.

Displacement

The change in position between two points in time.

Velocity

The rate of change of position with time.

Separators and characters

A paragraph before a horizontal rule.

A paragraph after the rule. Unicode examples: α β γ, ©, →, ±, ×, and °. Emoji examples: 🔬 🧮 💡 ✅ ❌ ❤️.