`
kongxiantao
  • 浏览: 108069 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

prettfy demo

CSSJavaScriptIEXHTMLHTML 
阅读更多

<!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 onload="prettyPrint()">
<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>

 

 

 

  • 大小: 112.4 KB
分享到：
| jquery1.5 test 环境搭建
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics