You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

ember-text-highlight

Package Overview
Dependencies
2
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-text-highlight

Simple Ember.Helper that highlights matching parts of a text.


Version published
Maintainers
1
Created

Readme

Source

Ember Text Highlight Build Status Coverage Status Code Climate Greenkeeper badge npm

This addon exposes a simple Ember.Helper that wraps matching parts of a text in a span with a stylable CSS class (mark).

It picks the algorithm that likely performs best in the current environment, making it up to twice as fast as the idiomatic implementation with regular expressions.

Ember Text Highlight Demo (2MB)

Usage

  1. Pick one way to install the addon.

    $ ember install ember-text-highlight
    $ yarn add ember-text-highlight --dev
    $ npm install ember-text-highlight --save-dev
    
  2. Wrap around your template strings

    {{text-highlight content query=query}}
    
  3. Style

    Lets say content is Bryan Burke and query is Bry:

    {{text-highlight 'Bryan Burke' query='bry'}}
    

    The rendered HTML will look like this:

    <span class="mark">Bry</span>an Burke
    

    You can now style the CSS class .mark according to your wishes and context.

    A good start might be the style you see in the demo video above:

    .mark {
      padding: 0 !important;
      background-color: rgba(255, 238, 115, 0.59);
    }
    

    Twitter Bootstrap already ships a pre-styled .mark class.

Contributing

  • Fork repository
  • git clone <forked-repository-url>
  • cd ember-text-highlight
  • yarn install
  • Make sure everything works before you start: yarn run test (Runs ember try:each to test against multiple Ember versions)
  • Improve something
  • Re-run tests and adapt/expand
  • Create a pull request 🙌

Keywords

FAQs

Package last updated on 04 Jan 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc