0

I'm trying to build a style guide in jade + prismjs + angular. It will have jade code examples. So I need some of my jade to "stay jade." For example:

//- source.jade
.description A component
pre.code-example
  code.language-jade
    .my-component
      .my-component-title Hello
      .my-component-body World

I want this to render to

//- rendered.html
<div class="description">A component</div>
<pre class="code-example">
  <code class="language-jade">
    .my-component
      .my-component-title Hello
      .my-component-body World
  </code>
</pre>

Is there a way to do tell jade to just leave the contents of code.language-jade alone?

I'll also consider completely different approaches. Jade as the 'outer' template language is non-negotiable, and it has to work in angular. I'm only using prismjs because my previous choice (highlighterjs) doesn't support jade.

Thx.

leff
  • 575
  • 1
  • 3
  • 12

1 Answers1

1

Just use dot, after tag or class for interpolation

.description A component
pre.code-example
  code.language-jade.
    .my-component
      .my-component-title Hello
      .my-component-body World

http://jade-lang.com/reference/plain-text/

Example

Velichko Konstantin
  • 11
  • 4
  • I see, that works! Thanks! But I think the documentation you want is actually for Block in a Tag found here http://jade-lang.com/reference/plain-text/ (the interpolation page uses the p. in the example, but it's actually documenting the #[a...] syntax) – leff Jun 29 '16 at 18:38