Google Code Prettify 為網頁中的程式碼上色

Github連結：Google Code Prettify

在HTML中插入以下JavaScript

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

可以載入CSS樣式。

<style type="text/css">
 .str
 {
  color: #D69D85;
 }
 .kwd
 {
  color: #569CD6;
 }
 .com
 {
  color: #57A64A;
 }
 .typ
 {
  color: #4EC9B0;
 }
 .lit
 {
  color: #DCDCDC;
 }
 .pun
 {
  color: #DCDCDC;
 }
 .pln
 {
  color: #DCDCDC;
 }
 .tag
 {
  color: #8AC763;
 }
 .atn
 {
  color: #E0E2E4;
 }
 .atv
 {
  color: #EC7600;
 }
 .dec
 {
  color: purple;
 }
 pre.prettyprint
 {
  border: 0px solid #888;
 }
 ol.linenums
 {
  margin-top: 0;
  margin-bottom: 0;
 }
 .prettyprint {
  background: #000000;
 }
 li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
 {
  color: #2B91AF;
  list-style-type: decimal;
 }
 li.L1, li.L3, li.L5, li.L7, li.L9 {
  background: #101010;
 }
 @media print
 {
  .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
  {
   color: #440;
  }
  .pln
  {
   color: #000;
  }
  .tag
  {
   color: #006;
   font-weight: bold;
  }
  .atn
  {
   color: #404;
  }
  .atv
  {
   color: #060;
  }
 }
</style>

標記程式碼。

<pre class="prettyprint linenums">
code;//程式碼放這裡
</pre>