I need to show some formatted XML as text, as I am documenting and annotating it. I want to be able to set color to differentiate active vs remarked XML (with colors that match Notepad ++) and I want appropriate indenting. I have managed to address the colors with CSS like this.
.px_xml {
font-family: monospace;
font-size: .7em;
color: #0000A0;
display: inline;
}
.px_xml_remarks {
font-family: monospace;
font-size: .7em;
color: #667C26;
display: inline;
}
However, I can't seem to get indents to work. I can do something like this
.px_ind1 {
text-indent: 5em;
}
But text-indent only works for an inline-block, and then I get all sorts of vertical white space. The closest I have gotten is forcing spaces in front in the html, like this:
It works, but is hard to work with at multiple levels of indent deep, and it just feels like a horrible kludge. Hopefully someone can set me straight on a better option?
Thanks!
Er, am I missing the edit
Er, am I missing the edit button? Anyway, hopefully the HTML shows up now wrapped in code tags.
  <xmp class="px_xml"></Rollout></xmp>
OK, making progress. It looks
OK, making progress. It looks like margin-left does the indenting job, so i have created four classes with different levels of indent, which works well.
My next task is to attempt to break up the XML expression so I can add some footnotes in the middle. I had hoped that I cold just wrap sections of the XML in xmp tags, with sup tags between. But sadly doing the works for the first bit, but the following xmp sections don't behave as expected, and the less than and greater than are presented as codes, not glyphs. What I want to do would look something like this, but I presume I need to add some control in either the xmp classes or the sup or both.
<xmp class="px_xml_a"><Set id="NWF_2015"</xmp><sup>1</sup> <xmp class="px_xml_a">log_mode="Validation"</xmp><sup>2</sup> <xmp class="px_xml_a"> exit_mode="ExitConsole"></xmp><sup>3</sup>
Anyone have a thought here
Thanks!