Css for codemirror-6

1

Hello Forum,

how do I have access to the used classes / colors within codemirror-6?
The mentioned colors in Colors are not listed in my TW palette manager.

(see also Need help to set color of marked/selected text in CodeMirror)

I’d like to change the color of (blinking) cursor and of curled brackets (different color, no border…)

grafik
grafik407×142 9.25 KB

and the the pulldown (background, border…):

grafik
grafik647×265 14.8 KB

(using F12 → click within → pulldown disappears)

Thanks
Stefan

2

Hi @StS

The codemirror 6 plugin uses its <<colour-extend>> macro, not the core <<colour>> macro.
The reason why is, that the CSS classes used in the editor are not defined in the various core palettes.

But don’t worry, the <<colour-extend>> macro has you covered:

  • it looks for a tiddler name that starts with the used palette (like $:/palettes/Twilight) and the suffix /extend - so it would be $:/palettes/Twilight/extend
  • set the type of that tiddler to application/x-tiddler-dictionary
  • in that tiddler, define colors for the classes you find in the Colors tiddler

Tell me if you need more styling options, then I will expose them

3

Hi @BurningTreeC,
thanks for feedback.

I see - but the style of cursor and the curled brackets aro not in the used patette (like $:/palettes/Twilight) and than also not in the $:/palettes/Twilight/extend.

How do I adress this one?

4

I’ll add them @StS

Within 20 minutes :wink:

5

Hi @StS

An updated version is online

Do the following:

  • clone the tiddler $:/palettes/Vanilla/extend
  • rename it to $:/palettes/Twilight/extend
  • change the colors of cm-caret-colour and cm-matching-bracket-outline
  • cm-matching-bracket-outline can also be transparent - if you want that
6

Hi @BurningTreeC,

thanks - I got it.

And how can I style the cursor (more bright and thick/heavy)?
grafik

grafik
grafik261×148 3.61 KB

7

Hi @StS

you’ll need to add a new Stylesheet tiddler for that:

.cm-cursor, .cm-dropCursor {
	border-left: 3px solid !important;
}
8

Thanks a lot - perfect! :+1:

9

Hi @BurningTreeC,

what font is used in codemirror-6?

grafik
grafik1809×538 64.7 KB

The output of the cm-tooltip in the pulldown has fifferent font:

grafik
grafik452×217 14.9 KB

Any idea?

Thanks
Stefan

10

Oh, good catch @StS

the tooltip probably uses monospace
I will change its CSS so that it matches the font of the editor!

11

@StS - for now you can just add some CSS:

.cm-tooltip-autocomplete, .cm-tooltip-autocomplete > ul > li {
	font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}} !important;
}
12

Perfect - thanks a lot!

→ Edit:
this generates an additional scrollbar

grafik
grafik771×259 20.8 KB

13

Oh, ok @StS - I will have a look at the additional scrollbar

14

@StS

could you please test if it works correctly if you add the following styles INSTEAD of the ones I posted?

.cm-tooltip-autocomplete > ul > li {
	font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}} !important;
	overflow: hidden;
}
15

@BurningTreeC

now it is perfect - thanks again!

grafik
grafik790×272 18.5 KB

16

Hi @BurningTreeC,

where is the fish configured and how can that be changed / styled?

grafik
grafik374×256 14 KB

Thanks, Stefan

17

Hi @StS

I’ll change this configuration, maybe I’ll make it configurable

Best wishes,
Simon

18

Hello @BurningTreeC,

what is the correct parameter to set the color/background-color for the hover-effect working with the mouse?

grafik
grafik456×261 11.2 KB

Selection with the keyboard is working fine:

grafik
grafik768×201 13 KB

Thanks, Stefan

19

Hello @StS

use the following in a stylesheet tiddler:

.cm-tooltip-autocomplete > ul > li:hover {
	background-color: <<colour-extend cm-tooltip-selected-background>> !important;
	color: <<colour-extend cm-tooltip-selected-foreground>> !important;
}
20

Thanks, @BurningTreeC - perfect!