Markdown: Code snippet

Code snippet#

Code fragment#

To define a code fragment, add a backtick (`) before and after the code to highlight.

MarkdownHTMLRendering
Enter `hugo version` to get the Hugo version
<p>Enter <code>hugo version</code> to get the Hugo version</p>
Enter hugo version to get the Hugo version

Nested code fragment#

To define a nested code fragment, add two backticks (`) before and after the global text that will contain the nested code fragment.

MarkdownHTMLRendering
``Enter `hugo version` to get the Hugo version``
<p><code>Enter `hugo version` to get the Hugo version</code></p>
Enter `hugo version` to get the Hugo version

Code block#

To define a code block over several lines, add 4 spaces to each line start of code.

MarkdownHTMLRendering
    <html>
      <head>
        <title>Hello world</title>
      </head>
    </html>
<pre> <code> <html> <head> <title>Hello world</title> </head> </html> </code> </pre>
<html>
  <head>
    <title>Hello world</title>
  </head>
</html>

Fenced code block#

Classic syntax#

To define a fenced code block over several lines, add 3 backticks (`) at the start of two new lines, before and after the code to highlight.

MarkdownHTMLRendering
```
<html>
  <head>
    <title>Hello world</title>
  </head>
</html>
```
<pre> <code> <html> <head> <title>Hello world</title> </head> </html> </code> </pre>
<html>
  <head>
    <title>Hello world</title>
  </head>
</html>

Classic syntax with highlighting#

To define a fenced code block with code highlighting based on the language used, add the language code after the 3 backticks (`) to the first line.

MarkdownHTMLRendering
```html {linenos=table,hl_lines=[1,"3-4"],linenostart=10}
<html>
  <head>
    <title>Hello world</title>
    <meta charset="UTF-8">
  </head>
</html>
```
[...] <pre> <code> <html> <head> <title>Hello world</title> <meta charset="UTF-8"> </head> </html> </code> </pre> [...]
10
11
12
13
14
15

<html>
  <head>
    <title>Hello world</title>
    <meta charset="UTF-8">
  </head>
</html>
It is possible to use the highlighting Hugo advanced functions in order to get a rendering that suit your needs.