Styling

The highlighter writes HTML and no style: each token is a <span> with a class, and your CSS gives it a color. Write rules for the classes you need, such as .hljs-keyword { color: #0033b3; }, or use an existing theme written for the hljs- class names.

The class names

A class name is the prefix, hljs- by default, followed by the scope of the token:

var html = SyntaxHighlighter.Highlight("function add(a, b) { return a + b; }", "javascript");

Assert.Equal("""<span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">a, b</span>) { <span class="hljs-keyword">return</span> a + b; }""", html);

• A scope with a sub-scope, such as the name of a function, gives two classes: hljs-title and function_. Style .hljs-title to color every title, or .hljs-title.function_ to color the functions only. Each level of sub-scope adds one more underscore: class_, then inherited__.
• Spans nest: a string can contain an interpolated expression, and a tag contains its name and attributes.
• Text that is not a token, such as punctuation and whitespace in most languages, is not in a span.

The grammars use these scopes most:

Embedded languages

Some languages contain others: CSS and JavaScript in HTML, C# in Razor. The embedded code is wrapped in a <span class="language-…"> with the name of its language, and highlighted with its own grammar:

var html = SyntaxHighlighter.Highlight("<style>p { color: red }</style>", "html");

Assert.Equal("""<span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"><span class="hljs-selector-tag">p</span> { <span class="hljs-attribute">color</span>: red }</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>""", html);

The language- class has no prefix. Use it to style an embedded language differently, such as .language-css .hljs-attribute.

Change the prefix

HighlightOptions.ClassPrefix replaces hljs-, for instance to avoid a conflict with another stylesheet of the page:

var html = SyntaxHighlighter.Highlight(
    "public class MyClass { }",
    "csharp",
    new HighlightOptions { ClassPrefix = "syntax-" });

Assert.Equal("""<span class="syntax-keyword">public</span> <span class="syntax-keyword">class</span> <span class="syntax-title">MyClass</span> { }""", html);

The prefix may contain ASCII letters, digits, - and _ only; any other character throws an ArgumentException. The sub-scope classes, such as function_, and the language- classes keep their names. A theme written for the hljs- class names does not apply to another prefix.