Issue with html<code> tag

Trying to use html code tag within Ionic app. Instead, Ionic app renders the actual Custom Component itself.

In html page I have:

<p>Code sample</p>
    <code class="html" width=100%>
    <empty src={this.messages} message="No messages in this conversation"></empty>

Now, I was expecting to see the code as-is. However, it shows the output from tag as below.

Please suggest how to use code tag within ionic?


Hey @immcse,

The <code> is just for styling code, it will still render HTML as HTML.

Take a look into:

You should replace the characters of your HTML with the corresponding character entity. E.g.: < should be &lt;

This is the default behaviour of HTML and is not related to Ionic.

1 Like

Hey @artfloriani,

Thanks for responding. You are right, the behavior is HTML default.

After replacing < and >, I was facing issues with “{” and “}”.

Following worked fine:
<ic-empty src={{’{’}}this.messages{{’}’}} message=“No messages in this conversation”></ic-empty>

1 Like

@immcse No problem :wink:

I recommend replacing the brackets ({}) by their corresponding character entity, this will prevent any weird issues with angular and vue.

You can find the character entity for all characters here (search with ctrl + F):

Good luck on your project!