Elements

SVG

Solutions

This section has several solution blocks that can be controlled dynamically. Users having the solutions:show permission can click the / button in the navbar to show or hide them.

Solution

This solution follows the per-page setting.

Complete solution

This solution has a custom title.

Solution (show)

This solution is always visible.

Solution (expand)

This solution is expanded by default.

Solution

This solution has a different color, and no drop-down.

IFrames

The presentation below is embedded with the iframe directive.

The YouTube video below is embedded with the youtube directive.

Tables

This table is a normal Markdown table and gets styled via the table class. These styles are reset by applying the reset class, then overridden via an embedded stylesheet. Note that the CSS rules for the reset class have specificity (0, 2, x), so the overrides need to have specificity (0, 3, x). This can be achieved e.g. by adding a custom class to identify the table (table-example here), then specify all three classes in the override rules (.table.reset.table-example).

	\(A\)	\(B\)	\(C\)
\(x\)
\(y\)
\(f(x, y)\)

The next table is also a normal Markdown table, but its styles are reset for print media only by applying the reset-print class, then overridden. On screen it looks like a normal table.

	\(A\)	\(B\)	\(C\)
\(x\)
\(y\)
\(f(x, y)\)

Code

Inline code: a <= b and b >= c and c != d

Code block

a = b = c = d = 0
if a <= b and b >= c and c != d:
  print("Boom!")

Code editor

a = b = c = d = 0
if a <= b and b >= c and c != d:
  print("Boom!")