请给我用html实现自动将html、python、C++、js、css等代码中不同部分的语句高亮并展示的代码
时间: 2023-12-25 19:03:15 浏览: 202
可以使用highlight.js来实现代码高亮展示,它支持多种语言和自定义样式。以下是一个示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>代码高亮展示</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/cpp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/css.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body>
<pre><code class="xml"><!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html></code></pre>
<pre><code class="python"># Python program to display the Fibonacci sequence up to n-th term
nterms = int(input("How many terms? "))
# first two terms
n1, n2 = 0, 1
count = 0
# check if the number of terms is valid
if nterms <= 0:
print("Please enter a positive integer")
elif nterms == 1:
print("Fibonacci sequence upto",nterms,":")
print(n1)
else:
print("Fibonacci sequence:")
while count < nterms:
print(n1)
nth = n1 + n2
# update values
n1 = n2
n2 = nth
count += 1</code></pre>
<pre><code class="cpp">#include <iostream>
int main() {
std::cout << "Hello, World!" << std::endl;
return 0;
}</code></pre>
<pre><code class="javascript">function sayHello() {
console.log("Hello, World!");
}
sayHello();</code></pre>
<pre><code class="css">body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}</code></pre>
</body>
</html>
```
在上述代码中,引入了highlight.js库和对应的语言模块。pre标签包含了code标签,并根据对应的语言类来设置代码高亮。最后使用hljs.highlightAll()来触发代码高亮。可以根据需要添加其他语言模块的引入和样式设置。
阅读全文