在編寫代碼時，一個很重要的需求就是能夠清晰明了地查看代碼，因此我們需要一種方式來將代碼進行高亮顯示。在HTML頁面中，我們可以使用pre標簽來實現代碼的原格式呈現，并配合CSS樣式設置實現高亮顯示。 首先，我們在HTML頁面中使用pre標簽來包圍我們的代碼，例如：

function helloWorld() {
console.log("Hello World!");
}

接下來，我們需要為這段代碼設置樣式。我們可以通過CSS樣式中的選擇器來選擇我們要設置的標簽，例如： pre { background-color: #f1f1f1; padding: 10px; overflow: auto; } code { color: #333; font-family: 'Courier New', Courier, monospace; } 以上代碼將為pre標簽設置一個淺灰色的背景，設置10px的內邊距，以及設置自動溢出以便在行數較多時能夠滾動。同時，為code標簽設置了黑色的字體顏色以及Courier New等等寬字體。 為了實現代碼高亮，我們需要為不同的代碼部分設置不同的CSS樣式。例如，我們可以設置不同顏色的樣式來區分變量、函數、字符串等等，例如： code.variable { color: blue; } code.function { color: purple; } code.string { color: green; } 這樣，當我們在代碼中使用變量、函數或字符串時，它們就會以不同的顏色進行高亮顯示，使代碼更加易讀、易于理解。 在實際應用中，我們可以使用第三方庫或插件來快速實現代碼高亮，例如highlight.js、prism.js等等。這些庫提供了方便的API和現成的樣式配置，讓我們可以更加快速、方便地實現代碼高亮。 總之，HTML頁面顯示代碼高亮可以使代碼更加易讀、易于理解，提高編碼效率。我們可以選擇自己編寫CSS樣式來實現高亮效果，也可以使用第三方庫來快速、方便地實現。