#sg-code.showcase.shadow-1
  header.showcase-header
    h2 Code Examples
    p Below are some examples of how you can add/customize code examples in a page.

    strong.l-space-top-3.l-space-bottom-1 ATTRIBUTES:
    ul
      li <strong>name</strong> Name displayed in Tab (required for tabs)
      li <strong>language</strong> javascript, html, etc.
      li <strong>escape</strong> html (escapes html, woot!)
      li <strong>format</strong> linenums (or linenums:4 specify starting line)

  .showcase-content

    .l-sub-section
      h3 Inline Code Examples

      p.
        Inline code example <code ng-non-bindable>{{username}}</code>

      code-example(format="linenums" language="html" escape="html").
        Inline code example <code ng-non-bindable>{{username}}</code>

      p.
        Notice the <strong>ng-non-bindable</strong> attribute. This is only
        needed when using code examples inline <strong>code-tabs and code-example directives
        automatically do this</strong>.

    .l-sub-section
      h3 Adding a code example

      code-example(format="linenums" language="html").
        code-example(format="linenums" language="javascript").
          //SOME CODE

    .l-sub-section
      h3 Specify starting line number

      code-example(language="javascript" format="linenums:4").
        code-example(language="html" format="linenums:4").
          var title = "This starts on line four";

    .l-sub-section
      h3 Specify a language

      p.
        Prettify makes a best effort to guess the language but
        works best with C-like and HTML-like languages. For
        others, there are special language handlers that are
        chosen based on language hints. Add a class that matches
        your desired language (example below uses <strong>.lang-html</strong>)

      code-example(language="html" format="linenums").
        h1 Title
        p This is some copy...

    .l-sub-section
      h3 Code Highlighting
      p.
        There are three types of highlights avialable
        <strong>Outlined</strong>, <strong>Pink</strong>, and
        <strong>Black</strong>. You can see examples below and
        the class names needed for each type.

      code-example(format="linenums").
        // Pink Background Version
        // class="pnk"
        var elephants = "The <span class='pnk'>pink</span> elephants were marching...";

        // Black Background Version
        // class="blk"
        var night = "The night was pitch <span class='blk'>black</span>.";

        // Outlined Version
        // class="otl"
        var match = "The <span class='otl'>bird</span> ate <span class='otl'>bird</span> seed near the <span class='otl'>bird</span> bath ";

    .l-sub-section
      h3 Code Tabs
      p.
        Code Tabs are a great way to show different languages and versions
        of a particular piece of code. When using these tabs make sure the
        <stron>content is always related</strong>.

      code-tabs
        code-pane(language="javascript" format="linenums" name="ES5").
          // ES5
          var hello = 'blah';

        code-pane(language="javascript" format="linenums" name="TypeScript").
          // TypeScript
          var hello = 'blah';

      p To create code tabs simply use the directives below
      code-example(format="linenums").
        code-tabs
          code-pane(format="linenums" name="Tab 1").
            // TAB 1 CONTENT
          code-pane(format="linenums" name="Tab 2").
            // TAB 2 CONTENT