angular-cn/public/docs/_includes/styleguide/_code-examples.jade

#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.

  .showcase-content
    .l-sub-section
      h3 Adding a code example

      code-example(format="linenums").
        //SOME CODE
        var name = "Alex Wolfe";
        alert(name);

    .l-sub-section
      h3 Specify starting line number

      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" escape="html").
        // 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';