Split grammar into header lines and music lines and handle them separately.

[paulrosen]

I think there are so many differences between the header type lines and the music lines that the syntax highlighting should be completely different between the two.

I am just learning about highlight.js so I'm sure this code isn't the most efficient, but it does a pretty good job on some test strings I fed it.

In addition, I have a catch-all rule. If a character isn't handled by a rule it gets hljs-error class.

Also, there weren't any instructions on how to build the dist folders, but they don't seem to be used by the node imports so that doesn't seem to matter.

[paulrosen]

BTW, you can see an example of the output here: https://abcjs-editor-syntax-highlighting.netlify.app/ with my first attempts at a theme.

For convenience I'm dumping the output of the highlighter to the page so you can see how it is being handled.

[NriotHrreion]

The scope property is pre-defined in highlight.js source code. The scopes you just wrote wouldn't be recognized by highlight.js and thus wouldn't be colored on the web page unless you define them manually in css.

The scopes document is here: https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html

I was busy working on my personal project, and sorry for not seeing your PR in time.

[paulrosen]

I'm also just working on this when I get a free moment, so no worries.

I was wondering if we should also have a couple example themes delivered in this package, too, for that reason. I'm experimenting with the look right now and trying to figure out what is useful.

[paulrosen]

This is what I have so far, but I plan to tweak this a lot before I'm ready to release:

/* Header lines */
.hljs-header {
	color: #0B34A8;
}
.hljs-header-content {
	font-weight: bold;
}
.hljs-title {
	font-weight: bold;
}
.hljs-staves {
	background-color: #ffdfe5;
}
.hljs-staves-content {
	font-weight: bold;
}
.hljs-key {
	font-weight: bold;
}

/* Music lines */
.hljs-inline-header {
	background-color: #ffdfe5;
}
.hljs-note {
	border-bottom: 1px solid blue;
	border-radius: 6px;
}
.hljs-chord-symbol {
	color: #107121;
}
.hljs-decoration {
	color: #0f7d8c;
}
.hljs-grace {
	background: #F2F2F2;
}
.hljs-chord {
	background: #FCF2D0;
}
.hljs-bar {
	background: #71f6ff;
}
.hljs-overlay {
	background: #71f6ff;
}
.hljs-error {
	color: #ffffff;
	background: red;
}
.hljs-comment {
	font-style: italic;
	color: #818181;
}
.hljs-slur {
	border-bottom: 2px dotted #aaa;
}

[NriotHrreion]

But the scopes you defined might not be included in other official themes because they are actually not officially provided scopes.
I suggest you use the pre-defined scopes in the highlight.js docs.