7

Our application can share code. For example user is sharing the html code as follows

<div id="nav-vert-one">

<ul>
{{for GroupCollection}}
<li>
 <a href="#" title="{{:Name}}" onclick="test()">      {{:Name}}</a>
('{{:GroupId}}')">

</li>
{{/for}}
</ul>

which is not in a perfect format .... Now i need to achieve the (auto) code formatting ...

i.e. after auto code format click, it should look like 

<div id="nav-vert-one">
    <ul>
        {{for GroupCollection}}
        <li><a href="#" title="{{:Name}}" onclick="test()"> {{:Name}}</a>
('{{:GroupId}}')"></li>
        {{/for}}
    </ul>

So, is there ready made plugin available or is there any way(s) to achieve it either via jQuery or C#?

ismail baig
  • 861
  • 2
  • 11
  • 39
  • Is this a string you have on the client slide after the page is rendered? Or is this before rendering? – jyore Mar 07 '13 at 12:20
  • It's invalid HTML. ``. – mak Mar 07 '13 at 12:41
  • 7
    Try https://github.com/einars/js-beautify or https://code.google.com/p/google-code-prettify/ Both of these also support HTML. – mak Mar 07 '13 at 12:42
  • @jYore: (if with string you meant the whole code then yes, This is the string on the client side. – ismail baig Mar 07 '13 at 13:49
  • @mak: yes, now have made corrections. – ismail baig Mar 07 '13 at 13:51
  • 3
    I would need a bit more context.The Application is a Webage / Winforms / WPF /... ? How is the code shared, with Textarea , textfile, textbox, ... ? The Codeformating should happen in VS / special Control / ckeditor / ...? Thx in advance 4 the infos – winner_joiner Mar 08 '13 at 07:00
  • @winner_joiner: 1. ) the application is a webPage done using MVC. 2.) Code is shared with TextArea 3.) Code formating should happen via jQuery or C# programtically – ismail baig Mar 11 '13 at 12:48
  • I haven't dug very deep into the solution posted, but does this help much? http://stackoverflow.com/questions/813119/how-do-you-call-document-format-programmatically-from-c – JakeJ Mar 12 '13 at 11:11
  • The options presented from **mak** is a good solution github.com/einars/js-beautify or code.google.com/p/google-code-prettify , or do you need something more specific? – winner_joiner Mar 13 '13 at 08:49
  • @winner_joiner: i will try the option provided by mak. thanks. – ismail baig Mar 13 '13 at 09:25

1 Answers1

1

There is a jQuery plugin called jquery-htmlClean: http://code.google.com/p/jquery-clean/

I tried it with your code sample, this is the output: 

<div>
    <ul>
        {{for GroupCollection}}
        <li>
            <a href="#" title="{{:Name}}">{{:Name}}</a> ('{{:GroupId}}')">
        </li> {{/for}}
    </ul>
</div>

You can try it here: http://www.antix.co.uk/Content/Demos/jQuery-htmlClean/Test.htm

mfo
  • 152
  • 4