自定义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> 网友回复
我知道答案，我要回答
私活外包
最新提问
DLNA与UPnP的区别和不同？
苏超自建抢票app，通过先预约再抽签化解高并发抢票？
python如何让给电脑在局域网中伪装成电视接收手机的投屏图片视频播放？
如何结合python+js如何自己的视频编码与加密播放直播？
python如何在电脑上通过局域网将本地视频或m3u8视频投屏电视播放？
腾讯视频爱奇艺优酷vip电影电视剧视频如何通过python绕过vip收费直接观看？
有没有可免费观看全球电视台直播m3u8地址url的合集？
有没有实现观影自由的免vip影视苹果 CMS V10 API的可用url？
python如何实时检测电脑usb插入检测报警？
如何判断真人操作的鼠标移动直线轨迹与机器操作的轨迹？
