# List of all Chroma classes? \[SOLVED\]

**URL:** https://discourse.gohugo.io/t/list-of-all-chroma-classes-solved/8870
**Category:** support
**Created:** [October 20, 2017, 12:27pm UTC](https://discourse.gohugo.io/t/list-of-all-chroma-classes-solved/8870 "2017-10-20T12:27:52Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Jura](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jura/32/13581_2.png) [@Jura](https://discourse.gohugo.io/u/Jura)
#### Post date: [October 20, 2017, 12:27pm UTC](https://discourse.gohugo.io/t/list-of-all-chroma-classes-solved/8870/1 "2017-10-20T12:27:52Z")

</div>

Does someone has a list of all classes that the Chroma syntax highlight can use (including the meaning of the abbreviations)? I looked through the Hugo source code but couldn’t find it.

(I need that list for my own CSS styling.)

Thanks!

* * *

_Edit:_ Speaking of Chroma classes, can we remove the encapsulating `highlight` class? (It conflicts with my other code.)

```auto
<div class="highlight">
<pre class="chroma">
     <code class="language-html" data-lang="html">
     </code>
</pre>
</div>

```

The [doc](https://gohugo.io/content-management/syntax-highlighting/#readout) page say we can use the `pygmentOptions` variable, which in theory should have a `cssclass` value (according to the doc page).  
And that setting would make it possible for me to change the class name (or perhaps even remove it), according to the [pygments doc](http://pygments.org/docs/formatters/#HtmlFormatter).

But when I placed the following in my TOML configuration file, it has no effect:

```auto
pygmentsOptions = "cssclass=hellothere"

```

This does work, so it’s not like the `pygmentsOptions` is not read by Hugo:

```auto
pygmentsOptions = "linenos=inline"

```

---

<div class="post-metadata">

### Author: ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)
#### Post date: [October 20, 2017, 1:03pm UTC](https://discourse.gohugo.io/t/list-of-all-chroma-classes-solved/8870/2 "2017-10-20T13:03:50Z")

</div>

- Ask this person: [https://github.com/alecthomas/chroma](https://github.com/alecthomas/chroma)
- The Chroma integration only supports a subset of the Pygments options (I deliberately reused those options to make the transition seamless). That subset is documented, but it does not include `cssclass`.

---

<div class="post-metadata">

### Author: ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)
#### Post date: [October 20, 2017, 1:24pm UTC](https://discourse.gohugo.io/t/list-of-all-chroma-classes-solved/8870/3 "2017-10-20T13:24:50Z")

</div>

> [@Jura](#):
>
> Does someone has a list of all classes that the Chroma syntax highlight can use (including the meaning of the abbreviations)? I looked through the Hugo source code but couldn’t find it.

The class names are derived from Pygments. So you will find more info in Pygments documentation. Though, the `chroma` generated CSS is documented well enough.

For example, do:

```auto
hugo gen chromastyles --style=github > github_chroma.css

```

> <https://gist.github.com/kaushalmodi/903680541c909cd1e1d37efa38eda1c1>

> [@Jura](#):
>
> This does work, so it’s not like the pygmentsOptions is not read by Hugo:
> 
> pygmentsOptions = “linenos=inline”

I believe Chroma understands only three values of that `linenos` parameter:

- Not set
- Set to `table` (since Hugo 0.30)
- Set to anything else (inline)

---

<div class="post-metadata">

### Author: ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)
#### Post date: [October 20, 2017, 1:30pm UTC](https://discourse.gohugo.io/t/list-of-all-chroma-classes-solved/8870/4 "2017-10-20T13:30:35Z")

</div>

That is correct; but I would add that Hugo translates the “linenos=inline” to Chroma options, so if you ask the Chroma author about “linenos”, he would just shake his head.

---

<div class="post-metadata">

### Author: ![Jura](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jura/32/13581_2.png) [@Jura](https://discourse.gohugo.io/u/Jura)
#### Post date: [October 20, 2017, 2:17pm UTC](https://discourse.gohugo.io/t/list-of-all-chroma-classes-solved/8870/5 "2017-10-20T14:17:22Z")

</div>

> [@bep](#):
>
> The Chroma integration only supports a subset of the Pygments options (I deliberately reused those options to make the transition seamless). That subset is documented, but it does not include cssclass.

Thanks for the quick reply.

To give some feedback, perhaps the [doc](https://gohugo.io/content-management/syntax-highlighting/#readout) page can be updated with that information, since there `cssclass` is listed:

![2017-10-20_16-06-09](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/8/8e9788d5d281de3ae63bb2fa614d4d314350e986.png)

Because the same documentation page also says _“To make the transition from Pygments to Chroma seamless, they share a common set of configuration options”_, I read that as saying that Pygments configuration options are compatible with Chroma.

Perhaps a table that says which options are Chroma-specific, which ones are Pygments-specific, and which ones are shared might help a lot.

> [@kaushalmodi](#):
>
> Though, the chroma generated CSS is documented well enough.
> 
> For example, do:
> 
> hugo gen chromastyles

Thanks, I’m familiar with that command, but that does not generate a full list of Chroma classes (as reported [here](https://github.com/gohugoio/hugo/issues/3914) on GitHub).

> [@kaushalmodi](#):
>
> The class names are derived from Pygments. So you will find more info in Pygments documentation.

I did find a [token list](http://pygments.org/docs/tokens/) in the Pygments docs, but not the abbreviated class names with that. But I’ll ask in the Chroma GitHub repository.

Thanks guys!

---

<div class="post-metadata">

### Author: ![Jura](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jura/32/13581_2.png) [@Jura](https://discourse.gohugo.io/u/Jura)
#### Post date: [October 20, 2017, 2:35pm UTC](https://discourse.gohugo.io/t/list-of-all-chroma-classes-solved/8870/6 "2017-10-20T14:35:05Z")

</div>

I’ve found a list of all Chroma classes in the Chroma GitHub repository [here](https://github.com/alecthomas/chroma/blob/master/types.go).

Below is the formatted output from that source file, in case anyone else is wondering what all the possible Chroma classes are:

| Token | Chroma class |
| --- | --- |
| Keyword | .chroma .k |
| KeywordConstant | .chroma .kc |
| KeywordDeclaration | .chroma .kd |
| KeywordNamespace | .chroma .kn |
| KeywordPseudo | .chroma .kp |
| KeywordReserved | .chroma .kr |
| KeywordType | .chroma .kt |

.

| Token | Chroma class |
| --- | --- |
| Name | .chroma .n |
| NameAttribute | .chroma .na |
| NameBuiltin | .chroma .nb |
| NameBuiltinPseudo | .chroma .bp |
| NameClass | .chroma .nc |
| NameConstant | .chroma .no |
| NameDecorator | .chroma .nd |
| NameEntity | .chroma .ni |
| NameException | .chroma .ne |
| NameFunction | .chroma .nf |
| NameFunctionMagic | .chroma .fm |
| NameProperty | .chroma .py |
| NameLabel | .chroma .nl |
| NameNamespace | .chroma .nn |
| NameOther | .chroma .nx |
| NameTag | .chroma .nt |
| NameVariable | .chroma .nv |
| NameVariableClass | .chroma .vc |
| NameVariableGlobal | .chroma .vg |
| NameVariableInstance | .chroma .vi |
| NameVariableMagic | .chroma .vm |

.

| Token | Chroma class |
| --- | --- |
| Literal | .chroma .l |
| Date | .chroma .ld |

.

| Token | Chroma class |
| --- | --- |
| LiteralString | .chroma .s |
| LiteralStringAffix | .chroma .sa |
| LiteralStringBacktick | .chroma .sb |
| LiteralStringChar | .chroma .sc |
| LiteralStringDelimiter | .chroma .dl |
| LiteralStringDoc | .chroma .sd |
| LiteralStringDouble | .chroma .s2 |
| LiteralStringEscape | .chroma .se |
| LiteralStringHeredoc | .chroma .sh |
| LiteralStringInterpol | .chroma .si |
| LiteralStringOther | .chroma .sx |
| LiteralStringRegex | .chroma .sr |
| LiteralStringSingle | .chroma .s1 |
| LiteralStringSymbol | .chroma .ss |

.

| Token | Chroma class |
| --- | --- |
| LiteralNumber | .chroma .m |
| LiteralNumberBin | .chroma .mb |
| LiteralNumberFloat | .chroma .mf |
| LiteralNumberHex | .chroma .mh |
| LiteralNumberInteger | .chroma .mi |
| LiteralNumberIntegerLong | .chroma .il |
| LiteralNumberOct | .chroma .mo |

.

| Token | Chroma class |
| --- | --- |
| Operator | .chroma .o |
| OperatorWord | .chroma .ow |

.

| Token | Chroma class |
| --- | --- |
| Punctuation | .chroma .p |

.

| Token | Chroma class |
| --- | --- |
| Comment | .chroma .c |
| CommentHashbang | .chroma .ch |
| CommentMultiline | .chroma .cm |
| CommentPreproc | .chroma .cp |
| CommentPreprocFile | .chroma .cpf |
| CommentSingle | .chroma .c1 |
| CommentSpecial | .chroma .cs |

.

| Token | Chroma class |
| --- | --- |
| Generic | .chroma .g |
| GenericDeleted | .chroma .gd |
| GenericEmph | .chroma .ge |
| GenericError | .chroma .gr |
| GenericHeading | .chroma .gh |
| GenericInserted | .chroma .gi |
| GenericOutput | .chroma .go |
| GenericPrompt | .chroma .gp |
| GenericStrong | .chroma .gs |
| GenericSubheading | .chroma .gu |
| GenericTraceback | .chroma .gt |

A description of these tokens can be found [here](http://pygments.org/docs/tokens/).

---

<div class="post-metadata">

### Author: ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)
#### Post date: [October 20, 2017, 3:15pm UTC](https://discourse.gohugo.io/t/list-of-all-chroma-classes-solved/8870/7 "2017-10-20T15:15:53Z")

</div>

> [@Jura](#):
>
> hanks for the quick reply.
> 
> To give some feedback, perhaps the doc page can be updated with that information, since there cssclass is listed:

So, for Pygments we support ALL of those, for Chroma only a subset. The docs looks correct to me.
