Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Express Basics (2015) Doing more with Express Making Lists in Jade Templates

Kirsty Pollock
Kirsty Pollock
14,261 Points
Posted by Kirsty Pollock
Kirsty Pollock
14,261 Points

Comments in Jade.... How to put them in where you want them?

Given the following (from blog jade file)

extends ./layout.pug

block content

  section.post

    .container

      .row

       .col-lg-8.col-lg-offset-2.text-center

          h2.section-heading #{post.title}

          hr.light

          p.text-faded

            | #{post.description}

          .article

            | #{post.description}

How on earth do you put comments in anywhere except at the end? At the start, it will give : "Declaration of template inheritance ("extends") should be the first thing in the file."

Before "block content" gives: "Only named blocks and mixins can appear at the top level of an extending template"

Anywhere in the middle causes the code below it to be treated as comments because it is indented....

This seems rather a handicap for writing well-commented code. IS there a way round this? (and sorry, but I can't seem to get the jade code correctly marked down in this question!

2 Answers

William Li
PLUS
William Li
Courses Plus Student 26,868 Points
William Li
William Li
Courses Plus Student 26,868 Points

Jade has several ways of writing comments, I think you're asking about block comments, right? Here's how to write it in Jade.

sample.jade 
block content
  section.post
    //
      some comment line 1
      some comment line 2
    .container
      .row

Pay attention to the block comment's indentation. And here's the compiled HTML code.

sample.html 
<section class="post">
  <!--
  some comment line 1
  some comment line 2
  -->
  <div class="container">
    <div class="row"></div>
  </div>
</section>

You may check out this Jade docs for more info on comments. Happy coding.

Kirsty Pollock
Kirsty Pollock
14,261 Points
Kirsty Pollock
Kirsty Pollock
14,261 Points

I did go to the docs, and did find block comment, but I had used it above the code, and with the "normal" indentation for comments.... i.e. same as the code following. I can see from your example that the workaround is to indent the initial block comment // comment MORE than the line following, thus avoiding the following code being treated as comments. Simple, but not, to me, intuitive. It is not the ideal visual layout, and feels a touch workaroundish, but still, maybe I should have thought of it! it will do the job. Thank you.

Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,497 Points
Cindy Lea
Cindy Lea
Courses Plus Student 6,497 Points

Multi-line comments start with /* and end with */.

Any text between /* and */ will be ignored by JavaScript.