# Why does CM6 use the "ͼ" character in class names?

**URL:** <https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821>\
**Category:** v6\
**Created:** [January 15, 2021, 1:28am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821 "2021-01-15T01:28:41Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himmalerin](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/himmalerin/32/988_2.png) [@Himmalerin](https://discuss.codemirror.net/u/Himmalerin)\
**Post date:** [January 15, 2021, 1:28am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/1 "2021-01-15T01:28:41Z")

</div>

I’m working on switching from CodeMirror 5 to 6 and noticed that there are some classes that start with the `ͼ` character. For example, when using the html highlighter the names of html tags have the `ͼf` class. The `cm-wrap` div also has the `ͼ1`, `ͼ2`, and `ͼ3` classes.

I didn’t see anything about this in the migration guide or the reference manual, is there a reason for this character over something more easily typed on keyboards?

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [January 15, 2021, 7:50am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/2 "2021-01-15T07:50:22Z")

</div>

These are generated anonymous classes. You shouldn’t be typing them, because targeting them with CSS rules isn’t going to work—they aren’t stable across page loads.

---

<div class="post-metadata">

**Author:** ![blh](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/blh/32/4521_2.png) [@blh](https://discuss.codemirror.net/u/blh)\
**Post date:** [January 16, 2021, 8:10am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/3 "2021-01-16T08:10:25Z")

</div>

Is writing css-in-js / `style-mod` going to be the only way to affect syntax highlighting styles when using `codemirror/highlight`?

Two things you could’ve done previously with codemirror 5, which provided stable read-able tokens, with css only is that you could have

1. language specific syntax highlighting (`.class .cm-token`)

2. theme specific syntax highlight (`.theme .cm-token`)

Is the only way to achieve these two right now to create and then mount the javascript-generated stylesheets? What’s the reasoning to let [`styleMod`](https://github.com/marijnh/style-mod/blob/master/src/style-mod.js#L59-L65) generate the syntax tokens via its default function

```auto
  // :: () → string
  // Generate a new unique CSS class name.
  static newName() {
    let id = top[COUNT] || 1
    top[COUNT] = id + 1
    return C + id.toString(36)
  }

```

rather than something like the [following](https://github.com/codemirror/highlight/blob/main/src/highlight.ts#L223-L239) which allows developers to hardcode the values and then target them with css later on

```auto
    for (let style of spec) {
      let cls = style.className || StyleModule.newName() // edited
      modSpec["." + cls] = Object.assign({}, style, {tag: null, className: null}) // edited
      let tags = style.tag
      if (!Array.isArray(tags)) tags = [tags as Tag]
      for (let tag of tags) this.map[tag.id] = cls
    }

```

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [January 18, 2021, 1:40pm UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/4 "2021-01-18T13:40:07Z")

</div>

> Is writing css-in-js / style-mod going to be the only way to affect syntax highlighting styles when using codemirror/highlight?

Yes.

> language specific syntax highlighting (.class .cm-token)

I had plans for this but it appears I never finished. Would a way for a highlighting style to scope rules to a specific language work for your use case?

> theme specific syntax highlight (.theme .cm-token)

The idea is that each theme will want to provide its own highlighter (see for an example the [One Dark theme](https://github.com/codemirror/theme-one-dark)).

> something like the following which allows developers to hardcode the values

The problem with hardcoded values is that they’ll clash. And things like highlight styles don’t assign names to rules at all right now.

---

<div class="post-metadata">

**Author:** ![lishid](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/lishid/32/998_2.png) [@lishid](https://discuss.codemirror.net/u/lishid)\
**Post date:** [January 18, 2021, 10:35pm UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/5 "2021-01-18T22:35:33Z")

</div>

Adding my use case to this thread instead of starting a new one. Let me know if it makes more sense to start its own thread.

We make a markdown-based note tool called Obsidian. I’m experimenting with CM6 for our markdown editor (we’re currently using CM5).

Part of the big selling point that our customers love is the fact that they can easily customize any aspect of the app using “Custom CSS” - basically a stylesheet (or multiple) the user can define to re-theme the app.

Many of our users have taken liberty to re-style tokens from our markdown parser (originally based on HyperMD) to their preferences.

Users have also shared many “community themes” under an official repo like this:

 ![image](https://discuss.codemirror.net/uploads/default/original/1X/3707f990da0d9045e1a92736fe095c8734fccb5d.jpeg)

I think as long as there’s a way to consistently generate token classes (preferably developer-definable, so we can keep the same class names as we’re currently using), that would be a reasonable solution to the use case.

---

<div class="post-metadata">

**Author:** ![blh](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/blh/32/4521_2.png) [@blh](https://discuss.codemirror.net/u/blh)\
**Post date:** [January 19, 2021, 9:44am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/6 "2021-01-19T09:44:46Z")

</div>

> I had plans for this but it appears I never finished. Would a way for a highlighting style to scope rules to a specific language work for your use case?

Yeah that would work

> The idea is that each theme will want to provide its own highlighter

One drawback of this is that if a person wanted to toggle between light and dark modes by adding a class to the root of their app, they would also have to write additional javascript to toggle the theme of codemirror instead of relying on css from the app toggle.

> The problem with hardcoded values is that they’ll clash. And things like highlight styles don’t assign names to rules at all right now.

As long as each spec fed into `HighlightStyle` is given a unique name, there shouldn’t be conflict right? For example,

```js
export const oneDarkHighlightStyle = HighlightStyle.define(
  {tag: t.keyword, 
   name: "cm-keyword",
   color: violet},
  {tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
   name: "cm-meta",
   color: coral},
  {tag: t.string,
   name: "cm-string",
   color: sage},
}

```

Edit: A small, additional reason for having hardcoded / stable class-names is that it would make debugging styles a bit easier: e.g. given ͼ2, it’s hard to know looking at the class only which of the style tags were applied.

---

<div class="post-metadata">

**Author:** ![chloerei](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/chloerei/32/1043_2.png) [@chloerei](https://discuss.codemirror.net/u/chloerei)\
**Post date:** [February 6, 2021, 9:40am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/7 "2021-02-06T09:40:45Z")

</div>

This way of defining styles seems weird and limited. I want to embed codemirror into prosemirror, and the final developer/user of the editor can modify the highlight style through CSS.

It seems difficult to achieve this behavior.

---

<div class="post-metadata">

**Author:** ![martinring](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/martinring/32/1068_2.png) [@martinring](https://discuss.codemirror.net/u/martinring)\
**Post date:** [February 17, 2021, 10:07am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/8 "2021-02-17T10:07:35Z")

</div>

I am also struggling with this. I am adopting CodeMirror 6 in an App wich applies Dark or Light theme based on a media query. There is window.matchMedia wich gives us a programatic way of dealing with it. But there seems to be no way to “unmount” stylemodules:

```javascript
    const darkMode = window.matchMedia('(prefers-color-scheme: dark)')
    function updateTheme(darkMode: boolean) {      
      if (darkMode) {                
        StyleModule.mount(document, dark.module);
      } else {
        StyleModule.mount(document, light.module); 
      }
    }
    updateTheme(darkMode.matches);
    darkMode.addEventListener("change", (e) => updateTheme(e.matches))    

```

The code does not work as expected since the old style module is still around… I cannot use a codemirror extension here since I am also using syntax highlighting standalone (pre rendered on the server) in the same document.

---

<div class="post-metadata">

**Author:** ![martinring](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/martinring/32/1068_2.png) [@martinring](https://discuss.codemirror.net/u/martinring)\
**Post date:** [February 17, 2021, 1:46pm UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/9 "2021-02-17T13:46:38Z")

</div>

I found a workaround for me: I use css variables like `'color': 'var(--some-color)'` instead of concrete color values in the color theme and set them in the outer style sheet. Not optimal but it works well with media queries and everything.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [February 24, 2021, 2:18pm UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/10 "2021-02-24T14:18:20Z")

</div>

> [@martinring](#):
>
> But there seems to be no way to “unmount” stylemodules:

You’re not using them in the intended way. I’m not sure what is in `light` and `dark`, but you shouldn’t be manually mounting style modules like that unless you want them to apply unconditionally. Create a proper theme or highlight style, and add it to your editor configuration. Only the active themes and highlighter will take effect.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [February 25, 2021, 11:33am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/11 "2021-02-25T11:33:17Z")

</div>

See also the [Styling and theming design discussion](https://discuss.codemirror.net/t/styling-and-theming-design-discussion/2958) thread

---

<div class="post-metadata">

**Author:** ![martinring](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/martinring/32/1068_2.png) [@martinring](https://discuss.codemirror.net/u/martinring)\
**Post date:** [February 28, 2021, 10:16pm UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/12 "2021-02-28T22:16:57Z")

</div>

> [@marijn](#):
>
> Create a proper theme or highlight style, and add it to your editor configuration.

Yeah, the problem I had was, that I don’t have an editor instance. I am just using the `highlightTree` from `@codemirror/highlight` standalone to highlight some code and want to apply a style which is conditional on some media query. I currently still don’t see any other way than either manually removing the old style or using css variables.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [March 1, 2021, 8:44am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/13 "2021-03-01T08:44:11Z")

</div>

> [@martinring](#):
>
> I currently still don’t see any other way than either manually removing the old style or using css variables.

Right. This’ll improve as soon as the highlighting-style-adding-static-classes is done.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [March 3, 2021, 5:13pm UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/14 "2021-03-03T17:13:59Z")

</div>

Release [0.18.0](https://discuss.codemirror.net/t/codemirror-next-0-18-0/2983) should address some of these issue (especially wrt highlighting).

---

<div class="post-metadata">

**Author:** ![skylaan](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/s/e9a140/32.png) [@skylaan](https://discuss.codemirror.net/u/skylaan)\
**Post date:** [May 16, 2023, 3:08am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/15 "2023-05-16T03:08:18Z")

</div>

@marijn if we have unit tests that relied on the class `cm-keyword` to check for highlighting syntax, is there another way to check whether or not syntax highlighting is working or not? thanks!

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [May 16, 2023, 6:08am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/16 "2023-05-16T06:08:47Z")

</div>

[`classHighlighter`](https://lezer.codemirror.net/docs/ref/#highlight.classHighlighter) might be what you want.

---

<div class="post-metadata">

**Author:** ![skylaan](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/s/e9a140/32.png) [@skylaan](https://discuss.codemirror.net/u/skylaan)\
**Post date:** [May 16, 2023, 3:50pm UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/17 "2023-05-16T15:50:02Z")

</div>

thanks! hmm 🤔 so i was expecting to see classes with `tok-*` but interestingly… i’m not… (unless i misunderstood the docs)

 ![image](https://discuss.codemirror.net/uploads/default/original/2X/5/5675b4e309e2b17f6126586613ea2bf68c2089df.png)

![image](https://discuss.codemirror.net/uploads/default/original/2X/8/8bfcada7b09e8f1109aaf8fd0c906dfa74b3b76c.png)

i am loading themes from [https://github.com/uiwjs/react-codemirror/tree/master/theme](https://github.com/uiwjs/react-codemirror/tree/master/theme) though. Could this be the issue?

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [May 17, 2023, 6:39am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/18 "2023-05-17T06:39:31Z")

</div>

> [@skylaan](#):
>
> thanks! hmm 🤔 so i was expecting to see classes with `tok-*` but interestingly… i’m not… (unless i misunderstood the docs)

That DOM doesn’t look like it has `classHighlighter` active. Compare with [this](https://codemirror.net/try/?c=aW1wb3J0IHtiYXNpY1NldHVwLCBFZGl0b3JWaWV3fSBmcm9tICJjb2RlbWlycm9yIgppbXBvcnQge2phdmFzY3JpcHR9IGZyb20gIkBjb2RlbWlycm9yL2xhbmctamF2YXNjcmlwdCIKaW1wb3J0IHtjbGFzc0hpZ2hsaWdodGVyfSBmcm9tICJAbGV6ZXIvaGlnaGxpZ2h0IgppbXBvcnQge3N5bnRheEhpZ2hsaWdodGluZ30gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZ3VhZ2UiCgpuZXcgRWRpdG9yVmlldyh7CiAgZG9jOiAiY29uc29sZS5sb2coJ2hlbGxvJylcbiIsCiAgZXh0ZW5zaW9uczogW2Jhc2ljU2V0dXAsIGphdmFzY3JpcHQoKSwgc3ludGF4SGlnaGxpZ2h0aW5nKGNsYXNzSGlnaGxpZ2h0ZXIpXSwKICBwYXJlbnQ6IGRvY3VtZW50LmJvZHkKfSkK).

---

<div class="post-metadata">

**Author:** ![skylaan](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/s/e9a140/32.png) [@skylaan](https://discuss.codemirror.net/u/skylaan)\
**Post date:** [May 17, 2023, 6:54am UTC](https://discuss.codemirror.net/t/why-does-cm6-use-the-character-in-class-names/2821/19 "2023-05-17T06:54:02Z")

</div>

ohh thank you so much!