1 Introduction

This document acts as a template and reference guide for educators using the markdown tool Quarto ¹. It is intended for people wanting to improve the accessibility of lecture notes by publishing in HTML, rather than more traditional formats such as LaTeX PDF.

This Quarto document is built from a qmd file² and converted to HTML. Quarto also allows documents to be published as PDF, MS Word, and ePub.

2 Including Images

Quarto Figures (images) can be added to documents using the format ![caption](filename){fig-alt="alt text"}. If you use assistive technologies such as a screen reader, the image below will be read out as follows: ‘A snail with a yellow and brown spiral patterned shell on the top of a red mushroom.’ Without the inclusion of alt text, the screen reader would read out the file name of the image instead, which is not very helpful and will unfairly disadvantage anyone with a visual impairment.

A snail with a yellow and brown spiral patterned shell on the top of a red mushroom. — Figure 1: A spiral formed by Fibonacci-numbered squares resembles a snail shell—an elegant pattern often used in art and design. Photo by Krzysztof Niewolnyn on Unsplash

3 Quotations

You can make quotations stand out by using the > (greater than symbol) at the beginning of each new line. Should you want to, you can use a single * (asterisk) for formatting the quote in italics and double ** to make the author appear in bold.

“The Fibonacci Sequence turns out to be the key to understanding how nature designs… and is… a part of the same ubiquitous music of the spheres that builds harmony into atoms, molecules, crystals, shells, suns and galaxies and makes the Universe sing.”

Guy Murchie

4 Making Lists

Here are examples of creating lists. The first is an ordered list, and the second is an unordered list.

4.1 Ordered Lists

This photography workflow outlines the key steps a photographer follows, from capturing an image to producing the final output. Each stage builds upon the previous one, demonstrating a clear, sequential process.

Shoot – Capture the image using the best settings for your scene and creative intent.
Transfer – Move the photos from your camera to your computer or cloud storage for backup.
Edit – Adjust exposure, color balance, cropping, and apply creative edits to enhance the image.
Publish – Share the edited image online, whether on social media, websites, or portfolios.
Print – Create physical copies for display, framing, or professional use.

4.2 Unordered Lists

Capturing light for image rendition requires a basic understanding of the fundamentals of the exposure triangle, which is composed of three parameters:

Aperture – Controls the size of the lens opening, affecting depth of field.
Shutter Speed – Determines how long light is exposed to the sensor, influencing motion blur.
ISO – Adjusts sensor sensitivity to light, balancing exposure and noise levels.

5 Maths Equations

When converting LaTeX documents to HTML, mathematical notation is often rendered using MathJax. This ensures that equations are displayed clearly in web browsers and remain accessible to screen readers and other assistive technologies.

5.1 The Fibonacci Sequence

The Fibonacci sequence [@fibonacci1202] is a famous number pattern where each number is the sum of the two before it. It begins like this:

\[ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34... \]

5.2 Recursive Definition

The Fibonacci sequence can be defined using a simple recursive formula (Equation 1):

\[F_0 = 0, F_1 = 1, F_n = F_{n-1} + F_{n-2} \text{for } n \geq 2 \tag{1}\]

5.3 Closed-form Formula (Binet’s Formula)

We can also calculate the $n$th Fibonacci number directly using a closed-form formula (Equation 2), though it’s a bit more complex:

\[F_n = \frac{1}{\sqrt{5}} \left( \phi^n - \left( -\frac{1}{\phi} \right)^n \right) \tag{2}\] where $\phi$ (phi) is the golden ratio:

5.4 The Golden Ratio

As the sequence continues, the ratio between consecutive Fibonacci numbers approaches the golden ratio (Equation 3):

\[\lim_{n \to \infty} \frac{F_{n+1}}{F_n} = \phi \approx 1.618 \tag{3}\] This ratio appears in many areas of nature, design, and photography.

5.5 Matrix Representation

Fibonacci numbers can even be represented using matrices (Equation 4), which is useful for advanced calculations:

\[\begin{bmatrix} 1 & 1 \ 1 & 0 \end{bmatrix}^n \begin{bmatrix} 1 \ 0 \end{bmatrix} \tag{4}\]

This shows that the Fibonacci sequence has many layers, from simple patterns to deeper mathematical structures.

6 Using Tables

The most commonly used markdown table is known as a pipe table³. The “pipes” | (vertical bars) are used to create columns around the header text. To create the header row, you need to add at least three consecutive hyphens --- in each column on the line beneath table headings. You can also set the alignment of each column header by including a colon before :--- (left-aligned), after ---: (right-aligned), or both before and after :---: (center-aligned).

Here’s an example:

Aperture (f-stop)	Shutter Speed	ISO
f/1.4	1/1000 sec	100
f/2.8	1/500 sec	200
f/4	1/250 sec	400
f/5.6	1/125 sec	800
f/8	1/60 sec	1600
f/11	1/30 sec	3200
f/16	1/15 sec	6400

Table 1: In photography, the exposure triangle is often represented through typical values for aperture, shutter speed, and ISO [@photographylife2024].

Note

The values in each row are illustrative and may not correspond to correct exposure in real-life scenarios. The appropriate settings depend on the amount of available light. For example, choosing f/4 and ISO 400 may require a different shutter speed than 1/250th second to achieve proper exposure.

An illustrated equillateral exposure triangle. The left side shows the aperture with f/2.8 at the top and f/22 at the bottom. The right side shows ISO with 3200 at top and 100 at the bottom. The bottom of the triangle shows Shutter Speed with 1/4 of a second on the left and 1/5000 of a second on the right. — Figure 2: An illustration of the exposure triangle, showing the relationship between aperture, shutter speed, and ISO.

7 Colored Boxes

Shaded boxes can be created using the tcolorbox package. Quarto doesn’t directly support tcolorbox. You can achieve similar effects using HTML <div> elements with CSS styling, or using Quarto’s callout blocks. Here’s how you might approach this:

7.1 A Theorem in a Blue Box

Theorem

Let $f$ be a continuous function on a closed interval $[a, b]$. Then $f$ is bounded on $[a, b]$, and there exist points $c, d \in [a, b]$ such that: $f(c) \leq f(x) \leq f(d) \quad \text{for all } x \in [a, b].$

7.2 An Example in a Yellow Box with a Heading Section

Example

Consider the function $f(x) = \sin x$ on the interval $[0, \pi]$. Since sine is continuous on this interval, it is bounded. In fact, \[ \min_{x \in [0, \pi]} \sin x = 0 \quad \text{and} \quad \max_{x \in [0, \pi]} \sin x = 1. \]

8 Code Highlighting

Syntax highlighting in Quarto ⁴ is very easy, simply requiring ``` (three back ticks) to be added above and below the code block.

The following example shows how to create a function that computes the incidence matrix of two generators. The function incmatrix takes two lists of generators as input and returns the incidence matrix. The code is written in Python and uses NumPy for matrix operations.

python import numpy as np

def incmatrix(genl1,genl2): m = len(genl1) n = len(genl2) M = None #to become the incidence matrix VT = np.zeros((n\*m,1), int) #dummy variable

#compute the bitwise xor matrix
M1 = bitxormatrix(genl1)
M2 = np.triu(bitxormatrix(genl2),1) 

for i in range(m-1):
    for j in range(i+1, m):
        [r,c] = np.where(M2 == M1[i,j])
        for k in range(len(r)):
            VT[(i)*n + r[k]] = 1;
            VT[(i)*n + c[k]] = 1;
            VT[(j)*n + r[k]] = 1;
            VT[(j)*n + c[k]] = 1;

            if M is None:
                M = np.copy(VT)
            else:
                M = np.concatenate((M, VT), 1)

            VT = np.zeros((n*m,1), int)

return M

9 Including Videos

Videos can be embedded from YouTube or Vimeo so they appear in the HTML output. They are rendered as hyperlinks in the PDF output. For more information, visit the Chirun LaTeX package documentation [@graham2022chirun].

10 Scientific Charts and Diagrams

Plotting Mathematical Expressions Using a Line Graph

10.1 Plotting Mathematical Expressions Using a Line Graph

```{r} #| fig-width: 8 # Adjusted from 12 for better typical website fit, you can change back #| fig-height: 6 # Adjusted from 8 #| label: fig-parabolas #| fig-cap: “Plot of two parabolas”

ggplot(data.frame(x = -10:10), aes(x)) + geom_function(fun = function(x) x^2 - 2x - 1, aes(color = “x^2 - 2x - 1”)) + # Use aes(color) for legend geom_function(fun = function(x) x^2 + 2x + 1, aes(color = “x^2 + 2x + 1”)) + scale_color_manual(values = c(“x^2 - 2x - 1” = “red”, “x^2 + 2x + 1” = “blue”)) + # Manually set colors labs(x = “ $x$ ”, y = “ $f(x)$ ”, color = “Function”) + # Add legend title theme_minimal() + # A cleaner theme theme(legend.position = “bottom”) # Position legend

10.2 Plotting Mathematical Expressions Using the Mesh Parameter

```{r} #| fig-width: 8 #| fig-height: 6 #| label: fig-mesh #| fig-cap: “Example using the mesh parameter”

plot_ly(z = ~volcano, type = “surface”) %>% layout(title = “Example using the mesh parameter”)

11 References

Footnotes

Quarto is an open-source scientific and technical publishing system often considered as the next generation oof R Markdown.↩︎
Quarto Markdown (qmd) is the file extension of Quarto document.↩︎
A pipe table gets its name from the use of vertical bars (“pipes”) that are used as dividers to create columns.↩︎
Syntax highlighting in Quarto allows code to appear with coloured elements, just like you’d see it in an Integrated Development Environment (IDE) such as Visual Studio Code or PyCharm.↩︎