Issue with html<code> tag

Ionic Framework
1

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

Context:
In html page I have:

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

Now, I was expecting to see the code as-is. However, it shows the output from tag as below.
image%20(2)

Solution
Please suggest how to use code tag within ionic?

Thanks

2

Hey @immcse,

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

Take a look into: https://stackoverflow.com/questions/11386586/how-to-show-div-tag-literally-in-code-pre-tag

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
3

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
4

@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): https://dev.w3.org/html5/html-author/charref

Good luck on your project!