在Web開發中，代碼高亮對于提高代碼的可讀性和易懂性非常重要。在HTML中添加代碼高亮可以大大提高網頁的用戶體驗。 要添加代碼高亮，我們可以使用pre標簽來包圍需要高亮的代碼段。pre標簽會保留代碼段中的格式和空格，使代碼更易于閱讀和理解。

// 這是一個示例代碼段
function add(a, b) {
return a + b;
}

但是，這只是單純的將代碼段用pre標簽包圍，沒有添加任何樣式來標識不同的代碼元素。為了實現代碼高亮，我們需要使用一些CSS樣式來實現。 一個實現代碼高亮的示例CSS如下：

p {
font-size: 1rem;
line-height: 1.5em;
}
pre {
background-color: #f5f5f5;
font-family: 'Courier New', Courier, monospace;
font-size: 1rem;
line-height: 1.5em;
overflow-x: auto;
padding: 1rem;
}
pre code {
display: block;
border-left: 3px solid #69c;
padding-left: 1rem;
}

通過添加這些CSS樣式，我們可以將代碼高亮分為不同的元素，如關鍵字、注釋、字符串等。在實際使用時，我們可以根據需要進行修改和擴展。 此外，還有許多第三方的代碼高亮庫，如Prism、Highlight.js等，通過使用它們，可以快速實現各種代碼高亮效果。 總之，代碼高亮在Web開發中是一個非常實用的功能，在使代碼更易讀的同時也提高了用戶體驗。通過在HTML中添加pre標簽和CSS樣式，我們可以實現各種代碼高亮效果。