<commit_before>extends ./layout.jade

block content
  #body
    h2 Tutorial

    h3 Introduction
    p.
      This tutorial is a work in progress. Once it's finished it will become a fully grown getting started guide.
    p.
      Welcolme to the Jade templating engine.  Jade is designed primarily for server side templating in node.js, however it can be used in many other environments.  It is only intended to produce XML like documents (HTML, RSS etc.) so don't use it to create plain text/markdown/CSS/whatever documents.
    p.
      This tutorial will take you through:
    ul
      li The Basics
        ul
          li Creating simple tags
          li Putting text inside your tags
          li Attributes
          li IDs and Classes
      li JavaScript
        ul
          li Outputing Text
          li Setting Attributes
          li Loops and Conditionals
      li Advanced Templating
        ul
          li Extends & Blocks
          li Includes
          li Mixins
          li Filters

    h3 The Basics
    p Jade can be used just as a short hand for HTML.  This section covers everything you need to know to do that.
    h4 Creating Simple Tags
    p.
      Jade is whitespace sensitive, so there's no need to close your tags, jade does that for you.  You can also nest tags within other tags just by indenting them.
    .row(data-control='interactive')
      .col
        pre(data-control='input-jade')
          code
            :jadesrc
              div
                address
                i
                strong
      .col
        pre(data-control='output-html')
          code
            :htmlsrc
              <div>
                <address></address>
                <i></i>
                <strong></strong>
              </div>
    h4 Putting Text Inside your Tags
    p.
      By default, the content of a tag is parsed as more jade.  There are three ways to put plain text inside a tag.
    .row(data-control='interactive')
      .col
        pre(data-control='input-jade')
          code
            :jadesrc
              h1 Welcolme to Jade
              p
                | Text can be included in a number of
                | different ways.
              p.
                This way is shortest if you need big
                blocks of text spanning multiple
                lines.
      .col
        pre
          code.output
            :htmlsrc
              <h1>Welcolme to Jade</h1>
              <p>Text can be included in a number of
                 different ways.</p>
              <p>This way is shortest if you need big
                 blocks of text spanning multiple
                 lines.</p>
    h4 Adding Attributes to your Tags
    p.
      To add attributes you put them in brackets after the tag name, note that they must be seperated by a comma.
    .row(data-control='interactive')
      .col
        pre(data-control='input-jade')
          code
            :jadesrc
              h1(id="title") Welcolme to Jade
              button(class="btn", data-action="bea").
                Be Awesome
      .col
        pre(data-control='output-html')
          code
            :htmlsrc
              <h1 id="title">Welcolme to Jade</h1>
              <button class="btn" data-action="bea">
                Be Awesome
              </button>
    h4 IDs and Classes
    p.
      Adding IDs and Classes is supper common, so we made it supper easy to do by adding a simple short hand.  The syntax is just like that of CSS selectors:
    .row(data-control='interactive')
      .col
        pre(data-control='input-jade')
          code
            :jadesrc
              h1#title Welcolme to Jade
              button.btn(data-action="bea") Awesome
      .col
        pre(data-control='output-html')
          code
            :htmlsrc
              <h1 id="title">Welcolme to Jade</h1>
              <button class="btn" data-action="bea">
                Awesome
              </button>

    h3 JavaScript
    p Jade is much more than just a short hand for HTML.  It also has features that let you build dynamic templates.

    h4 Outputing Text<commit_msg>Fixed Typos in Tutorial<commit_after>extends ./layout.jade

block content
  #body
    h2 Tutorial

    h3 Introduction
    p.
      This tutorial is a work in progress. Once it's finished it will become a fully grown getting started guide.
    p.
      Welcome to the Jade templating engine.  Jade is designed primarily for server side templating in node.js, however it can be used in many other environments.  It is only intended to produce XML like documents (HTML, RSS etc.) so don't use it to create plain text/markdown/CSS/whatever documents.
    p.
      This tutorial will take you through:
    ul
      li The Basics
        ul
          li Creating simple tags
          li Putting text inside your tags
          li Attributes
          li IDs and Classes
      li JavaScript
        ul
          li Outputing Text
          li Setting Attributes
          li Loops and Conditionals
      li Advanced Templating
        ul
          li Extends & Blocks
          li Includes
          li Mixins
          li Filters

    h3 The Basics
    p Jade can be used just as a short hand for HTML.  This section covers everything you need to know to do that.
    h4 Creating Simple Tags
    p.
      Jade is whitespace sensitive, so there's no need to close your tags, jade does that for you.  You can also nest tags within other tags just by indenting them.
    .row(data-control='interactive')
      .col
        pre(data-control='input-jade')
          code
            :jadesrc
              div
                address
                i
                strong
      .col
        pre(data-control='output-html')
          code
            :htmlsrc
              <div>
                <address></address>
                <i></i>
                <strong></strong>
              </div>
    h4 Putting Text Inside your Tags
    p.
      By default, the content of a tag is parsed as more jade.  There are three ways to put plain text inside a tag.
    .row(data-control='interactive')
      .col
        pre(data-control='input-jade')
          code
            :jadesrc
              h1 Welcome to Jade
              p
                | Text can be included in a number of
                | different ways.
              p.
                This way is shortest if you need big
                blocks of text spanning multiple
                lines.
      .col
        pre
          code.output
            :htmlsrc
              <h1>Welcome to Jade</h1>
              <p>Text can be included in a number of
                 different ways.</p>
              <p>This way is shortest if you need big
                 blocks of text spanning multiple
                 lines.</p>
    h4 Adding Attributes to your Tags
    p.
      To add attributes you put them in brackets after the tag name, note that they must be seperated by a comma.
    .row(data-control='interactive')
      .col
        pre(data-control='input-jade')
          code
            :jadesrc
              h1(id="title") Welcome to Jade
              button(class="btn", data-action="bea").
                Be Awesome
      .col
        pre(data-control='output-html')
          code
            :htmlsrc
              <h1 id="title">Welcome to Jade</h1>
              <button class="btn" data-action="bea">
                Be Awesome
              </button>
    h4 IDs and Classes
    p.
      Adding IDs and Classes is supper common, so we made it supper easy to do by adding a simple short hand.  The syntax is just like that of CSS selectors:
    .row(data-control='interactive')
      .col
        pre(data-control='input-jade')
          code
            :jadesrc
              h1#title Welcome to Jade
              button.btn(data-action="bea") Awesome
      .col
        pre(data-control='output-html')
          code
            :htmlsrc
              <h1 id="title">Welcome to Jade</h1>
              <button class="btn" data-action="bea">
                Awesome
              </button>

    h3 JavaScript
    p Jade is much more than just a short hand for HTML.  It also has features that let you build dynamic templates.

    h4 Outputing Text
{'fraction_non_alphanumeric': 0.06038559476173154, 'fraction_numerical': 0.0043652237177155325, 'mean_word_length': 1.4828416616496087, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7185855', 'n_tokens_mistral': 2210, 'n_tokens_neox': 2119, 'n_words': 892}