高亮代码的css样式

以下是一个简单的CSS样式，用于高亮代码：

.code {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
}

.keyword {
  color: #0000ff;
  font-weight: bold;
}

.comment {
  color: #808080;
  font-style: italic;
}

.string {
  color: #008000;
}

.number {
  color: #ff0000;
}

.operator {
  color: #800080;
}

.punctuation {
  color: #000000;
}

使用这个样式，你可以将代码包裹在一个带有.code类的<pre>或<code>标签中，然后使用其他类来标记不同的代码元素，例如关键字、注释、字符串、数字、运算符和标点符号。

当你使用上述CSS样式时，你可以在HTML中使用以下类来标记不同的代码元素：

.keyword：用于标记关键字，例如if、else、for等。

.comment：用于标记注释，例如//或/* */之间的内容。

.string：用于标记字符串，例如用引号括起来的文本。

.number：用于标记数字，例如整数或浮点数。

.operator：用于标记运算符，例如+、-、*、/等。

.punctuation：用于标记标点符号，例如逗号、分号等。

你可以根据需要在代码中使用这些类来标记不同的代码元素，以实现代码高亮效果。例如：

<pre class="code">
  <code>
    <span class="keyword">function</span> <span class="function-name">calculateSum</span>(<span class="parameter">a</span>, <span class="parameter">b</span>) {
      <span class="comment">// This function calculates the sum of two numbers</span>
      <span class="keyword">var</span> <span class="variable">sum</span> = <span class="number">a</span> + <span class="number">b</span>;
      <span class="keyword">return</span> <span class="variable">sum</span>;
    }
  </code>
</pre>

在上面的示例中，<span>标签用于将不同的代码元素包裹起来，并应用相应的类。这样，代码中的关键字、注释、变量、数字等就会根据CSS样式进行高亮显示。