問一下，我想要用 blogger 寫技術文章，目前可以用 Highlight.js 給程式碼展示區塊高亮程式碼，複製的功能也沒問題，現在我的需求是想要給程式碼展示區快加上行號，但是不要破壞 HTML 結構，請問有解決方案嗎？
之前用過 highlightjs-line-numbers.js ，但是會把程式碼區塊變成 HTML table 導致複製功能出問題
以下是我目前測試用的 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 事件綁定方式</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/rainbow.min.css" />
<style>
body {
font-family: sans-serif;
padding: 2rem;
}
.code-block {
margin-bottom: 2rem;
border: 1px solid #ccc;
border-radius: 6px;
overflow: hidden;
background-color: #1e1e1e;
}
.code-header {
display: flex;
justify-content: flex-end;
background: #333;
color: white;
padding: 0.5rem 1rem;
}
.copy-btn {
font-size: 0.9rem;
cursor: pointer;
border: none;
border-radius: 5px;
padding: 0.3rem 0.6rem;
background-color: #555;
color: white;
transition: background-color 0.2s;
}
.copy-btn:hover {
background-color: #777;
}
pre {
margin: 0;
padding: 1rem;
}
.code-message-hidden {
visibility: hidden;
}
.code-message-show {
color: red;
}
</style>
</head>
<body>
<div class="code-block">
<div class="code-header">
<button class="copy-btn" data-target="code1">複製</button>
</div>
<pre>
<code id="code1" class="html line-numbers"><button onclick="document.querySelector('.p').innerHTML=Date()">Current time</button>
<p class="p"></p></code>
</pre>
</div>
<p class="code-message-show">message</p>
<b>
可互動的範例：
</b>
<br />
<br />
<button onclick="document.querySelector('.p').innerHTML=Date()">Current time</button>
<p class="p"></p>
<!-- Highlight.js 主程式 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
<!-- 複製功能 -->
<script>
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', () => {
const targetId = btn.getAttribute('data-target');
const codeElement = document.getElementById(targetId);
const codeHTML = codeElement.innerText;
// console.log('codeHTML:')
// console.log(codeHTML)
navigator.clipboard.writeText(codeHTML)
.then(() => {
btn.textContent = '已複製!';
setTimeout(() => {
btn.textContent = '複製';
}, 1200);
})
.catch(err => {
console.error('複製失敗:', err);
btn.textContent = '錯誤';
});
});
});
</script>
</body>
</html>
Thread問一下，我想要用 blogger 寫技術文章，目前可以用 Highlight.js 給程式碼展示區塊高亮程式碼，複製的功能也沒問題，現在我的需求是想要給程式碼展示區快加上行號，但是不要破壞 HTML 結構，請問有解決方案嗎？
2 messages · –♡