The :code filter wraps a content with the <code> tag and a custom class name.

Enable filter

Defaults, the filter is disabled. If this filter is used, it must be enabled in webpack.config.js.

Use the Pug loader options in the webpack config:
{
  test: /.pug$/,
  loader: '@webdiscus/pug-loader',
  options: {
    // enable embedded filters
    embedFilters: {
      // enable the :code filter
      code: {
        className: 'language-', // class name of `<code>` tag, needed for `prismjs` theme
      },
    },
  },
},

The filter options:

  • className {string} This string will be added to class name of the <code class="CLASS_NAME"> tag. For example, the prismjs use the language-* as class name in <code> tag for styling this tag.

The usage of inline filter #[:code ...] is equivalent to inline tag #[code.language- ...], but using the #[:code] filter a class name can be defined at initialisation and the filter can be used in combination with other as nested filter.

Inline syntax

Pug: #[:code function() { return true }]
Result: function() { return true }

To display a HTML tag must be used nested filters :code:escape ... to encode reserved HTML chars.
See the usage of :escape filter.

Pug: #[:code:escape <div>] is equivalent to <code class="language-">#{'<div>'}</code>
Result: <div>

To highlight a code syntax must be used nested filters :code:highlight(lang) .... When used :highlight filter for HTML code then the :escape filter is not needed.
See the usage of :highlight filter.

Pug: #[:code:highlight(html) <div class="container">content</div>]
Result: <div class="container">content</div>