title: How to display non-HTML code on a webpage
body: <p>So, at the moment, I have some unnecessarily lengthy code to display text in a programming format.  Here's what I've got:</p>
  
  <pre><code>    &lt;table id = "code"&gt;
          &lt;tr&gt;
              &lt;td id = "comment"&gt;/// If-statement example&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;var x = 5;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;if x &amp;#60 3&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;{&lt;/td&gt;
          &lt;tr&gt;
          &lt;tr&gt;
              &lt;td&gt;    draw_text(100, 100, "x is less than 3!");&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;    // Above is a function to "draw" text to the screen.  It takes an x coordinate, a y coordinate, and text to draw.  If it's not in double quotes, then it will print the value of that variable.&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>With the CSS of:</p>
  
  <pre><code>#code
  {
      text-align: left;
      font-family: "Times New Roman";
      font-size: 20px;
      position: float;
      margin: auto;
      margin-top: 10px;
      margin-bottom: 10px;
      width: 75%;
      border-style: solid;
      border-width: 1px;
      border-radius: 5px;
      border-color: #333;
  }
  
  #comment
  {
      color: #91DD8D;
  }
  
  tr:nth-child(even)
  {
      background: #444
  }
  
  tr:nth-child(odd)
  {
      background: #666
  }
  
  table 
  {
      counter-reset: rowNumber;
      font-size: 16px;
  }
  
  table tr 
  {
      counter-increment: rowNumber;
      color: #DDD;
  }
  
  table tr td:first-child::before 
  {
      content: counter(rowNumber);
      color: #DDD;
      min-width: 1em;
      margin-right: 0.5em;
  }
  </code></pre>
  
  <p>The resulting table is one with alternating background colors, as well as numbers printed along the side.  However, I'm looking to see an easier way to do this; it's a simple ten lines of code, and could eventually turn into an extremely time-consuming issue.  Any help is appreciated, thank you!</p>