Emmet plugin for </p> </div> </div> </div> </div> <div class="py-3 border-bottom border-light-dark"> <div class="container"> <ul class="d-flex list-unstyled p-0 position-relative mb-0 mx-n2"> <li class="px-2"> <a class="fw-bold text-primary" href="https://www.opensourceagenda.com/projects/textarea">Overview</a> </li> <li class="px-2"> <a class="fw-bold text-black" href="https://www.opensourceagenda.com/projects/textarea/reviews">Reviews</a> </li> <li class="px-2"> <a class="fw-bold text-black" href="https://www.opensourceagenda.com/projects/textarea/resources">Resources</a> </li> </ul> </div> </div> <div class="container my-5"> <div class="row g-4"> <div class="col-12 col-lg-8 order-2 order-lg-1"> <div> <div class="px-2 mb-3 bg-primary text-white d-inline-block position-relative">Project README</div> <div id="readme" class="section-l" data-base="https://github.com/emmetio/textarea/blob/master/" class="readme mb-4"> <div> <h1><a href="http://emmet.io">Emmet</a> plugin for <textarea></h1> <p><em>This plugin is automatically compiled from the <a href="https://github.com/emmetio/emmet">Emmet core</a>. If you want to contribute features or fix bugs, please do this in <a href="https://github.com/emmetio/emmet/tree/master/plugins/textarea">plugin source</a>.</em></p> <hr> <p>To add Emmet support and basic code editor features (like Tab key handler and formatted linebreak insertion) to your <code><textarea></code> boxes:</p> <ol> <li>Add <code><script src="emmet.min.js"></script></code> into your page</li> <li>Run this JavaScript code:</li> </ol> <pre><code class="language-js">emmet.require('textarea').setup({ pretty_break: true, // enable formatted line breaks (when inserting // between opening and closing tag) use_tab: true // expand abbreviations by Tab key }); </code></pre> <p>Additionally, you can add special classes to your <code><textarea></code> element to control Emmet behavior:</p> <ul> <li> <code>emmet-syntax-NAME</code>: set syntax <code>NAME</code> for current <code><textarea></code>: <code>html</code>, <code>css</code>, <code>xml</code> etc.</li> <li> <code>emmet-profile-NAME</code>: set one of the <a href="http://docs.emmet.io/customization/syntax-profiles/#predefined-profiles">predefined profile</a>.</li> <li> <code>emmet-use_tab-BOOL</code>: enable (<code>yes</code>) or disable (<code>no</code>) Tab expander on current <code><textarea></code>.</li> <li> <code>emmet-pretty_break-BOOL</code>: enable (<code>yes</code>) or disable (<code>no</code>) formatted linebreak insertion on current <code><textarea></code>.</li> <li> <code>no-emmet</code>: disable Emmet actions on current <code><textarea></code>.</li> </ul> <a href="#overriding-keybindings"></a><h2 id="overriding-keybindings">Overriding keybindings</h2> <p>To override default keybindings, simply create global <code>emmetKeymap</code> object, the same as <a href="https://github.com/emmetio/emmet/blob/master/plugins/textarea/controller.js#L8">default one</a> but with your own keybindings.</p> </div> </div> <div class="text-xs">Open Source Agenda is not affiliated with "Textarea" Project. README Source: <a href="https://github.com/emmetio/textarea" target="_blank">emmetio/textarea</a></div> </div> </div> <div class="col-12 col-lg-4 order-1 order-lg-2"> <div> <div class="d-flex justify-content-center mb-5"> </div> <div class="mb-3"> <div class="row pb-3"> <div class="col-6"> <span class="fw-bold">Stars</span> </div> <div class="col-6 text-end"> <span class="fw-bold">120</span> </div> </div> <div class="row pb-3"> <div class="col-6"> <span class="fw-bold">Open Issues</span> </div> <div class="col-6 text-end"> <span class="fw-bold">5</span> </div> </div> <div class="row pb-3"> <div class="col-6"> <span class="fw-bold">Last Commit</span> </div> <div class="col-6 text-end"> <span class="fw-bold">10 years ago</span> </div> </div> <div class="row pb-3"> <div class="col-12"> <span class="fw-bold">Repository</span> </div> <div class="col-12"> <a href="https://github.com/emmetio/textarea" target="_blank" class="fw-bold text-primary">emmetio/textarea</a> </div> </div> </div> <div class="mb-4"> <div class="card bg-light p-3"> <h4>Open Source Agenda Badge</h4> <div class="mb-3"> <img src="https://www.opensourceagenda.com/projects/textarea/reviews/badge.svg" alt="Open Source Agenda Rating" /> </div> <div> <textarea class="w-100 p-2 border-white bg-light text-dark" readonly style="height:115px;word-break:break-all;"><a href="https://www.opensourceagenda.com/projects/textarea"><img src="https://www.opensourceagenda.com/projects/textarea/reviews/badge.svg" alt="Open Source Agenda"></a>
