Customisable highlight style?

[gamar3is]

Currently, the highlight style is somewhat hardcoded here.

Instead of setting a style attribute, would it be feasible to set a class instead, so that it can be changed through CSS?

Ideally this could be then redefined by the user through a function, but just having it as a class would enable me to change things with a userscript and try out other highlighting styles.

[gamar3is]

(btw i can try and make a PR for this, just asking to be sure that this feature fits into the project plans)

[felixroos]

I think we still need a style attribute to be able to set any color, which isn't possible by a class: https://strudel.cc/#cygiYmQqPDEgMj4gLSwgaGgoMTAsMTYpLC0gcmltIikuYmFuaygnQ2FzaW9SWjEnKQouY29sb3IoIltjeWFuIHwgbWFnZW50YSB8wqB5ZWxsb3ddKjgiKQouX3BpYW5vcm9sbCgp

[gamar3is]

Oh I see -- this is a tricky one. I'd really love to try out different styles for the highlights, e.g. with CSS transitions, so I'll keep thinking of a possible approach that doesn't break the color() feature.

Right now I'm thinking that adding a class (e.g. highlight-char) in addition to the style attribute would allow for this. The style attribute would likely override any CSS styles for the class, but maybe !important would address this.

I'll try to find some time during the weekend to set up a dev environment and test this out, but I'd definitely welcome any caveats you see with this approach.

Thank you for the quick reaction! I'm porting my work from Tidal to Strudel mostly because of the highlight feature, so I'm really eager to help make things even better.

[gamar3is]

I actually got this going -- adding the highlight-char class in packages/codemirror/highlight.mjs then editing the style in website/src/styles/index.css works. I'm delighted at how easy it is to hack on Strudel.

Now wondering if it makes sense to have a user-facing function to alter the highlight style. I'll read up on how Strudel does things like .color() and hopefully come up with something.

[matthewkaney]

One thought: perhaps Strudel could have a css (or highlightCSS) param that could override the color param/default highlighting if set?

[gamar3is]

One thought: perhaps Strudel could have a css (or highlightCSS) param that could override the color param/default highlighting if set?

I really like this idea, could be finessed later but would make a lot of things possible right now

[felixroos]

One thought: perhaps Strudel could have a css (or highlightCSS) param that could override the color param/default highlighting if set?

good idea! the rule could be: if css is set, color is ignored, and css is used for the style attribute. maybe also markstyle / markcss

[felixroos]

it should be noted that color is also used for the visuals (scope, pianoroll etc). the css wouldn't work for those, as it's canvas based. so I guess the behaviour for the viz would remain unchanged

[gamar3is]

it should be noted that color is also used for the visuals (scope, pianoroll etc). the css wouldn't work for those, as it's canvas based. so I guess the behaviour for the viz would remain unchanged

That makes sense, and I can perfectly live with that limitation :-)

[felixroos]

[gamar3is]

This is great and exciting! I suppose we could also call markcss autonomously (i mean, outside a chained sound statement) so it affects the whole sketch?

[felixroos]

This is great and exciting! I suppose we could also call markcss autonomously (i mean, outside a chained sound statement) so it affects the whole sketch?

you could use all for that, like all(x=>x.markcss('background:tomato'))

[felixroos]

now implemented in #1202 (soon to be deployed)