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

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

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

`code`

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

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

Забор

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

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

Highligh

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

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

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

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

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

<section>
    <h3>Списокh3>
    <ol>
        <li>Строка 1li>
        <li>Строка 2li>
        <li>Строка 3li>
    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: 1
em auto;
    padding: 0.5
em;
    border: 1
px solid rgba(0,0,0,0.3);
}

Шорткод

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

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

{{}}

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

{{< shortcode >}}

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

–

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