css中怎么设置代码高亮

在前端开发中，经常需要使用CSS设置代码高亮，让代码更加易读。代码高亮能够突出代码的关键字和语法结构，使得代码看起来更加清晰易懂。在CSS中，代码高亮的实现主要通过设置代码块的背景色、字体颜色和字体样式等来完成。
为了实现代码高亮，我们可以使用pre标签来包裹代码块。pre标签是用来展示预格式化文本的标签，它可以保留文本中的格式，包括空格、换行和缩进等。在pre标签中，我们可以设置代码的字体颜色、背景色、字体样式等，来实现代码高亮的效果。
首先，我们需要定义pre标签的CSS样式。下面是一个简单的CSS样式，用来设置代码块的背景色和字体颜色：
pre {
background-color: #f4f4f4;
color: #333;
}
这个CSS样式会将代码块的背景色设置为灰色，字体颜色设置为黑色。同时，我们还需要设置代码块的字体样式，使其更加易读。下面是一个完整的CSS样式，用来设置代码高亮：
pre {
background-color: #f4f4f4;
color: #333;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
font-size: 14px;
line-height: 1.5;
padding: 10px;
overflow: auto;
}
这个CSS样式将代码块的字体设置为Menlo、Monaco、Consolas等等，使其在不同的操作系统中能够保证一致的风格。同时，我们还可以设置代码块的字体大小、行高和内边距等。这样，我们就可以设置出美观实用的代码高亮效果了。
总之，针对不同的需求，我们可以通过设置pre标签的CSS样式来实现代码高亮效果。通过设置背景色、字体颜色和字体样式等，我们可以让代码更加易读，提高代码的可读性和可维护性。