Reputation: 15965

Formatting HTML as text

UPDATE 2:

In this section, I am trying to manually add in tabs and line spaces so the string is formatted when displayed via the pre tag. But this does not work.

objStringBuilder.Append("<div>" & Environment.NewLine)
objStringBuilder.Append(vbTab & "<div>some text</div>" & Environment.NewLine)
objStringBuilder.Append("</div>" & Environment.NewLine)

Return "<pre>" & Server.HtmlEncode(objStringBuilder.ToString) & "</pre>"

UPDATE 1:

I have tried the following, but it does not work:

return "<pre>" & Server.HtmlEncode("<div><div>some text</div></div>") & "</pre>"

I want it to display something like this

<div>
    <div>some text</div>
</div>

But it's diplaying like this, which is expected:

<div><div>some text</div></div>

I don't know how to get spaces, tabs, carriage returns into that string which are recognizable by the pre tag, as environment.newline and/or vbtab make no difference.

ORIGINAL QUESTION:

Is it possible to display HTML as text on your page in a formatted manner? For example, it should contain white spaces, tabs etc etc for readability purposes:

From another question, I have learned how to display HTML as text as follows:

Server.HtmlEncode("<div>Some text</div>");

Upvotes: 0

Answers (4)

Chris Haas

Reputation: 55457

VB.Net has a cool thing called XML literals that let you write XML without requiring string syntax. As long as you follow XML syntax (pretty much close all tags) you can use this to write HTML chunks:

Dim S = <div>
            <div>some text</div>
        </div>

When you called ToString on that there's an option to preserve formatting:

S.ToString(SaveOptions.None)

This outputs:

<div>
  <div>some text</div>
</div>

Upvotes: 1

Oleks

Reputation: 32343

Html Agility Pack is a very useful to parse HTML documents, XElement class provides an ability to format XML documents. So why don't use both of them for HTML formatting? Sorry, I'm not familiar with VB, so my example in C#:

First, creating a new document:

HtmlDocument htmlDoc = new HtmlDocument();
htmlDoc.OptionFixNestedTags = true;
htmlDoc.LoadHtml("<div><div>some text</div></div>");

XElement.Parse method doesn't like when then e.g. just text is not wrapped in tags, so I'm adding a root div tag in that case:

if (htmlDoc.DocumentNode.HasChildNodes)
{
    bool wrapperNeeded = htmlDoc.DocumentNode.ChildNodes
        .Cast<HtmlNode>()
        .Any(n => n.NodeType != HtmlNodeType.Element);

    if (wrapperNeeded)
    {
        var wrapper = htmlDoc.CreateElement("div");
        wrapper.AppendChildren(htmlDoc.DocumentNode.ChildNodes);
        htmlDoc.DocumentNode.RemoveAllChildren();
        htmlDoc.DocumentNode.AppendChild(wrapper);
    }
}

then I'm saving the document as a string:

string html = null;
using (StringWriter writer = new StringWriter())
{
    htmlDoc.Save(writer);
    html = writer.ToString();
}

and finally, creating a new element and converting it to a string (with formatting):

XElement element = XElement.Parse(html);
html = element.ToString();

html now contains a value <div>\r\n <div>some text</div>\r\n</div>, and if you html encode it wrap this into e.g. <pre> tag wou'll get the desired output: