Hugo Cosmos | Code Blocks

There are several ways to add code blocks. Most of these functions and the dependent formatting rely on the .highlight CSS class¹. You must ensure that you always assign a language to your code blocks if you want to use these functions. If you do not want to apply syntax highlighting, you can also specify plain or text as the language.

Inline code

1

this is an example for inline code `hello world` and [`link`](https://github.com/librabyte/hugo-theme-cosmos)

Tip

this is an example for inline code hello world and link

Code block

Indented code block

A simple code block can be generated by indenting several lines of code by at least two spaces.

Info

Keep in mind this method is not recommended. Try fenced code block!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Example HTML5 Document</title>
    </head>
    <body>
      <p>Test</p>
    </body>
    </html>

Tip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Fenced code block

If you want to gain more control of your code block you can enclose your code by at least three backticks ``` a so called fence.

In GFM (GitHub Flavored Markdown) you can also add a language specifier directly after the opening fence, ```js, and syntax highlighting will automatically be applied according to the selected language in the rendered HTML.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


```js
grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
};
```

Tip

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
};

Code blocks can also be uses without language specification:

1
2
3


```plain
code blocks without language specification
```

Tip

1

code blocks without language specification

Highlight shortcode

Hugo has a build-in shortcode for syntax highlighting² using Chroma, see Syntax Highlighting for additional documentation.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{{< highlight html >}}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>
{{< /highlight html >}}

results are as followed:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Gist

Hugo also support Gist³ short code to support code reference using Github Gist[4]:

1

{{< gist spf13 7896402 >}}

This is the result:

Github Code

Sometimes we want to refer github code directly without Gist, Hugo Cosmos supports that by leveraging EmbedGithub⁴.

1

{{< ghcode url="https://github.com/gohugoio/hugo/blob/77fc74a5b20f50298ac4a1cd88e436932fc2226f/markup/highlight/highlight.go#L60-L65" >}}

This is the result:

Jupter Notebook

TODO