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.
This document is partly adapted from this markdown test file
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.
You can mark headers by adding hashes #
in front of the line.
# Heading 1
## Heading 2
### Heading 3
Heading 1
Heading 2
Heading 3
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")
- This is the first list item.
- This is the second list item.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.
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
- Bird
- McHale
- Parish
- Bird
- McHale
- 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
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">
© 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.
To create an inline link, use a set of regular parentheses immediately after the link text’s closing square bracket. Inside the parentheses, put the URL where you want the link to point, along with an optional title for the link, surrounded in quotes. For example:
[This link](http://example.net/) has no title attribute.
[But this one](http://example.net/ "Title of the link!") has.
This link has no title attribute. But this one has.
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
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")
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>
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 , and here’s the Cauchy-Schwarz inequality:
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”
TODO
Inclusion of Google Agenda: Use html code (without style info).
Just a test.
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)
A workaround:
<a href="/pdf/test.pdf" download>Link to a PDF</a>
Link to a PDF