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

作者： -
Github連結：Google Code Prettify

在HTML中插入以下JavaScript

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

可以載入CSS樣式。

  1. <style type="text/css">
  2.  .str
  3.  {
  4.   color: #D69D85;
  5.  }
  6.  .kwd
  7.  {
  8.   color: #569CD6;
  9.  }
  10.  .com
  11.  {
  12.   color: #57A64A;
  13.  }
  14.  .typ
  15.  {
  16.   color: #4EC9B0;
  17.  }
  18.  .lit
  19.  {
  20.   color: #DCDCDC;
  21.  }
  22.  .pun
  23.  {
  24.   color: #DCDCDC;
  25.  }
  26.  .pln
  27.  {
  28.   color: #DCDCDC;
  29.  }
  30.  .tag
  31.  {
  32.   color: #8AC763;
  33.  }
  34.  .atn
  35.  {
  36.   color: #E0E2E4;
  37.  }
  38.  .atv
  39.  {
  40.   color: #EC7600;
  41.  }
  42.  .dec
  43.  {
  44.   color: purple;
  45.  }
  46.  pre.prettyprint
  47.  {
  48.   border: 0px solid #888;
  49.  }
  50.  ol.linenums
  51.  {
  52.   margin-top: 0;
  53.   margin-bottom: 0;
  54.  }
  55.  .prettyprint {
  56.   background: #000000;
  57.  }
  58.  li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
  59.  {
  60.   color: #2B91AF;
  61.   list-style-type: decimal;
  62.  }
  63.  li.L1, li.L3, li.L5, li.L7, li.L9 {
  64.   background: #101010;
  65.  }
  66.  @media print
  67.  {
  68.   .str
  69.   {
  70.    color: #060;
  71.   }
  72.   .kwd
  73.   {
  74.    color: #006;
  75.    font-weight: bold;
  76.   }
  77.   .com
  78.   {
  79.    color: #600;
  80.    font-style: italic;
  81.   }
  82.   .typ
  83.   {
  84.    color: #404;
  85.    font-weight: bold;
  86.   }
  87.   .lit
  88.   {
  89.    color: #044;
  90.   }
  91.   .pun
  92.   {
  93.    color: #440;
  94.   }
  95.   .pln
  96.   {
  97.    color: #000;
  98.   }
  99.   .tag
  100.   {
  101.    color: #006;
  102.    font-weight: bold;
  103.   }
  104.   .atn
  105.   {
  106.    color: #404;
  107.   }
  108.   .atv
  109.   {
  110.    color: #060;
  111.   }
  112.  }
  113. </style>

標記程式碼。

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

留言

張貼留言

這個網誌中的熱門文章

C# 井字遊戲

作者： -
圖片
開始畫面。 遊戲畫面。 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace CSharp_井字遊戲 { public partial class Form1 : Form { public Form1() { InitializeComponent(); Symbol1_tb.TextChanged += SymbolTextChenge; Symbol2_tb.TextChanged += SymbolTextChenge; Symbol1_tb.MouseClick += Symbol_tb_MouseClick; Symbol2_tb.MouseClick += Symbol_tb_MouseClick; } private void Symbol_tb_MouseClick(object sender, MouseEventArgs e) { TextBox tb = sender as TextBox; tb.SelectAll(); } private void SymbolTextChenge(object sender, EventArgs e) { TextBox tb = sender as TextBox; if (tb.TextLength >= 2) { tb.SelectAll(); ...
閱讀完整內容