内联代码

通过<code>标签内嵌一小段代码。

基本代码块

基本代码块包含在<pre>内。

<p>Sample text here...</p>

还可以使用.pre-scrollable class,其作用是设置max-height为350px,并在垂直方向展示滚动条。

代码高亮

代码高亮是通过根据代码语言语法给代码中的单词、字符标记为不同颜色来显示的方法。代码高亮能大大提高代码的查阅体验。在web界面加上代码高亮非常容易,在产品中如需要向用户展现代码应该使用代码高亮。

这里推荐的方案是Google Code Prettify实现代码高亮。Google Code Prettify能够自动识别代码语言类型并正确应用语法高亮。

下面是一个php文件的示例:

<!doctype html>
<html lang="en">
  <head>
    <title>Zentao Design Guidelines</title>
  </head>
  <body>
  <?php
    echo "hello, world!";
  ?>
  </body>
</html>