Rendering XML in your Webpage

Image for post
Image for post

I recently had the requirement to render XML in my page so the first attempt was to simply add a div containing it — by the way I am using VueJS for this.

<div>
{{ this.rawXml }}
</div>

The result was not so impressive, because it was rendered in one long line.

But I did not want to parse the XML and create a fancy structure used for rendering the content. So I found another solution using CSS. First give it a class.

<div
class="raw-xml"
>
{{ this.rawXml }}
</div>

Then use white-space and word-wrap to handle the appearance.

.raw-xml {
white-space: pre-wrap;
word-wrap: break-word;
}

pre-wrap
Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

break-word
The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

Now it looks much better with minimal effort.

So if this is also enough for you …

See you

Developer since the 80'th, working at Forschungszentrum Jülich (http://www.fz-juelich.de) …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store