#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

      pre.prettyprint.linenums
        code.
          pre.prettyprint.linenums
            code.
              //SOME CODE
              var name = "Alex Wolfe";
              alert(name);

    .l-sub-section
      h3 Specify starting line number

      pre(class="prettyprint linenums:4")
        code.
          pre.prettyprint.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>)

      pre(class="prettyprint lang-html")
        code.
          pre.prettyprint.lang-html
            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.

      pre.prettyprint.linenums
        code.
          // 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 ";