Markdown Test Page

Authors:

Geoffrey Hunter

Published On:

Sep 13, 2004

Last Updated:

Sep 11, 2024

Is the breadcrumb working above ^^^ ?

The author should be listed above^^^.

There should be a TOC either above (narrow screens) or in the right sidebar (wide screen).

Bold, italics.

Page Title

Aliases

Click to go to /test/alias1/, and /test/alias2/ which should both redirect back to this page.

/test/alias3/ should redirect to the relative test page.

Heading (h2) (should be a number on left)

Heading (h3)

Equations

Some display math with a reference:

f(x) = \frac{2}{3}

Some inline math. $f(x) = \frac{2}{3}$ . More normal text.

An equation with \begin{equation}, which should be automatically numbered:

\begin{equation} \int_0^\infty \frac{x^3}{e^x-1}\,dx = \frac{\pi^4}{15} \end{equation}

To align equations we can use:

\begin{align*} A &= B\\ &= C\\ &= D + 23 \end{align*}

These should be \small and \tiny equations:

\begin{align*} \small y=x \\ \tiny y=x \end{align*}

Should have some descriptive text:

\begin{align*} y &= x && \text{Because $y=x$, duh.} \\ &= z && \text{Replacing $x$ with $z$.} \end{align*}

Below is an equation with two lines. The first line should not be numbered, the second one should be.

Following should say “Equation X” and link to the second line below: This is a placeholder for the reference: eqn-w-eq-y

\begin{align} w &= x \\ &= y \htmlId{eqn-w-eq-y}{} \\ &= z \nonumber \\ \end{align}

Here should be three references to the three lines below:

This is a placeholder for the reference: eqn-a-x
This is a placeholder for the reference: eqn-a-y
This is a placeholder for the reference: eqn-a-z

\begin{align} a &= x \htmlId{eqn-a-x}{} \\ &= y \htmlId{eqn-a-y}{} \\ &= z \htmlId{eqn-a-z}{} \\ \end{align}

None of the equations should be numbered (but still should be aligned):

\begin{align*} y &= x \\ &= z \end{align*}

Custom Latex macros:

This should be bold: $\b{x}$
This should be bold and have a hat: $\bhat{x}$

Really long equation to make sure it doesn’t exceed 100% of the page width:

\begin{align*} y &= lorum ipsum dolor sit amet, lorum ipsum dolor sit amet, lorum ipsum dolor sit amet, lorum ipsum dolor sit amet, lorum ipsum dolor sit amet, lorum ipsum dolor sit amet, lorum ipsum dolor sit amet, \end{align*}

Paragraph below long equation.

We define an display an expression using \gdef in the block below:

\begin{align} \gdef\myExpr{x^2 + y^2 = z^2} \myExpr \end{align}

And you should be able to see the expression in other equation blocks like the one below:

\begin{align} \myExpr \end{align}

Dividers

A divider below:

Tables

Simple Markdown Table

A simple markdown table:

Heading 1	Heading 2
abc	def
ghi	jkl

HTML Table with Caption

This is a placeholder for the reference: tbl-test-table is an HTML table with a caption. The caption should be below the table.

This is a table caption. There should be a reference at the end of this sentence¹.
Heading 1	Heading 2
abcdefghi	jklmnopqr

Table Component with JS Data

This is a placeholder for the reference: tbl-astro-table-component-with-js-data is a table using the Table component and the data provided from a Javascript object.

A table using the `Table` component and the data provided from a Javascript object. There should be a reference at the end of this sentence¹.
Column 1	Column 2	Column 3	Column 4	Column 5
Row 1, Column 1	Row 1, Column 2	Row 1, Column 3	Row 1, Column 4	Row 1, Column 5
Row 2, Column 1	Row 2, Column 2	Row 2, Column 3	Row 2, Column 4	Row 2, Column 5
Row 3, Column 1	Row 3, Column 2	Row 3, Column 3	Row 3, Column 4	Row 3, Column 5
Row 4, Column 1	Row 4, Column 2	Row 4, Column 3	Row 4, Column 4	Row 4, Column 5
Row 5, Column 1	Row 5, Column 2	Row 5, Column 3	Row 5, Column 4	Row 5, Column 5

Table Component with Transposed Data

This is a placeholder for the reference: astro-table-component-with-js-data-transposed is a table using the Table component and the data provided from a Javascript object. The data is transposed, so the table is rotated 90 degrees.

A table using the `Table` component and the data provided from a Javascript object. There should be a reference at the end of this sentence¹.
Metric	2020	2021	2022	2023
Num. Page Visits	5	10	15	20
Num. Sessions	2	4	6	8
Bounce Rate	90%	80%	70%	60%
Avg. Session Duration	10 min	20 min	30 min	40 min

A really wide table, which should have a horizontal scroll bar:

Heading 1	Heading 2
0000000000000000000000000000000000000000000000000000000	11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

Images

Image from Relative _assets/ Directory

This is a placeholder for the reference: cartoon-ninja is an image which is stored with this test page in a relative _assets/ directory.

This should be an clickable image of the logo. Bold text. An equation:

x^2

. There should be a footnote number at the end of this sentence².

Image from Public Directory

Link to an image which is in the public directory is below:

A larger test image. Make the screen width small and make sure this image does not exceed 100% page width. Make sure this URL wraps: http://www.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.a.really.long.url.

Wide Image

A wide image to make sure it doesn’t exceed the page width:

A larger test image. Make the screen width small and make sure this image does not exceed 100% page width.

Static Import Image

A static import image:

This image is imported statically.

Floating Image

This image should be floating to the right of text.

An image with float=“right”. This should be floating to the right of the text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla justo ac erat lacinia, non porta nibh commodo. Suspendisse velit orci, elementum nec lectus et, dapibus pharetra sapien. Aliquam erat volutpat. Suspendisse vitae augue vel urna vulputate sodales sed rhoncus ante. Phasellus ultrices lacus sit amet neque scelerisque, ut fermentum elit hendrerit. Morbi sit amet purus massa. Ut hendrerit orci ut commodo vestibulum. Sed velit orci, dignissim eu lacus vitae, consequat iaculis dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis cursus justo, in sollicitudin risus.

Nunc blandit facilisis ligula. Fusce ac aliquam nunc, vitae vehicula massa. Quisque massa augue, mattis ut laoreet ultrices, consequat et dui. Mauris fringilla velit sit amet nulla egestas cursus. Fusce gravida lectus vitae nibh suscipit, vitae efficitur ipsum finibus. Quisque ac fringilla nibh. Vivamus auctor posuere risus ut suscipit. Phasellus laoreet rutrum justo quis hendrerit.

Image with Red Border Glow

This image should have a red glowing outline.

Image with No Caption

This is a placeholder for the reference: fig-wikipedia-colour-test-image below should have no caption. The “Figure X” link at the start of this paragraph should still work, you just won’t be able to see the figure number below the image.

Asides

Types

Other Features

Below should be a worked example. It should be an aside with info inside it. There should be numbered steps, and there should be equations in some of the steps.

Design Procedure:

Decide on the program current, $I_P$ . This will also be the current through the load. We’ll use this value later! For this example we’ll choose $1mA$ .
Find the voltage across $R_1$ , nothing that $Q_1$ has a diode voltage drop of $0.7V$ from emitter to base (with the emitter tied to $V_{CC}$ ), at that the base and collector of $Q_1$ are tied together and hence at the same voltage:
$\begin{align*} V_{R1} &= 12V - 0.7V \nonumber \\ &= 11.3V \end{align*}$
Set the resistance of $R_1$ using Ohm’s Law:
$\begin{align*} R_1 &= \frac{V_{R1}}{I_P} \nonumber \\ &= \frac{11.3V}{1mA} \nonumber \\ &= 11.3k\Omega \end{align*}$
All done!

Code

Some inline code. x[2] = 3. More text.

Some block code that shouldn’t have scroll bars, but should have a title and line numbers:

x[3] = 4;
int y = x;
if (y == 4) {
  printf("Hello, world!");
}

Some block code that should have an x-axis scroll bar:

a long line of text a long line of text a long line of text a long line of text a long line of text a long line of text lorem dipsum lorem dipsum lorem dipsum lorem dipsum lorem dipsum lorem dipsum lorem dipsum lorem dipsum
int y = x;

Footnotes

This is a footnote².

This is another footnote⁴.

Links

External link

Lists

These bullet points should be close together:

Here
is a list
of a few elements.

These bullet points should be spaced out:

Here
is a list
of a few elements.

There should be a numbered list below:

Here
is a list
of a few elements.

Other

References, authors, related content and tags sections should be below (in that order).

Application note³.
Video reference⁵.

Lots Of Headings So TOC Overflows

This is a reference used by the tables. ↩ ↩² ↩³
The footnote text. ↩ ↩²
Texas Instruments (2020, Dec). Current Mode Control in Switching Power Supplies [Application Note]. Retrieved 2023-06-18, from https://www.ti.com/lit/an/sboa187e/sboa187e.pdf. ↩ ↩²
Another footnote ↩
University of Colorado Bolder (2020, Aug 7). Introduction to Peak Current Mode Control [Video]. YouTube. Retrieved 2023-06-18, from https://www.youtube.com/watch?v=3tTSMDEyVKc. ↩