Wintersong - Markdown

# Markdown reference

## Headings

    # This is H1, the title of the page.

    ## This is H2, for page sections.

    ### This is H3, for subsections.

    #### H4 through H6 are also possible, but should be used sparingly.

In addition to the standard headings, there is a special `subtitle` heading that's used to create a stylized, short phrase under the first heading. This is useful for product tag lines:

Analog-inspired parameterized drum synthesizer

    Analog-inspired parameterized drum synthesizer
    {: .subtitle}

### This is H3

#### This is H4

##### This is H5

###### This is H6

## Inline text

Inline text can be formatted in several ways, such as bold, italic, bold and italic, strikethrough, `monospace`, superscript, subscript, mark, insert, and `Ctrl`+`Alt`+`Del`.

    You can use **bold**, _italic_, **_bold and italic_**, ~~strikethrough~~, and `monospace`.

## Links

You can create links to internal pages and external sites.

You can also use named links when you reference the same link multiple times.

Links are automatically created if you reference a full, valid URL, for example, winterbloom.com.

You can also create links to headings in the page. Each heading has a permalink styled as a `#` next to it.

    You can create links to [internal pages](/bia/) and
    [external sites](https://noiseengineering.us).

    You can also use [named links][winterbloom] when you
    reference the same link [multiple][winterbloom] [times]
    [winterbloom].

    [winterbloom]: https://winterbloom.com

    Links are automatically created if you reference a
    full, valid URL, for example, https://winterbloom.com.

    You can also create [links to headings in the page](#page).
    Each heading has a permalink styled as a `#` next to it.

## Lists

Lists look like this:

- Lists can be
- created unordered
- or ordered
  1. They can also be nested
  2. multiple times
     - and different styles can
     - be mixed as
  3. needed

    -   Lists can be
    -   created unordered
    -   or ordered
        1. They can also be nested
        1. multiple times
            - and different styles can
            - be mixed as
        1. needed

## Blockquotes

This is a blockquote:

> You can format a paragraph as a blockquote, and even extend it over multiple lines. You can use text formatting like bold and italic as well.

> Blockquotes can also span multiple paragraphs and such.

    > You can format a paragraph as a blockquote,
    > and even extend it over multiple lines.
    > You can use text formatting like **bold** and _italic_
    > as well.

## Code

When referencing code in the middle of a paragraph, use `this syntax`.

    For larger, multi-line blocks of
    code, you use the fenced block
    syntax.

    When referencing code in the middle of a paragraph, use `this syntax`.

    ```
    For larger, multi-line blocks of
    code, you use the fenced block
    syntax.
    ```

## Math

You can generate formatted math formulae by using LaTeX markup:

\[ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]

    $$
    x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
    $$

You can also use formatted math inline with paragraph text, for example:

The slope-intercept form of a straight line is \(y=mx+b\), where \(m\) is the slope (\(rise/run\)) and \(b\) is the y-intercept.

    The slope-intercept form of a straight line is \(y=mx+b\), where \(m\) is the slope (\(rise/run\)) and \(b\) is the y-intercept.

This functionality is provided through the Arithmatex extension and MathJax. MathJax is a powerful math markup renderer with accessibility features.

## Tables

Reference | Value
--- | ---
C1, C2 | 10 uF
C3 - C10 | 100 nF
R1, R2 | 100 kΩ
R3 | 10 kΩ

    | Reference | Value  |
    | --------- | ------ |
    | C1, C2    | 10 uF  |
    | C3 - C10  | 100 nF |
    | R1, R2    | 100 kΩ |
    | R3        | 10 kΩ  |

## Admonitions

Admonitions are a Markdown extension that add stylized callouts.

Note

Admonitions allow you to draw attention to specific text.

Info

There are different types of admonitions.

Tip

There are different types of admonitions.

Success

There are different types of admonitions.

Question

There are different types of admonitions.

Warning

There are different types of admonitions.

Failure

There are different types of admonitions.

Danger

There are different types of admonitions.

Bug

There are different types of admonitions.

Example

There are different types of admonitions.

Quote

There are different types of admonitions.

Fairy

There are different types of admonitions.

Admonition titles

You can set the title of an admonition if you don't want to use the generic title.

Inline admonitions

This is an inline admonition

Admonitions can be inlined next to content, if desired. This is just filler text to give it something to wrap around. You can ignore the rest of this paragraph. Seriously. I mean it!

Example source:

    !!! note
        Admonitions allow you to draw attention to specific text.

    !!! warning
        There are two different styles of admonitions: `note` and `warning`. More can be added by modifying the theme.

    !!! note "Admonition titles"
        You can set the title of an admonition if you don't want t0 use the generic title.

## Definition lists

Definition lists are a Markdown extension that's useful for defining terms or creating a legend.

Pitch
  The pitch knob and CV input adjusts the pitch of the fundamental oscillator. This is a `1 V / octave` standard input. The knob sums with the CV input.
Decay
  The decay knob and CV input adjust the decay for all oscillators. The knob offsets the CV input.

    Pitch
    : The pitch knob and CV input adjusts the pitch of the fundamental oscillator.
    This is a `1 V / octave` standard input. The knob sums with the CV input.

    Decay
    : The decay knob and CV input adjust the decay for all oscillators. The knob offsets the CV input.

## Keys

The keys extension adds syntax to format text using the <kbd> element. It's similar to inline code formatting, but is specifically useful for references physical inputs, outputs, knob, etc.

For example: Each oscillator has an individual envelope that is controlled by the `Attack`, `Decay`, and `Harm` controls. The noise envelope is also affected by the `Attack` knob.

    For example: Each oscillator has an individual envelope that is controlled by
    the ++"Attack"++, ++"Decay"++, and ++"Harm"++ controls. The noise envelope is
    also affected by the ++"Attack"++ knob.

Keys can of course be used for keyboard keys, and there's special cases for those that add helpful icons:

- `Alt`, `Left Alt`, `Right Alt`
- `Cmd`, `Left Command`, `Right Command`
- `Ctrl`, `Left Ctrl`, `Right Ctrl`
- `Meta`, `Left Meta`, `Right Meta`
- `Option`, `Left Option`, `Right Option`
- `Shift`, `Left Shift`, `Right Shift`
- `Super`, `Left Super`, `Right Super`
- `Win`, `Left Win`, `Right Win`
- `Left`, `Right`, `Up`, `Down`
- `Esc`, `Caps Lock`, `Tab`, `Backspace`, `Back Tab`, `Enter`, `Num Enter`
- `Menu`, `Print Screen`, `Clear`, `Eject`
- `Ins`, `Del`, `Home`, `End`, `Page Up`, `Page Down`

And of course, key combinations are styled nicely, like `Ctrl`+`Alt`+`Del` and `Cmd`+`V`.

## Abbreviations

You can use abbreviations (HTML tag `<abbr>`). First, create an abbreviation definition like this:

    *[HTML]: Hyper Text Markup Language
    *[W3C]:  World Wide Web Consortium

then, elsewhere in the document, write text such as:

    The HTML specification is maintained by the W3C.

Any instace of the abbreviations will automatically get rendered as such, for example:

The HTML specification is maintained by the W3C.

Abbreviations are case-sensitive, and will span on multiple words when defined as such. An abbreviation may also have an empty definition, in which case `<abbr>` tags will be added in the text but the title attribute will be omitted. The abbreviation definitions can be anywhere in the document.

## Footnotes

Footnotes work mostly like reference-style links, where you use a marker in the text that will become a superscript link, and a footnote definition:

    That's some text[^1] with a footnote.

    [^1]: This is the footnote.

> That's some text1 with a footnote.

You can place the definition wherever, but they'll all end up at the bottom of the document.

## Images

Standard markdown images are rendered with nice spacing:

    ![An example image](images/example.webp)

But there's a few more tricks. You can pull an image to left or right of a body of text. For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    ![An image pulled to the right](images/example.webp){: align=right }

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod ...

You can also control the size of the images:

    ![small](images/example.webp){: .small }
    ![quarter](images/example.webp){: .quarter }
    ![half](images/example.webp){: .half }

Finally, the theme automatically inverts illustrations (`.svg`s) when dark mode is used. Toggle dark mode on and off to see the effect on the image below:

    ![Inverted in dark mode](images/interface-cutoff-formula.svg)

You can prevent this by using `.no-invert`:

    ![Not inverted in dark mode](images/interface-cutoff-formula.svg){: .no-invert }

1. This is the footnote. ↩