Dynamic grids inside input textarea?

[Taler]

Hi, I want to create a way for users to get live feedback when creating layouts in an input form.

So when they're making a div, I want to show borders around the <div> and </div>, so they can see where each one starts and where each ends.

This is sorta almost like a WYSIWYG, except much simpler and suited only to one purpose. I'm not sure where to start on this, does anyone have any guidance?

Thanks!

[crmalibu]

Maybe you could provide us with an image to demonstrate what you mean?

[Taler]

Thanks for your reply, I'm looking to enable users to type into an input field like this:


Type some stuff:


And for javascript to automatically grid the code like this:


Thanks for your help!

[paul_wilkins]

You can achieve the desired look with the following css and html

.rendered {
	margin: 0.5em;
	padding: 0.5em;
}
.rendered div {
	border: 1px solid black;
	margin: 0.5em 0;
	padding: 0.5em;
	width: 10em;
}

<div>&lt;div&gt;<br>
Text here<br>
some more stuff<br>
&lt;/div&gt;</div>
Some Misc Stuff<br>
<div>&lt;div&gt;<br>
Text here<br>
&lt;/div&gt;</div>

But converting the source code to the target code is something that I doubt will be easily achievable.