diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs
index 4fe51ec93..180ff103e 100644
--- a/packages/codemirror/codemirror.mjs
+++ b/packages/codemirror/codemirror.mjs
@@ -13,7 +13,7 @@ import {
lineNumbers,
drawSelection,
} from '@codemirror/view';
-import { Pattern, repl } from '@strudel/core';
+import { repl, registerControl } from '@strudel/core';
import { Drawer, cleanupDraw } from '@strudel/draw';
import { isAutoCompletionEnabled } from './autocomplete.mjs';
import { isTooltipEnabled } from './tooltip.mjs';
@@ -354,3 +354,12 @@ function s4() {
.toString(16)
.substring(1);
}
+
+/**
+ * Overrides the css of highlighted events. Make sure to use single quotes!
+ * @name markcss
+ * @example
+ * note("c a f e")
+ * .markcss('text-decoration:underline')
+ */
+export const markcss = registerControl('markcss');
diff --git a/packages/codemirror/highlight.mjs b/packages/codemirror/highlight.mjs
index 2f8cb38d3..d333986cc 100644
--- a/packages/codemirror/highlight.mjs
+++ b/packages/codemirror/highlight.mjs
@@ -93,6 +93,7 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
if (haps.has(id)) {
const hap = haps.get(id);
const color = hap.value?.color ?? 'var(--foreground)';
+ const style = hap.value?.markcss || `outline: solid 2px ${color}`;
// Get explicit channels for color values
/*
const swatch = document.createElement('div');
@@ -114,7 +115,7 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
to,
Decoration.mark({
// attributes: { style: `outline: solid 2px rgba(${channels.join(', ')})` },
- attributes: { style: `outline: solid 2px ${color}` },
+ attributes: { style },
}),
);
}
diff --git a/packages/codemirror/themes/algoboy.mjs b/packages/codemirror/themes/algoboy.mjs
index fd7db580b..5c6a91b80 100644
--- a/packages/codemirror/themes/algoboy.mjs
+++ b/packages/codemirror/themes/algoboy.mjs
@@ -18,25 +18,25 @@ export default createTheme({
theme: 'light',
settings,
styles: [
- { tag: t.labelName, color: '#0f380f' },
- { tag: t.keyword, color: '#0f380f' },
- { tag: t.operator, color: '#0f380f' },
- { tag: t.special(t.variableName), color: '#0f380f' },
- { tag: t.typeName, color: '#0f380f' },
- { tag: t.atom, color: '#0f380f' },
- { tag: t.number, color: '#0f380f' },
- { tag: t.definition(t.variableName), color: '#0f380f' },
- { tag: t.string, color: '#0f380f' },
- { tag: t.special(t.string), color: '#0f380f' },
- { tag: t.comment, color: '#0f380f' },
- { tag: t.variableName, color: '#0f380f' },
- { tag: t.tagName, color: '#0f380f' },
- { tag: t.bracket, color: '#0f380f' },
- { tag: t.meta, color: '#0f380f' },
- { tag: t.attributeName, color: '#0f380f' },
- { tag: t.propertyName, color: '#0f380f' },
- { tag: t.className, color: '#0f380f' },
- { tag: t.invalid, color: '#0f380f' },
- { tag: [t.unit, t.punctuation], color: '#0f380f' },
+ { tag: t.labelName, color: 'inherit' },
+ { tag: t.keyword, color: 'inherit' },
+ { tag: t.operator, color: 'inherit' },
+ { tag: t.special(t.variableName), color: 'inherit' },
+ { tag: t.typeName, color: 'inherit' },
+ { tag: t.atom, color: 'inherit' },
+ { tag: t.number, color: 'inherit' },
+ { tag: t.definition(t.variableName), color: 'inherit' },
+ { tag: t.string, color: 'inherit' },
+ { tag: t.special(t.string), color: 'inherit' },
+ { tag: t.comment, color: 'inherit' },
+ { tag: t.variableName, color: 'inherit' },
+ { tag: t.tagName, color: 'inherit' },
+ { tag: t.bracket, color: 'inherit' },
+ { tag: t.meta, color: 'inherit' },
+ { tag: t.attributeName, color: 'inherit' },
+ { tag: t.propertyName, color: 'inherit' },
+ { tag: t.className, color: 'inherit' },
+ { tag: t.invalid, color: 'inherit' },
+ { tag: [t.unit, t.punctuation], color: 'inherit' },
],
});
diff --git a/packages/codemirror/themes/blackscreen.mjs b/packages/codemirror/themes/blackscreen.mjs
index 5671a6d83..ca67ea9ae 100644
--- a/packages/codemirror/themes/blackscreen.mjs
+++ b/packages/codemirror/themes/blackscreen.mjs
@@ -15,25 +15,25 @@ export default createTheme({
theme: 'dark',
settings,
styles: [
- { tag: t.labelName, color: 'white' },
- { tag: t.keyword, color: 'white' },
- { tag: t.operator, color: 'white' },
- { tag: t.special(t.variableName), color: 'white' },
- { tag: t.typeName, color: 'white' },
- { tag: t.atom, color: 'white' },
- { tag: t.number, color: 'white' },
- { tag: t.definition(t.variableName), color: 'white' },
- { tag: t.string, color: 'white' },
- { tag: t.special(t.string), color: 'white' },
- { tag: t.comment, color: 'white' },
- { tag: t.variableName, color: 'white' },
- { tag: t.tagName, color: 'white' },
- { tag: t.bracket, color: 'white' },
- { tag: t.meta, color: 'white' },
- { tag: t.attributeName, color: 'white' },
- { tag: t.propertyName, color: 'white' },
- { tag: t.className, color: 'white' },
- { tag: t.invalid, color: 'white' },
- { tag: [t.unit, t.punctuation], color: 'white' },
+ { tag: t.labelName, color: 'inherit' },
+ { tag: t.keyword, color: 'inherit' },
+ { tag: t.operator, color: 'inherit' },
+ { tag: t.special(t.variableName), color: 'inherit' },
+ { tag: t.typeName, color: 'inherit' },
+ { tag: t.atom, color: 'inherit' },
+ { tag: t.number, color: 'inherit' },
+ { tag: t.definition(t.variableName), color: 'inherit' },
+ { tag: t.string, color: 'inherit' },
+ { tag: t.special(t.string), color: 'inherit' },
+ { tag: t.comment, color: 'inherit' },
+ { tag: t.variableName, color: 'inherit' },
+ { tag: t.tagName, color: 'inherit' },
+ { tag: t.bracket, color: 'inherit' },
+ { tag: t.meta, color: 'inherit' },
+ { tag: t.attributeName, color: 'inherit' },
+ { tag: t.propertyName, color: 'inherit' },
+ { tag: t.className, color: 'inherit' },
+ { tag: t.invalid, color: 'inherit' },
+ { tag: [t.unit, t.punctuation], color: 'inherit' },
],
});
diff --git a/packages/codemirror/themes/bluescreen.mjs b/packages/codemirror/themes/bluescreen.mjs
index eb04c4118..4f5dff2fe 100644
--- a/packages/codemirror/themes/bluescreen.mjs
+++ b/packages/codemirror/themes/bluescreen.mjs
@@ -18,25 +18,25 @@ export default createTheme({
theme: 'dark',
settings,
styles: [
- { tag: t.labelName, color: 'white' },
- { tag: t.keyword, color: 'white' },
- { tag: t.operator, color: 'white' },
- { tag: t.special(t.variableName), color: 'white' },
- { tag: t.typeName, color: 'white' },
- { tag: t.atom, color: 'white' },
- { tag: t.number, color: 'white' },
- { tag: t.definition(t.variableName), color: 'white' },
- { tag: t.string, color: 'white' },
- { tag: t.special(t.string), color: 'white' },
- { tag: t.comment, color: 'white' },
- { tag: t.variableName, color: 'white' },
- { tag: t.tagName, color: 'white' },
- { tag: t.bracket, color: 'white' },
- { tag: t.meta, color: 'white' },
- { tag: t.attributeName, color: 'white' },
- { tag: t.propertyName, color: 'white' },
- { tag: t.className, color: 'white' },
- { tag: t.invalid, color: 'white' },
- { tag: [t.unit, t.punctuation], color: 'white' },
+ { tag: t.labelName, color: 'inherit' },
+ { tag: t.keyword, color: 'inherit' },
+ { tag: t.operator, color: 'inherit' },
+ { tag: t.special(t.variableName), color: 'inherit' },
+ { tag: t.typeName, color: 'inherit' },
+ { tag: t.atom, color: 'inherit' },
+ { tag: t.number, color: 'inherit' },
+ { tag: t.definition(t.variableName), color: 'inherit' },
+ { tag: t.string, color: 'inherit' },
+ { tag: t.special(t.string), color: 'inherit' },
+ { tag: t.comment, color: 'inherit' },
+ { tag: t.variableName, color: 'inherit' },
+ { tag: t.tagName, color: 'inherit' },
+ { tag: t.bracket, color: 'inherit' },
+ { tag: t.meta, color: 'inherit' },
+ { tag: t.attributeName, color: 'inherit' },
+ { tag: t.propertyName, color: 'inherit' },
+ { tag: t.className, color: 'inherit' },
+ { tag: t.invalid, color: 'inherit' },
+ { tag: [t.unit, t.punctuation], color: 'inherit' },
],
});
diff --git a/packages/codemirror/themes/terminal.mjs b/packages/codemirror/themes/terminal.mjs
index 90c6e1d25..a5b4506fd 100644
--- a/packages/codemirror/themes/terminal.mjs
+++ b/packages/codemirror/themes/terminal.mjs
@@ -14,24 +14,24 @@ export default createTheme({
theme: 'dark',
settings,
styles: [
- { tag: t.labelName, color: '#41FF00' },
- { tag: t.keyword, color: '#41FF00' },
- { tag: t.operator, color: '#41FF00' },
- { tag: t.special(t.variableName), color: '#41FF00' },
- { tag: t.typeName, color: '#41FF00' },
- { tag: t.atom, color: '#41FF00' },
- { tag: t.number, color: '#41FF00' },
- { tag: t.definition(t.variableName), color: '#41FF00' },
- { tag: t.string, color: '#41FF00' },
- { tag: t.special(t.string), color: '#41FF00' },
- { tag: t.comment, color: '#41FF00' },
- { tag: t.variableName, color: '#41FF00' },
- { tag: t.tagName, color: '#41FF00' },
- { tag: t.bracket, color: '#41FF00' },
- { tag: t.meta, color: '#41FF00' },
- { tag: t.attributeName, color: '#41FF00' },
- { tag: t.propertyName, color: '#41FF00' },
- { tag: t.className, color: '#41FF00' },
- { tag: t.invalid, color: '#41FF00' },
+ { tag: t.labelName, color: 'inherit' },
+ { tag: t.keyword, color: 'inherit' },
+ { tag: t.operator, color: 'inherit' },
+ { tag: t.special(t.variableName), color: 'inherit' },
+ { tag: t.typeName, color: 'inherit' },
+ { tag: t.atom, color: 'inherit' },
+ { tag: t.number, color: 'inherit' },
+ { tag: t.definition(t.variableName), color: 'inherit' },
+ { tag: t.string, color: 'inherit' },
+ { tag: t.special(t.string), color: 'inherit' },
+ { tag: t.comment, color: 'inherit' },
+ { tag: t.variableName, color: 'inherit' },
+ { tag: t.tagName, color: 'inherit' },
+ { tag: t.bracket, color: 'inherit' },
+ { tag: t.meta, color: 'inherit' },
+ { tag: t.attributeName, color: 'inherit' },
+ { tag: t.propertyName, color: 'inherit' },
+ { tag: t.className, color: 'inherit' },
+ { tag: t.invalid, color: 'inherit' },
],
});
diff --git a/packages/codemirror/themes/whitescreen.mjs b/packages/codemirror/themes/whitescreen.mjs
index 5abbb1ea9..ff860537b 100644
--- a/packages/codemirror/themes/whitescreen.mjs
+++ b/packages/codemirror/themes/whitescreen.mjs
@@ -16,24 +16,24 @@ export default createTheme({
theme: 'light',
settings,
styles: [
- { tag: t.labelName, color: 'black' },
- { tag: t.keyword, color: 'black' },
- { tag: t.operator, color: 'black' },
- { tag: t.special(t.variableName), color: 'black' },
- { tag: t.typeName, color: 'black' },
- { tag: t.atom, color: 'black' },
- { tag: t.number, color: 'black' },
- { tag: t.definition(t.variableName), color: 'black' },
- { tag: t.string, color: 'black' },
- { tag: t.special(t.string), color: 'black' },
- { tag: t.comment, color: 'black' },
- { tag: t.variableName, color: 'black' },
- { tag: t.tagName, color: 'black' },
- { tag: t.bracket, color: 'black' },
- { tag: t.meta, color: 'black' },
- { tag: t.attributeName, color: 'black' },
- { tag: t.propertyName, color: 'black' },
- { tag: t.className, color: 'black' },
- { tag: t.invalid, color: 'black' },
+ { tag: t.labelName, color: 'inherit' },
+ { tag: t.keyword, color: 'inherit' },
+ { tag: t.operator, color: 'inherit' },
+ { tag: t.special(t.variableName), color: 'inherit' },
+ { tag: t.typeName, color: 'inherit' },
+ { tag: t.atom, color: 'inherit' },
+ { tag: t.number, color: 'inherit' },
+ { tag: t.definition(t.variableName), color: 'inherit' },
+ { tag: t.string, color: 'inherit' },
+ { tag: t.special(t.string), color: 'inherit' },
+ { tag: t.comment, color: 'inherit' },
+ { tag: t.variableName, color: 'inherit' },
+ { tag: t.tagName, color: 'inherit' },
+ { tag: t.bracket, color: 'inherit' },
+ { tag: t.meta, color: 'inherit' },
+ { tag: t.attributeName, color: 'inherit' },
+ { tag: t.propertyName, color: 'inherit' },
+ { tag: t.className, color: 'inherit' },
+ { tag: t.invalid, color: 'inherit' },
],
});
diff --git a/test/__snapshots__/examples.test.mjs.snap b/test/__snapshots__/examples.test.mjs.snap
index a3419e98d..3ad6ea01e 100644
--- a/test/__snapshots__/examples.test.mjs.snap
+++ b/test/__snapshots__/examples.test.mjs.snap
@@ -4551,6 +4551,27 @@ exports[`runs examples > example "lsize" example index 0 1`] = `
]
`;
+exports[`runs examples > example "markcss" example index 0 1`] = `
+[
+ "[ 0/1 → 1/4 | note:c ]",
+ "[ 1/4 → 1/2 | note:a ]",
+ "[ 1/2 → 3/4 | note:f ]",
+ "[ 3/4 → 1/1 | note:e ]",
+ "[ 1/1 → 5/4 | note:c ]",
+ "[ 5/4 → 3/2 | note:a ]",
+ "[ 3/2 → 7/4 | note:f ]",
+ "[ 7/4 → 2/1 | note:e ]",
+ "[ 2/1 → 9/4 | note:c ]",
+ "[ 9/4 → 5/2 | note:a ]",
+ "[ 5/2 → 11/4 | note:f ]",
+ "[ 11/4 → 3/1 | note:e ]",
+ "[ 3/1 → 13/4 | note:c ]",
+ "[ 13/4 → 7/2 | note:a ]",
+ "[ 7/2 → 15/4 | note:f ]",
+ "[ 15/4 → 4/1 | note:e ]",
+]
+`;
+
exports[`runs examples > example "mask" example index 0 1`] = `
[
"[ 0/1 → 1/4 | note:c ]",
diff --git a/test/runtime.mjs b/test/runtime.mjs
index 19b716274..a8f37a34e 100644
--- a/test/runtime.mjs
+++ b/test/runtime.mjs
@@ -134,6 +134,9 @@ strudel.Pattern.prototype._pitchwheel = function () {
strudel.Pattern.prototype._pianoroll = function () {
return this;
};
+strudel.Pattern.prototype.markcss = function () {
+ return this;
+};
const uiHelpersMocked = {
backgroundImage: id,
diff --git a/website/src/pages/learn/visual-feedback.mdx b/website/src/pages/learn/visual-feedback.mdx
index 25eae30ce..ec275c6e2 100644
--- a/website/src/pages/learn/visual-feedback.mdx
+++ b/website/src/pages/learn/visual-feedback.mdx
@@ -98,3 +98,7 @@ What follows is the API doc of all the options you can pass:
## Pitchwheel
+
+## markcss
+
+