ChordMark

Installation

yarn add chord-mark chord-mark-themes

Usage

import { parseSong, renderSong } from 'chord-mark/lib/chord-mark.js';

const song = 'C.. G..\n' + 'When I _find myself in _times of trouble';

const parsed = parseSong(song);
const rendered = renderSong(parsed);

ChordMark's default renderer produces a string containing an HTML markup.

<div class="cmSong">
	<p class="cmLine">
		<span class="cmChordLine"
			><span class="cmChordLineOffset"> </span
			><span class="cmBarSeparator">|</span
			><span class="cmChordSymbol">C</span>
			<span class="cmChordSymbol">G</span>
			<span class="cmBarSeparator">|</span></span
		>
	</p>
	<p class="cmLine">
		<span class="cmLyricLine">When I find myself in times of trouble</span>
	</p>
</div>

Configuration

The renderer function can be configured. Until proper documentation is available, the list of parameters can be checked here: https://github.com/no-chris/chord-mark/blob/master/packages/chord-mark/src/renderer/components/renderSong.js#L27

Documentation

Check the User Guide.

CSS Classes

By default, ChordMark does not come with any CSS styling. You can either use the chord-mark-themes module or design your own themes. The following list of CSS classes are available:

• cmSong
• cmSection
• cmSection-xxx, where xxx is the section name
• cmLine
• cmLine--isFromAutoRepeatChords
• cmLine--isFromChordLineRepeater
• cmLine--isFromSectionCopy
• cmLine--isFromSectionMultiply
• cmChordLine
• cmChordLineOffset
• cmBarSeparator
• cmChordSymbol
• cmChordDuration
• cmEmptyLine
• cmLyricLine
• cmSectionLabel
• cmSectionMultiplier
• cmTimeSignature
• cmSubBeatGroupOpener
• cmSubBeatGroupCloser

Breaking changes

While I don't foresee the public API to change drastically in the future, it is to be considered unstable until v1.0.0 is published. Breaking changes might happen until then and will be documented in the release notes.