Demo: google-code-prettify

Allow people to easily create issue demos for the google-code-prettify project (http://code.google.com/p/google-code-prettify/).

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<pre class="prettyprint">
var response.data = {
  "guid":"a4053acd-74a9-4ae2-96fb-562b1c865448",
  "clientId":"test1234",
  "timeStamp":"AAAAAAAAHxg=",
  "hasChanged":false,
  "isNew":false,
  "clientTypeCode":"Partnership",
  "officeGuid":"2489c5e6-1827-48a5-bde1-7e6267913035",
  "clientSubordinateID":"test",
  "clientSortName":"test1234",
  "businessUnitGuid":"352b051e-9b28-45e2-a598-5b8005aa7456",
  "clientName":"test1234",
  "clientClassCd":"AP",
  "clientStatusCode":"AC",
  "partnershipTimeStamp":"AAAAAAAAHxo="
}
</pre>

CSS

.pln {
  color: #000
}

@media screen {
  .str {
    color: #080
  }
  .kwd {
    color: #008
  }
  .com {
    color: #800
  }
  .typ {
    color: #606
  }
  .lit {
    color: #066
  }
  .pun,
  .opn,
  .clo {
    color: #660
  }
  .tag {
    color: #008
  }
  .atn {
    color: #606
  }
  .atv {
    color: #080
  }
  .dec,
  .var {
    color: #606
  }
  .fun {
    color: red
  }
}

@media print,
projection {
  .str {
    color: #060
  }
  .kwd {
    color: #006;
    font-weight: bold
  }
  .com {
    color: #600;
    font-style: italic
  }
  .typ {
    color: #404;
    font-weight: bold
  }
  .lit {
    color: #044
  }
  .pun,
  .opn,
  .clo {
    color: #440
  }
  .tag {
    color: #006;
    font-weight: bold
  }
  .atn {
    color: #404
  }
  .atv {
    color: #060
  }
}

pre.prettyprint {
  padding: 2px;
  border: 1px solid #888
}

ol.linenums {
  margin-top: 0;
  margin-bottom: 0
}

li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 {
  list-style-type: none
}

li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
  background: #eee
}

body {}

pre .str,
code .str {
  color: #65b042
}

pre .kwd,
code .kwd {
  color: #e28964
}

pre .com,
code .com {
  color: #aeaeae;
  font-style: italic
}

pre .typ,
code .typ {
  color: #89bdff
}

pre .lit,
code .lit {
  color: #3387cc
}

pre .pun,
code .pun {
  color: #fff
}

pre .pln,
code .pln {
  color: #fff
}

pre .tag,
code .tag {
  color: #89bdff
}

pre .atn,
code .atn {
  color: #bdb76b
}

pre .atv,
code .atv {
  color: #65b042
}

pre .dec,
code .dec {
  color: #3387cc
}

pre.prettyprint,
code.prettyprint {
  background-color: #000;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px
}

pre.prettyprint {
  width: 95%;
  margin: 1em auto;
  padding: 1em;
  white-space: pre-wrap
}

ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  color: #aeaeae
}

li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 {
  list-style-type:...

JavaScript

$(function() {
  prettyPrint();
});