11ty/eleventy-plugin-syntaxhighlight

Pug template support

brettinternet opened this issue · 1 comments

The Pug template option is not currently supported. Given Pug's popularity, it would be nice to support it.

I have found that the pug markdown filter is very easy to extend. Perhaps the "pug way" to accomplish syntax highlighting is much better without any intervention from this library.

We can however make use of src/HighlightPairedShortcode.js and its abstraction of PrismJS as it's implemented for the Nunjucks shortcode.

Here's an example of what that looks like:

.eleventy.js:

const markdownIt = require('markdown-it')
const markdownItAnchor = require('markdown-it-anchor')
const {
  pairedShortcode: eleventyHighlighter,
} = require('@11ty/eleventy-plugin-syntaxhighlight')

const highlight = (content, args) => {
  if (args) {
    const [lang, ...highlightNumbers] = args.split(' ')
    return eleventyHighlighter(content, lang, highlightNumbers.join(' '))
  }
}

const markdown = markdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight,
})
  .use(markdownItAnchor)
  .disable('code')

module.exports = (config) => {
  config.setPugOptions({
    filters: {
      markdown: (text, options) =>
        markdown.set(options).set({ highlight }).render(text),
    },
  })
}

index.pug:

:markdown
  # Markdown

  Markdown document with http://links.com and

  ```js
  var codeBlocks;
  ```