Usage

Markdown

Use a fenced code block with the lilypond (or ly / ily) language tag:

```lilypond
  \version "2.24.0"
  \relative c' {
    c4 d e f | g2 e2 |
  }
```

The block is replaced with an inline image at build time. See LilyPond Syntax for common patterns.

Component

The <LilyPond> component renders notation in any .astro file. Import a .ly or .ily file and pass it to the content prop.

---
import LilyPond from 'astro-lilypond/component';
import bachInvention from '../scores/bach-invention.ly';
---

<LilyPond content={bachInvention} />

The version, format, and crop configured in your integration options apply automatically.

Props

content

Type: string
Required: yes

The result of an imported .ly file. The output is resolved at build time according to the version, format, and crop options configured in your integration.

class

Type: string

Additional class name(s) merged onto the rendered <svg> or <img> element alongside the default lilypond class. See Styling for how to use this for per-instance styles.

style

Type: string

Inline styles applied directly to the rendered element.