自定义marked.js的render实现，完整代码如下：
点击查看全文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/marked.min.js"></script>
<style>
pre {
position: relative;
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 3px;
padding: 1em;
margin: 1em 0;
}
.language-label {
position: absolute;
top: 0;
right: 0;
padding: 0.3em 0.6em;
background-color: #e0e0e0;
color: #333;
font-size: 0.8em;
border-radius: 0 3px 0 3px;
}
.copy-button {
position: absolute;
top: 0;
right: 70px;
padding: 0.3em 0.6em;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 0.8em;
}
</style>
</head>
<body>
<div id="content"></div>
<script>
// 自定义渲染器
const renderer = new marked.Renderer();
renderer.code = function(code, language) {
const escapedCode = this.options.highlight(code, language);
return `
<pre>
<span class="language-label">${language}</span>
<button class="copy-button" onclick="copyCode(this)">Copy</button>
<code class="language-${language}">${escapedCode}</code>
</pre>
`;
};
// 设置 marked 选项
marked.setOptions({
renderer: renderer,
highlight: function(code) {
return code;
}
});
// Markdown 内容
const markdown = `
# 示例代码
这是一段 JavaScript 代码：
\`\`\`javascript
function greet(name) {
console.log(\`Hello, \${name}!\`);
}
greet('World');
\`\`\`
这是一段 Python 代码：
\`\`\`python
def greet(name):
print(f"Hello, {name}!")
greet("World")
\`\`\`
`;
// 渲染 Markdown
document.getElementById('content').innerHTML = marked(markdown);
// 复制代码功能
function copyCode(button) {
const pre = button.parentElement;
const code = pre.querySelector('code');
const textArea = document.createElement('textarea');
textArea.value = code.textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
button.textContent = 'Copied!';
setTimeout(() => {
button.textContent = 'Copy';
}, 2000);
}
</script>
</body>
</html> 网友回复
我知道答案，我要回答
私活外包
