Recently i Found this cool thing(Zen Coding) which is also supported by IntelliJ IDEA.<\/p>\n
Long story short, Zen Coding is a shorthand notation for writing HTML\/CSS, Few Examples are as Follows:<\/p>\n
Ex-1 Writing a nested Markup Quickly<\/strong> [html] AND You Will Get…….<\/p>\n [html] Magic….. And We Will Get…..<\/p>\n [html] \nEX-3 Assigning variable Id\/Classes\/anything<\/strong> And We Will Get… Note:<\/strong> Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ \u2192 li.item001 And We will Get… and So on…… Lots of possibilities here.. \ud83d\ude09<\/p>\n \nEx-4 Assigning class and id both together<\/strong> And we will get… \nEx-5: Custom Attributes<\/strong> And we will get…. \nEx-6: Abbreviation groups with unlimited nesting<\/strong> And we will get.. You can literally write a full document markup with just a single line. \ud83d\ude42 Awesome..<\/p>\n \nEx-7: Another Example Incorporating All we learnt \ud83d\ude42<\/strong> And we will get….. Regards Recently i Found this cool thing(Zen Coding) which is also supported by IntelliJ IDEA. Long story short, Zen Coding is a shorthand notation for writing HTML\/CSS, Few Examples are as Follows: Ex-1 Writing a nested Markup Quickly Now in IDEA lets open any gsp\/html page and write: [html] div#mainDivId>p+h1+p.classForP (After Writing this press TAB) [\/html] […]<\/p>\n","protected":false},"author":28,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0},"categories":[7],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/4107"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=4107"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/4107\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=4107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=4107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=4107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nNow in IDEA lets open any gsp\/html page and write:<\/p>\n
\ndiv#mainDivId>p+h1+p.classForP (After Writing this press TAB)
\n[\/html]<\/p>\n
\n<div id="mainDivId">
\n <p><\/p>
\n <h1><\/h1>
\n <p class="classForP"><\/p>
\n<\/div>
\n[\/html]<\/p>\n
\nThe Zen Code string is self explanatory and also easy to desipher after looking at the output.. \ud83d\ude09
\n
\nEx-2 Repeating Elements<\/strong>
\nNow lets try this In gsp\/html page,
\n[html]
\nli*5 (Then press TAB as Before)
\n[\/html]<\/p>\n
\n<li><\/li><li><\/li><li><\/li><li><\/li><li><\/li>
\n[\/html]
\ni.e: li is repeated 5 times, hence multiplying with a number ‘n’ repeates it ‘n’ number of times.<\/p>\n
\nNote:<\/strong>Item numbering with $ character: li.item$*3 will output ‘li’ tag three times, replacing $ character with item number.
\n[html]
\nli.item$*3 (Press TAB as Always)
\n[\/html]<\/p>\n
\n[html]
\n<li class="item1"><\/li><li class="item2"><\/li><li class="item3"><\/li>
\n[\/html]<\/p>\n
\nLets try this:
\n[html]
\n li.item$$$*3 (Tab Again..)
\n[\/html]<\/p>\n
\n[html]
\n<li class="item001"><\/li><li class="item002"><\/li><li class="item003"><\/li>
\n[\/html]<\/p>\n
\n[html]
\ndiv#page.section.main
\n[\/html]<\/p>\n
\n[html]
\n<div id="page" class="section main"><\/div>
\n[\/html]<\/p>\n
\nlets try this…
\n[html]
\ntd[colspan=2]
\n[\/html]<\/p>\n
\n[html]
\n<td colspan="2"><\/td>
\n[\/html]<\/p>\n
\nLets try this…
\n[html]
\ndiv#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
\n[\/html]<\/p>\n
\n[html]
\n<div id="page">
\n <div id="header">
\n <ul id="nav">
\n <li><a href=""><\/a><\/li>
\n <li><a href=""><\/a><\/li>
\n <li><a href=""><\/a><\/li>
\n <li><a href=""><\/a><\/li>
\n <\/ul>
\n <\/div>
\n <div id="page">
\n <h1><span><\/span><\/h1>
\n <p><\/p>
\n <p><\/p>
\n <\/div>
\n <div id="footer"><\/div>
\n<\/div>
\n[\/html]<\/p>\n
\nLets Try this…
\n[html]
\ndiv#page>div.logo+ul#navigation>li*5>a
\n[\/html]<\/p>\n
\n[html]
\n<div id="page">
\n <div class="logo"><\/div>
\n <ul id="navigation">
\n <li><a href=""><\/a><\/li>
\n <li><a href=""><\/a><\/li>
\n <li><a href=""><\/a><\/li>
\n <li><a href=""><\/a><\/li>
\n <li><a href=""><\/a><\/li>
\n <\/ul>
\n<\/div>
\n[\/html]<\/p>\n
\nKushal Likhi
\nIntelligrape Softwares<\/p>\n","protected":false},"excerpt":{"rendered":"