帮我写一个代码语的HTML文件
时间: 2023-08-28 07:29:12 浏览: 55
好的,以下是一个简单的代码语的HTML文件示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code Example</title>
<style>
/* CSS for highlighting code */
pre {
background-color: #f4f4f4;
border: 1px solid #ddd;
font-size: 16px;
padding: 10px;
white-space: pre-wrap;
}
.keyword {
color: blue;
font-weight: bold;
}
.string {
color: green;
}
.comment {
color: gray;
}
</style>
</head>
<body>
<h1>Code Example</h1>
<p>Here is an example of some code:</p>
<pre>
<code>
<span class="keyword">function</span> <span class="string">greeting</span>(<span class="string">name</span>) {
<span class="comment">// This function greets the user by name</span>
<span class="keyword">return</span> <span class="string">'Hello, '</span> + <span class="string">name</span> + <span class="string">'!'</span>;
}
<span class="keyword">let</span> <span class="string">myName</span> = <span class="string">'John'</span>;
<span class="keyword">console</span>.<span class="keyword">log</span>(<span class="string">greeting</span>(<span class="string">myName</span>)); <span class="comment">// Output: 'Hello, John!'</span>
</code>
</pre>
</body>
</html>
```
这个HTML文件包含一个标题、一段文本和一段代码。代码被放置在`<pre>`和`<code>`标签中,并用CSS样式进行高亮显示。其中,`.keyword`、`.string`和`.comment`是CSS类,用于分别标记代码中的关键字、字符串和注释。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)