帮我写一个展示c++代码的网页,支持语法高亮和一键复制,全部写在一个html文件中,并且本地就可以访问
时间: 2024-03-24 10:37:13 浏览: 15
好的,以下是一个支持语法高亮和一键复制的C++代码展示网页,全部写在一个HTML文件中,并且可在本地访问。您可以直接将它复制到一个HTML文件中并保存,然后用浏览器打开即可。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>C++代码展示和复制</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" />
<style>
body {
font-family: Consolas, Courier, monospace;
font-size: 16px;
line-height: 1.5;
background-color: #f5f5f5;
color: #333;
padding: 50px;
}
pre {
position: relative;
margin: 0;
padding: 0;
}
code {
display: block;
padding: 20px;
overflow-x: auto;
white-space: pre;
word-wrap: normal;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
text-align: left;
}
button {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
border: none;
background-color: #f5f5f5;
color: #333;
cursor: pointer;
}
button:hover {
background-color: #333;
color: #fff;
}
.fa-copy {
margin-right: 5px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
</head>
<body>
<h1>C++代码展示和复制</h1>
<pre><code class="language-cpp">// 在这里添加您的C++代码</code></pre>
<button class="btn" data-clipboard-target="code"><i class="fa fa-copy"></i> 复制代码</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
// 初始化Prism.js
Prism.highlightAll();
// 初始化Clipboard.js
var clipboard = new ClipboardJS('.btn');
// 添加事件监听器
clipboard.on('success', function(e) {
e.clearSelection();
alert('代码已复制成功!');
});
clipboard.on('error', function(e) {
alert('代码复制失败!');
});
</script>
</body>
</html>
```
将上述代码复制到一个HTML文件中并保存,然后用浏览器打开即可看到一个简单的C++代码展示页面。您可以在`<code>`标签中添加您的C++代码,然后按下复制按钮即可将代码复制到剪贴板中。