HTML5是一個非常強大的網頁開發語言，它可以創建各種類型的網頁，包括響應式布局、動態網頁和豐富交互性的網頁。然而，有時候我們會發現，在HTML5中寫的代碼并沒有變色，這讓很多新手程序員感到困惑。
實際上，HTML5并不像其他編程語言一樣自帶語法高亮功能，因此，我們需要借助第三方工具來實現代碼高亮。這些工具可以根據代碼的不同部分對其進行著色標識，使我們能夠更清晰地看到代碼的結構和語法。
在實現代碼高亮的過程中，我們通常會使用一些預定義的CSS樣式或JavaScript庫。預定義的CSS樣式是一種使用簡單的CSS代碼對文字樣式進行定義的方法。如果我們使用了這種方法，就需要在代碼中添加對預定義CSS樣式的引用，例如：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="predefined.css">
</head>
<body>
<pre class="code">
<span class="keyword">function</span> calculate(a, b) {
<span class="keyword">return</span> a + b;
}
</pre>
</body>
</html>上面的代碼中，我們首先在頭部引入了名為“predefined.css”的CSS文件，然后定義了一個class為“code”的pre標簽，其中包含了我們想要高亮的代碼。在CSS文件中，我們定義了一些關鍵字顏色、注釋顏色等等，然后在HTML文件中使用<span>標簽并設置class屬性為對應的樣式名來對代碼進行高亮。
另一種實現代碼高亮的方法是使用JavaScript庫，例如highlight.js。這種方法通常需要在HTML文件中引入對應的JS文件，并在代碼塊中添加class屬性以與JS庫進行交互。下面是一個使用highlight.js的例子：
<!DOCTYPE html>
<html>
<head>
<script src="highlight.pack.js"></script>
<link rel="stylesheet" type="text/css" href="highlight.css">
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre class="code">
<code class="javascript">
function calculate(a, b) {
return a + b;
}
</code>
</pre>
</body>
</html>在這個例子中，我們引入了名為“highlight.pack.js”的JS文件和名為“highlight.css”的CSS文件。然后，我們使用class為“code”的pre標簽，并在其中添加<code>標簽。在<code>標簽中，我們設置class屬性為關鍵字“javascript”，表示這段代碼是JS語言，需要使用highlight.js進行高亮。
總之，使用HTML5寫代碼并不會自動進行語法高亮。我們可以使用預定義的CSS樣式或JavaScript庫來實現代碼高亮，這樣可以幫助我們更好地理解代碼的構成和語法，并提高編碼效率和質量。希望本文能夠對你有所幫助。