Skip to content

Markdown Usage

Once you’ve installed astro-lilypond, you can write LilyPond code inside of any Markdown file. Use a fenced code block (triple backticks) with the lilypond, ly, or ily language tag:

```lilypond
\relative c' {
c8 d e f g a b c~ |
c1\fermata \bar "|."
}
```

The above text will be replaced with this image on your webpage:

The markdown-based approach is great for small musical examples and excerpts which you want to write alongside prose. You can write your text, compose some music, and then switch back to text without leaving the file!

For longer musical examples, you may want to use the component instead.

All markdown blocks have image dimensions cropped by default. If you prefer to display full pages with margins, set defaults.crop to false in your config.

Rendered scores get an alt attribute so they’re accessible to screen readers.

By default, alt text is derived automatically from the title and composer fields in the score’s \header block:

```lilypond
\header {
title = "Sonata No. 14"
composer = "Ludwig van Beethoven"
}
```

This produces alt="Sonata No. 14, by Ludwig van Beethoven". If only one of title/composer is present, alt text falls back to just the title, or "Sheet music by {composer}". With neither, alt text is left empty (which marks the image as decorative, excluding it from screen readers).

Override the automatic alt text by setting alt="..." after the language tag in your fenced code block:

```lilypond alt="Moonlight Sonata"
\header {
title = "Sonata No. 14"
composer = "Ludwig van Beethoven"
}
```