25 Jun 2023Last modified 30 Sep 2024

Does it work?An elaborate test file

Beauty is in the eye of the beholder
By
Bas
Bas Cornelissen
Henkjan
Henkjan Honing
Marcel
Marcel Vélez Vásquez
andAnother Person

This document explains the markdown syntax that can be used on this website. At the same time, it serves as a test to check whether it is rendered correctly.

  • My field: a value
  • Another field: another value

This document is partly adapted from this markdown test file

Paragraphs and breaks

A paragraph is simply one or more consecutive lines of text, separated by one or more blank lines. (A blank line is any line that looks like a blank line — a line containing nothing but spaces or tabs is considered blank.) Markdown, in other words, supports “hard-wrapped” text paragraphs: line breaks are not transformed into <br /> tags. When you do want to insert a <br /> break tag using Markdown, you end a line with two or more spaces, then type return. Normal paragraphs should not be indented with spaces or tabs.

This is a paragraph
that has no line breaks.

This is another paragraph  
but this one has a line break:
there are two spaces at the end of the first line.

This is a paragraph that has no line breaks.

This is a second paragraph
with a line break: there are two spaces at the end of the first line.

Headers

You can mark headers by adding hashes # in front of the line.

# Heading 1

## Heading 2

### Heading 3

Heading 1

Heading 2

Heading 3

Blockquotes

Markdown uses email-style > characters for blockquoting. If you’re familiar with quoting passages of text in an email message, then you know how to create a blockquote in Markdown. Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by adding additional levels of >. Blockquotes can also contain other Markdown elements, including headers, lists, and code blocks:

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> > This is nested blockquote. It can also contain other markdown
> > elements: `return shell_exec("echo $input | $markdown_script")`
>
> 1.  This is the first list item.
> 2.  This is the second list item.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

This is nested blockquote. It can also contain other markdown elements: return shell_exec("echo $input | $markdown_script")

  1. This is the first list item.
  2. This is the second list item.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Lists

Markdown supports ordered (numbered) and unordered (bulleted) lists. You can use hyphens (and some other characters) as list markers in bullet lists:

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
  viverra nec, fringilla in, laoreet vitae, risus.

  A second paragraph. Vestibulum enim wisi, viverra nec,
  vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
  sit amet velit.

- Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
  Suspendisse id sem consectetuer libero luctus adipiscing.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

    A second paragraph. Vestibulum enim wisi, viverra nec, vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

  • Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Numbered lists are marked by dotted numbers: 1. It’s important to note that the actual numbers you use to mark the list have no effect on the HTML output Markdown produces. The HTML Markdown produces from the above list is:

1.  Bird
2.  McHale
1.  Parish

3.  Bird
1.  McHale
1.  Parish
  1. Bird
  2. McHale
  3. Parish
  1. Bird
  2. McHale
  3. Parish

Here are some more nested lists:

  • This is a list item with two paragraphs.

    This is the second paragraph in the list item. You’re only required to indent the first line. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

  • Another item in the same list.

    This is a blockquote inside a list item.

  • A list item with a code block:

    code goes here
    

Code blocks

Pre-formatted code blocks are used for writing about programming or markup source code. Rather than forming normal paragraphs, the lines of a code block are interpreted literally. Markdown wraps a code block in both <pre> and <code> tags. To produce a code block in Markdown, wrap the text by three ticks (see source code)

tell application "Foo"
beep
end tell

Within a code block, ampersands (&) and angle brackets (< and >) are automatically converted into HTML entities. This makes it very easy to include example HTML source code using Markdown – just paste it and indent it, and Markdown will handle the hassle of encoding the ampersands and angle brackets:

<div class="footer">
    &copy; 2004 Foo Corporation
</div>

To indicate a span of code, wrap it with backtick quotes (`). Unlike a pre-formatted code block, a code span indicates code within a normal paragraph. For example:

Use the `printf()` function.

Use the printf() function.

Emphasis

Markdown treats asterisks (*) and underscores (_) as indicators of emphasis. Text wrapped with one * or _ will be wrapped with an HTML <em> tag; double *’s or _’s will be wrapped with an HTML <strong> tag. E.g., this input:

- *single asterisks*
- _single underscores_
- **double asterisks**
- __double underscores__
  • single asterisks
  • single underscores
  • double asterisks
  • double underscores

Images

You can include images using the syntax ![alt text](url "caption"). Note that the URL has to be the path relative to the current file (this is different for the featured image preamble). For example:

![A group picture](../../media/group_pictures/2022-11-mcg-group-picture.jpg "A group picture of the Music Cognition Group in 2022")
A group picture
A group picture of the Music Cognition Group in 2022

If you want to limit the width of the image, the easiest solution is to wrap it in a <div> element and set the maxWidth as follows:

<div style={{maxWidth: 200}}>
  ![Group picture](../../media/group_pictures/2022-11-mcg-group-picture.jpg "A group picture of the Music Cognition Group in 2022")
</div>
Group picutre
A group picture of the Music Cognition Group in 2022

Mathematics

We use KaTeX to support LaTeX-like mathematics in markdown files:

Here is some inline mathematics $\sum_{i=1}^{10} k_i^3$,
and here's the Cauchy-Schwarz inequality:

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

Here is some inline mathematics i=110ki3\sum_{i=1}^{10} k_i^3, and here’s the Cauchy-Schwarz inequality:

(k=1nakbk)2(k=1nak2)(k=1nbk2)\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)

Typography

We use remark-smartypants to fix some common typographical issues:

- en-dash: --
- em-dash: ---
- ellipsis: ...
- single quotes: 'hi'
- double quotes: "hi"
  • en-dash: –
  • em-dash: —
  • ellipsis: …
  • single quotes: ‘hi’
  • double quotes: “hi”

Videos

TODO

Agenda

Inclusion of Google Agenda: Use html code (without style info).

A final headers

Just a test.

Static files

All files in the /static directory are copied to the root of the project. For example, a PDF static/pdf/test.pdf will end up at https://www.mcg.uva.nl/pdf/test.pdf. However markdown links appear not to work entirely as expected (or perhaps only in production?):

[link to a PDF](/pdf/test.pdf)

link to a PDF

A workaround:

<a href="/pdf/test.pdf" download>Link to a PDF</a>

Link to a PDF
To top