请给我用html实现自动将html、python、C++等代码高亮并展示的代码
时间: 2024-03-13 08:43:34 浏览: 250
可以使用pre标签和对应的语言类来实现代码高亮展示。以下是一个示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>代码高亮展示</title>
<style>
pre {
background-color: #f4f4f4;
border: 1px solid #ddd;
font-family: Consolas, monospace;
font-size: 14px;
margin-bottom: 10px;
padding: 10px;
white-space: pre-wrap;
}
pre code {
display: block;
color: #333;
font-size: 14px;
line-height: 1.5;
}
pre code.html {
color: #c41a16;
}
pre code.python {
color: #3572A5;
}
pre code.cpp {
color: #f34b7d;
}
</style>
</head>
<body>
<pre><code class="html"><!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html></code></pre>
<pre><code class="python">def hello_world():
print("Hello, World!")
hello_world()</code></pre>
<pre><code class="cpp">#include <iostream>
int main() {
std::cout << "Hello, World!" << std::endl;
return 0;
}</code></pre>
</body>
</html>
```
在上述代码中,pre标签包含了code标签,并根据对应的语言类来设置字体颜色。可以根据需要添加其他语言类的样式。注意,这里使用了white-space: pre-wrap;来保留代码中的空格和换行。
阅读全文