ACE ChordPro Extension
ChordPro song editing for the Ace editor: syntax highlighting, snippets and chord autocomplete. Try it below; this page loads nothing but the published bundle, dist/ace-chordpro.min.js.
{title: My Little Grass Shack in Kealakekua}
{artist: B.Cogswell, T.Harrison and J.Noble (1933)}
# Lines starting with # are notes to yourself; they're never printed.
{comment: Verse 1}
I want to go [G]back to my little grass shack
In Kealakekua, [A7]Hawaii
I want to [D7]be with all the kanes and wahines
That I used to [G]know... so long ago
# Try it: on a blank line type "t" then press Tab for a snippet,
# or press Ctrl+Space to insert a chord this song already uses.
Things to try
- Chords in
[brackets], directives in{braces}and# noteseach get their own colour. - On a blank line, type
tand press Tab to expand a snippet. - Press Ctrl + Space to pick from the chords already in the song.
Use it on your page
npm install @ukegeeks/ace-chordpro-extension
<script src="node_modules/@ukegeeks/ace-chordpro-extension/dist/ace-chordpro.min.js"></script>
<script>
const editor = ace.edit('songEditor');
editor.session.setMode('ace/mode/chordpro');
</script>