# Customise class names

**URL:** <https://discuss.codemirror.net/t/customise-class-names/8912>\
**Category:** Uncategorized\
**Created:** [December 17, 2024, 11:09am UTC](https://discuss.codemirror.net/t/customise-class-names/8912 "2024-12-17T11:09:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cdedreuille](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/cdedreuille/32/4899_2.png) [@cdedreuille](https://discuss.codemirror.net/u/cdedreuille)\
**Post date:** [December 17, 2024, 11:09am UTC](https://discuss.codemirror.net/t/customise-class-names/8912/1 "2024-12-17T11:09:34Z")

</div>

Hi,

We are looking to use CodeMirror in our design system and I was wondering if there was a way to customise class names. By default our design system is based mostly on headless components. We add custom classes with a prefix of `cn` and let the user customise the theme based on these class names. Because Code Mirror is using `cm` prefix there might be confusions.

Is there a way to customise the prefix of each class names?

---

<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:** [December 17, 2024, 11:42am UTC](https://discuss.codemirror.net/t/customise-class-names/8912/2 "2024-12-17T11:42:01Z")

</div>

No, there isn’t. You can add additional classes to the [outer](https://codemirror.net/docs/ref/#view.EditorView%5EeditorAttributes) and the [content](https://codemirror.net/docs/ref/#view.EditorView%5EeditorAttributes) element, but the classes used by the system itself are hard-coded (as they are in most libraries, I imagine).

---

<div class="post-metadata">

**Author:** ![cdedreuille](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/cdedreuille/32/4899_2.png) [@cdedreuille](https://discuss.codemirror.net/u/cdedreuille)\
**Post date:** [December 17, 2024, 11:59am UTC](https://discuss.codemirror.net/t/customise-class-names/8912/3 "2024-12-17T11:59:03Z")

</div>

Thanks for your feedback. I think there’s a big trend right now for headless components that doesn’t force a certain styling way so you could use Tailwind, CSS Module, plain CSS, …