https://github.com/apendua/meteor-highlight

JQuery plugin for highlighting parts of text repacked for meteor
https://github.com/apendua/meteor-highlight

Last synced: 9 days ago
JSON representation

JQuery plugin for highlighting parts of text repacked for meteor

• Host: GitHub
• URL: https://github.com/apendua/meteor-highlight
• Owner: apendua
• Created: 2014-03-27T18:21:04.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-04-08T15:08:26.000Z (over 10 years ago)
• Last Synced: 2024-10-19T16:47:55.795Z (20 days ago)
• Language: JavaScript
• Size: 172 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
meteor-highlight

================

This package is based on an old **jquery** plugin implemented by Johann Burkard

and then refined in 2009 ([look here](https://github.com/bartaz/sandbox.js/blob/master/jquery.highlight.js))

by Bartek Szopka (the author of [impress.js](https://github.com/bartaz/impress.js)).

Please keep in mind, that **the package is only designed to works with the latest rendering engine**

(i.e. the `blaze` branch).

## Instalation

Assuming your are already using **atmosphere** just type

```

mrt add highlight

```

## Usage

Since this is a **jquery** plugin you can always do things like

```javascript

$('p').highlight('some phrase');

$('p').unhighlight();

```

If you are expecting reactivity and don't want to write everything from scratch,

you can also use the `highlight` helper

```html

  {{#highlight keywords="text"}}

    
This text will be highlighted.

  {{/highlight}}


```

Please note that calling block helper with hash parameters will overwrite

the current data context. This can be solved by creating a `keywords`

helper for our template, so

```javascript

Template.someTemplate.helpers({

  keywords: function () {

    return 'text'; // or whatever ...

  }

});

```

and then the code

```html

  {{#highlight}}

    
This text will be highlighted.

  {{/highlight}}


```

will work as well.

## Customizing

The way the highlighted text look is controlled by `.highlight` class. By default it is just

```css

.highlight {

  background-color: yellow;

}

```

so if you want more fancy look just overwrite the stylesheet.

## TODO

There is still much to do so you are very wellcome to contribute :)

- better documentation

- some examples with reactivity

- inline version of the helper