prettfy demo

kongxiantao · 发表于 2013-2-7 20:53:28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="prettify.css"/>
<script type="text/javascript" src="prettify.js"></script>
<script type="text/javascript" src="lang-css.js"></script>
<title>无标题文档</title>
</head>
<body >
<h1>prettify.js demo </h1>
<pre class="prettyprint lang-css" id="css">
/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888 }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

@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; }
}
</pre>
<script type="text/javascript">
/**
* maps ids of rewritten code to the expected output.
* For brevity, <span class="foo"> has been changed to `FOO and close span tags
* have been changed to `END.
*/
var goldens = {
css: (
      '`COM&lt;!--`END`PLN<br>' +
      '`END`KWD@charset`END`PUN(`END`STR\'UTF-8\'`END`PUN);`END`PLN<br>' +
      '<br>' +
      '`END`COM/** A url that is not quoted. */`END`PLN<br>' +
      '`END`KWD@import`END`PUN(`END`KWDurl`END`PUN(`END`STR/more-styles.css`END' +
          '`PUN));`END`PLN<br>' +
      '<br>' +
      'HTML `END`PUN{`END`PLN `END`KWDcontent-before`END`PUN:`END`PLN `END' +
          '`STR\'hello\\20\'`END`PUN;`END`PLN `END`KWDcontent-after`END' +
          '`PUN:`END`PLN `END`STR\'w\\6f rld\'`END`PUN;`END`PLN<br>' +
      '&nbsp; &nbsp; &nbsp; &nbsp;`END`KWD-moz-spiff`END`PUN:`END`PLN `END' +
          '`KWDinherit`END`PLN `END`KWD!important`END`PLN `END`PUN}`END' +
          '`PLN<br>' +
      '<br>' +
      '`END`COM/* Test units on numbers. */`END`PLN<br>' +
      'BODY `END`PUN{`END`PLN `END`KWDmargin-bottom`END`PUN:`END`PLN `END' +
          '`LIT4px`END`PUN;`END`PLN `END`KWDmargin-left`END`PUN:`END' +
          '`PLN `END`LIT3in`END`PUN;`END`PLN `END`KWDmargin-bottom`END' +
          '`PUN:`END`PLN `END`LIT0`END`PUN;`END`PLN `END`KWDmargin-top`END' +
          '`PUN:`END`PLN `END`LIT5%`END`PLN `END`PUN}`END`PLN<br>' +
      '<br>' +
      '`END`COM/** Test number literals and quoted values. */`END`PLN<br>' +
      'TABLE`END`PUN.`END`PLNfoo TR`END`PUN.`END`PLNbar A`END`PUN#`END' +
          '`PLNvisited `END`PUN{`END`PLN `END`KWDcolor`END`PUN:`END`PLN `END' +
          '`LIT#001123`END`PUN;`END`PLN `END`KWDfont-family`END`PUN:`END' +
          '`PLN `END`STR"monospace"`END`PLN `END`PUN}`END`PLN<br>' +
      '`END`COM/** bolder is not a name, so should be plain. ' +
          '&nbsp;!IMPORTANT is a keyword<br>' +
      '&nbsp; * regardless of case.<br>' +
      '&nbsp; */`END`PLN<br>' +
      'blink `END`PUN{`END`PLN `END`KWDtext-decoration`END`PUN:`END' +
          '`PLN BLINK `END`KWD!IMPORTANT`END`PUN;`END`PLN `END' +
          '`KWDfont-weight`END`PUN:`END`PLN bolder `END`PUN}`END`PLN<br>' +
      '`END`COM--&gt;`END'
      )
};
</script>
</body>
</html>

		自动登录	找回密码
密码			立即注册

prettfy demo

浏览过的版块