В этой статье мы изучим, как добавить фрагмент кода в контент сайта, созданного на hugo.

Элемент строки

Для того, чтобы выделить фрагмент кода в строке, достаточно заключить необходимый контент в реверсивные кавычки:

`code`

В результате, на странице мы увидим code.

Отдельный блок

Забор

Для размещения кода в отдельном блоке можно использовать конструкцию, называемую “забор” (“fence”), состоящую из трех открывающих и закрывающих реверсивных кавычек:

```
code is here...
```

Highligh

Также для hugo можно использовать шорткод highlite, который, как и “забор” состоит из двух элементов - открывающего и закрывающего:

{{< highlight md >}}
code is here...
{{< /highlight >}}

Подсветка синтаксиса:

Как “забор”, так и hightlite, поддерживет подсветку синтаксиса, для этого достаточно указать используемый язык или разметку в конце открывающего элемента.

Например для html код будет выглядеть так:

<section>
    <h3>Список</h3>
    <ol>
        <li>Строка 1</li>
        <li>Строка 2</li>
        <li>Строка 3</li>
    </ol>
</section> 

для javascript:

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']
      }
    }
  }
};

для css:

.class-name {
    display: block;
    margin: 1em auto;
    padding: 0.5em;
    border: 1px solid rgba(0,0,0,0.3);
}

Шорткод

Но что делать если нам нужно показать пример шорткода (shortcode). В этом случае есть небольшая хитрость.

Такой синтаксис:

{{</* shortcode */>}}

даст следующий результат:

{{< shortcode >}}

Во всех остальных случаях hugo будет пытаться выполнить шорткод.

–

Спасибо за внимание.