How to safely display a tag

Content

In my custom object, in one field I have the following code: <script>alert(1);</script>

I would like to present this in a contenteditable (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable) without triggering the alert (XSS in general), displaying <script>alert(1);</script> and not displaying <script>alert(1);</script>

I've gone through htmlspecialchars_decode, html_entity_decode etc but I can't suss out what's needed

The way the data is stored is as such:

<span class="pln" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; box-sizing: inherit; color: rgb(48, 51, 54);">$objective </span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; box-sizing: inherit; color: rgb(48, 51, 54);">=</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; box-sizing: inherit; color: rgb(48, 51, 54);"> RNCPHP\objectives</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: