正文 2805字数 498,954阅读

<link rel="Stylesheet" type="text/css" href="prettify/prettify.css" /> <script type="text/javascript" src="prettify/prettify.js"></script>
Run code
Cut to clipboard

    当然如果你觉得默认样式不好看，可以自己修改，这里我就直接在HTML页面修改了，因为它默认不换行，所以显得不是那么的友好
    <style type="text/css"> pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } </style>
    Run code
    Cut to clipboard
      默认不显示行号，这里我们可以写如下的代码，使之显示行号，但是貌似不完整，大家如果有更好的方法告诉我哦
      $(window).load(function () { $("pre").addClass("prettyprint linenums"); })
      Run code
      Cut to clipboard
        最后就是调用了，可以写在body的onload事件中，但是不建议，这里我们用jquery，在DOM节点加载完之后就调用
        $(window).load(function () { $("pre").addClass("prettyprint linenums"); prettyPrint(); })
        Run code
        Cut to clipboard

          prettify.js
          http://apps.bdimg.com/libs/prettify/r298/prettify.js
          prettify.css
          /* Pretty printing styles. Used with prettify.js. */ /* SPAN elements with the classes below are added by prettyprint. */ .pln { color: #000 } /* plain text */ @media screen { .str { color: #080 } /* string content */ .kwd { color: #008 } /* a keyword */ .com { color: #800 } /* a comment */ .typ { color: #606 } /* a type name */ .lit { color: #066 } /* a literal value */ /* punctuation, lisp open bracket, lisp close bracket */ .pun, .opn, .clo { color: #660 } .tag { color: #008 } /* a markup tag name */ .atn { color: #606 } /* a markup attribute name */ .atv { color: #080 } /* a markup attribute value */ .dec, .var { color: #606 } /* a declaration; a variable name */ .fun { color: red } /* a function name */ } /* Use higher contrast and text-weight for printable form. */ @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 } } /* Put a border around prettyprinted code snippets. */ 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 }
          Run code
          Cut to clipboard