编辑包含在<pre>

Question

I have certain content that contains XML tags along with normal text and numbers.

Example:

My favorite bookstore...

<book category="children">
    <title>Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
</book>

...and it ends like that.

I need to search through the content and replace all occurrences of "book" with an HTML tag (say <strong class="highlight">book</strong>) so that I can style it using CSS. The moment I use regex to update the content and render in browser, all the XML tags are interpreted too and not shown as text.

Case 1: If I render the updated content in <pre> tag, the HTML will not be interpreted and the output becomes:

<<strong class="highlight">book</strong> category="children">
    <title>Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
</<strong class="highlight">book</strong>>

Case 2: If I use <div> tag to render the updated content the <XML> tags will be lost too and output becomes:

Harry Potter J K. Rowling 2005 29.99

Is there a way to preserve XML and at the same time render highlighted HTML?