HUGO
Menu
GitHub 89143 stars Mastodon

Syntax highlighting styles

Highlight code examples using one of these styles.

Overview

Hugo provides several methods to add syntax highlighting to code examples:

Regardless of method, use any of the syntax highlighting styles below.

Set the default syntax highlighting style in your project configuration:

markup:
  highlight:
    style: monokai

[markup]
  [markup.highlight]
    style = 'monokai'

{
   "markup": {
      "highlight": {
         "style": "monokai"
      }
   }
}

See configure Markup.

By default, Hugo applies syntax highlighting using inline CSS styles. To use an external CSS file instead, set noClasses to false in your configuration, then generate the stylesheet with the hugo gen chromastyles command.

Modes

New in v0.164.0

Syntax highlighting styles are designed for either light mode or dark mode displays. Some light mode styles have a corresponding dark mode counterpart. When using external CSS stylesheets, you can switch between them based on user preference or environment.

The table below lists the light mode styles that have a dark mode counterpart. Each style name links to its entry in the Gallery section of this page.

Light mode styleDark mode counterpart
catppuccin-lattecatppuccin-mocha
githubgithub-dark
gruvbox-lightgruvbox
kanagawa-lotuskanagawa-wave
modus-operandimodus-vivendi
monokailightmonokai
paraiso-lightparaiso-dark
rose-pine-dawnrose-pine
solarized-lightsolarized-dark
tokyonight-daytokyonight-night
xcodexcode-dark

This gallery demonstrates the application of each syntax highlighting style with code examples written in different programming languages. Each style lists its mode (light or dark). For styles with a counterpart in the opposite mode, the counterpart style is also listed.

abap

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

algol

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

algol_nu

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

arduino

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

ashen

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

aura-theme-dark

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

aura-theme-dark-soft

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

autumn

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

average

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

base16-snazzy

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

borland

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

bw

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

catppuccin-frappe

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

catppuccin-latte

mode: light
dark mode counterpart: catppuccin-mocha

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

catppuccin-macchiato

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

catppuccin-mocha

mode: dark
light mode counterpart: catppuccin-latte

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

colorful

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

darcula

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

doom-one

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

doom-one2

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

dracula

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

emacs

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

evergarden

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

friendly

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

fruity

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

github

mode: light
dark mode counterpart: github-dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

github-dark

mode: dark
light mode counterpart: github

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

gruvbox

mode: dark
light mode counterpart: gruvbox-light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

gruvbox-light

mode: light
dark mode counterpart: gruvbox

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

hr_high_contrast

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

hrdark

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

igor

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

kanagawa-dragon

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

kanagawa-lotus

mode: light
dark mode counterpart: kanagawa-wave

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

kanagawa-wave

mode: dark
light mode counterpart: kanagawa-lotus

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

lovelace

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

manni

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

modus-operandi

mode: light
dark mode counterpart: modus-vivendi

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

modus-vivendi

mode: dark
light mode counterpart: modus-operandi

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

monokai

mode: dark
light mode counterpart: monokailight

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

monokailight

mode: light
dark mode counterpart: monokai

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

murphy

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

native

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

nord

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

nordic

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

onedark

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

onesenterprise

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

paraiso-dark

mode: dark
light mode counterpart: paraiso-light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

paraiso-light

mode: light
dark mode counterpart: paraiso-dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

pastie

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

perldoc

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

pygments

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

rainbow_dash

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

rose-pine

mode: dark
light mode counterpart: rose-pine-dawn

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

rose-pine-dawn

mode: light
dark mode counterpart: rose-pine

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

rose-pine-moon

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

rpgle

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

rrt

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

solarized-dark

mode: dark
light mode counterpart: solarized-light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

solarized-dark256

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

solarized-light

mode: light
dark mode counterpart: solarized-dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

swapoff

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

tango

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

tokyonight-day

mode: light
dark mode counterpart: tokyonight-night

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

tokyonight-moon

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

tokyonight-night

mode: dark
light mode counterpart: tokyonight-day

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

tokyonight-storm

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

trac

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

vim

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

vs

mode: light

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

vulcan

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

witchhazel

mode: dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

xcode

mode: light
dark mode counterpart: xcode-dark

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'

xcode-dark

mode: dark
light mode counterpart: xcode

css

body {
  font-size: 16px;  /* comment */
}

html

<a href="/about.html">Example</a>  <!-- comment -->

go-html-template

{{ with $.Page.Params.content }}
  {{ . | $.Page.RenderString }}  {{/* comment */}}
{{ end }}

javascript

if ([1,"one",2,"two"].includes(value)){
  console.log("Number is either 1 or 2.");  // comment
}

markdown

{{< figure src="kitten.jpg" >}}
[example](https://example.org "An example")  <!-- comment -->

toml

[params]
bool = true  # comment
string = 'foo'
Last updated: June 25, 2026 : content: Updates for v0.164.0 (e2888eb83)
Improve this page