Syntax highlighting styles

Highlight code examples using one of these styles.

Overview

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

Use the transform.Highlight function within your templates
Use the highlight shortcode with any content format
Use fenced code blocks with the Markdown content format

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

Set the default syntax highlighting style in your site configuration:

markup:
  highlight:
    style: monokai

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

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

See configure Markup.

Styles

This gallery demonstrates the application of each syntax highlighting style with code examples written in different programming languages.

abap

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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: March 5, 2025 : content: Consolidate configuration documentation (b6cae5cbc)

Improve this page