Runtime Filters

[mathiasschopmans]

I'm using Jade as a static prototype generator and would like to render some html-docs for my custom components, mixins, snippets to support my colleagues, which are integrating my html templates into different CMS.

helpers.jade

mixin code-example(name, options)
  - options = extend({"html":true, "jade":true, "render":true}, options)
  .code-example
    h3.name= name

    if options.html
      pre.code.code-html(data-language="html")
        :examplehtml
          block

    if options.jade
      pre.code.code-jade(data-language="jade")
        :examplejade
          block

  if options.render
    block

usage.jade

+code-example("Tabs")
  +tabs()
    each tab, num in ["One", "Two", "Three"]
      +tab(tab)
        h1 Content Tab #{num}

• :examplehtml should be a basic jade wrapper which will return the rendered, but escaped html.
• :examplejade will be a basic wrapper to return the escaped jade

Do you know how to access the block from filters?

Thank you!

[niklashigi]

@mathiasschopmans Great suggestion, this would simplify the implemenation of code example boxes like the one below (from the Primer CSS documentation) while keeping your code DRY.

[brunowego]

Is there any way around this? Force block work inside a filter...

mixin highlight(lang = 'html')
  pre
    code(class=lang)
      :escape-html:html-beautify:pug
        block

"jstransformer-escape-html": "~1.1.0",
"jstransformer-html-beautify": "0.0.1",
"jstransformer-pug": "~0.3.0",