I am worried about the other tags used between <span></span>.

[maoxiaoke]

I am trying to use <i></i> between <span></span> like this:

<span data-ty="input"  data-ty-prompt="#"><i>hello world. </i></span>

It seems not working. What should i do ?

[ines]

What are you trying to achieve with this? Do you want the text to be italicised, or do you want to actually print <i>hello world.</i>?

If you want the text to be in italics, I would do that styling in CSS. Either by adding a custom class, or by tying it to the prompt or some other attribute, e.g.:

[data-ty-prompt="#"] {
    font-style: italic;
}

Usually, there's always some logic to how things should be styled – for example, all commands with a certain prompt should be styled a certain way, or all non-animated output should be italicised etc. In cases like this, it always makes more sense to actually specify a certain style for a data attribute or combination of attributes.

If you want to actually print the raw HTML, just escape the characters:

<span data-ty="input"  data-ty-prompt="#">&lt;i&gt;hello world.&lt;/i&gt;</span>

In the long run, maybe it does make more sense to simply read off the innerHTML of a <span> instead of its textContent... I'll think about this!