Highlighting Part of a Result

Question

I'm trying to highlight ONLY the variables: principal, rate, interest, year in the return statement of the compute function. It is required of me that all styling must be in the CSS file only. No inline or internal stylesheets are allowed. All code must be in the JavaScript file only. I have created the highlight class in CSS but this highlights the whole sentence and I don't know how to only highlight parts of a return statement without using inline.

Could someone please help/guide me to know how it's done cause I'm new to using these languages? Would be much appreciated.

Kindly find the HTML, CSS, and JavaScript code below.

HTML CODE

<!--- On clicking the button it computes the interest by calling the compute() function --->
<button onclick="compute()">Compute Interest</button><br><br>
<!--- Show computation result --->
<span id="result" class = "highlight"></span>

CSS CODE

/* Highlights the result */
.highlight {
    background-color: yellow;
}

JAVASCRIPT CODE

/* Function that computes and returns the result */
function compute()
{
    /* some code */
   
 return document.getElementById("result").innerHTML="If you deposit "+principal+",\<br\>at an interest rate of "+rate+"%\<br\>You will receive an amount of "+interest+",\<br\>in the year "+year+"\<br\>";
}