Rendering and Wrapping HTML Content Inside Pre Elements | Task

Ole Ersoy
Mar - 19  -  1 min

Scenario

We have want to take the Google Material Icons link element and we want to render it such that it wraps inside a pre element like this :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Approach

First we need to escape the html such that it looks like this (Otherwise the html document will render it as a normal element):

&lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot;&gt;

In order to escape your html you can use this online resource.

Then we can place our escaped content inside a pre element styled like this:

<pre style="white-space: pre-wrap; 
            word-wrap: break-word; 
            word-break:keep-all;">
</pre>