Skip to content

Commit

Permalink
Update Readme
Browse files Browse the repository at this point in the history
  • Loading branch information
richrace committed Jul 8, 2018
1 parent f6b4075 commit 9852cb5
Showing 1 changed file with 67 additions and 23 deletions.
90 changes: 67 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,48 +1,92 @@
# Highlight Selected

[![Join the chat at https://gitter.im/richrace/highlight-selected](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/richrace/highlight-selected?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Build Status](https://travis-ci.org/richrace/highlight-selected.svg?branch=master)](https://travis-ci.org/richrace/highlight-selected)
[![Version](https://img.shields.io/apm/v/highlight-selected.svg?style=flat-square)](https://atom.io/packages/highlight-selected)
[![Travis CI](https://img.shields.io/travis/richrace/highlight-selected.svg?style=flat-square)](https://travis-ci.org/richrace/highlight-selected)
[![Gitter](https://img.shields.io/badge/chat-Gitter-ff69b4.svg?style=flat-square)](https://gitter.im/richrace/highlight-selected)
[![Downloads](https://img.shields.io/apm/dm/highlight-selected.svg?style=flat-square)](https://atom.io/packages/highlight-selected)
[![Licence](https://img.shields.io/apm/l/highlight-selected.svg?style=flat-square)](https://atom.io/packages/highlight-selected)
[![David](https://img.shields.io/david/richrace/highlight-selected.svg?style=flat-square)](https://david-dm.org/richrace/highlight-selected)

Double click on a word to highlight it throughout the open file.

This is something hacky I've put together as I missed the functionality that
Sublime gave.
Highlight occurrences of a selection within the open editor.

Some code and has been taken from Atom's
[find and replace](https://github.com/atom/find-and-replace) package

Please log any issues and pull requests are more than welcome!
Can be triggered by either double clicking a word, or selecting a word/text with your cursor.

![Gif in action](http://i.imgur.com/C5FnzzQ.gif)

Change the following CSS in your StyleSheet to change the colours to suit your
theme. Either set the light theme check box in settings to be able to toggle
between styles or just overwrite the default box/background.
## Commands

|Command Name|Command Code|Keymap|Description|
|---|---|---|---|
|Toggle|`highlight-selected:toggle`|<kbd>ctrl</kbd>+<kbd>cmd</kbd>+<kbd>h</kbd>|Enables/Disabled this package|
|Select all markers|`highlight-selected:select-all`||Select all markers|

To set a Keymap for select all open your `Keymap` file and add:
```coffeescript
'atom-text-editor:not([mini])':
'cmd-*': 'highlight-selected:select-all'
```


## Settings

|Setting|Default|Description|
|---|---|---|
|Only Highlight Whole Words|true|This uses the "Allowed Characters To Select" option with Atom's "Non-word characters" to find word boundaries.|
|Hide Highlight On Selected Word|false|When enabled to will not add a box around the selected words.|
|Ignore Case|false|Case sensitivity|
|Light Theme|false|Different CSS classes get applied (see [styling](#styling)). Should makes it easier to switch between Atom's themes|
|Highlight Background|false|Adds a background colours via CSS class (see [styling](#styling))|
|Minimum Length|2|How many characters to select before searching for occurrences|
|Timeout|20|Defers searching for matching strings for X ms|
|Highlight In Panes|true|Highlight selection in another panes|
|Show In Status Bar|true|Show how many matches there are|
|Status Bar String|'Highlighted: %c|The text to show in the status bar. `%c` = number of occurrences|
|Allowed Characters To Select|'$@%-'|Non Word Characters that are allowed to be selected. This is useful for languages like PHP where variables like `$test` need to be highlighted|
|Show Results On Scroll Bar|false|Show highlight on the scroll bar. Requires [Scroll Marker](https://atom.io/packages/scroll-marker) Package (if you enable this setting you will be prompted to install the package)|

## Styling

If you want to change any of the styling of the region use the following as a guide:

```scss
atom-text-editor, atom-text-editor::shadow {
atom-text-editor .highlights {
// Box
.highlights .highlight-selected .region {
.highlight-selected .region {
border-color: #ddd;
border-radius: 3px;
border-width: 1px;
border-style: solid;
}
// Background
.highlights .highlight-selected.background .region {
// Background (set in settings)
.highlight-selected.background .region {
background-color: rgba(155, 149, 0, 0.6);
}
// Light theme box (set in settings)
.highlights .highlight-selected.light-theme .region {
.highlight-selected.light-theme .region {
border-color: rgba(255, 128, 64, 0.4);
}
// Light theme background (set in settings)
.highlights .highlight-selected.light-theme.background .region {
.highlight-selected.light-theme.background .region {
background-color: rgba(255, 128, 64, 0.2);
}
}

// If you have the Scroll Marker package installed https://atom.io/packages/scroll-marker
// These are the colours that will be shown in the scroller
.highlight-selected-marker-layer.scroll-marker-layer {
.scroll-marker {
background-color: #ffff00
}
}
```

.highlight-selected-selected-marker-layer.scroll-marker-layer {
.scroll-marker {
background-color: #f71010
}
}
```

# Issues and Todo
## Contributing

- Should we highlight symbols?
- Merge this feature in the
[find-and-replace](https://github.com/atom/find-and-replace) package
Please look at the [Contributing Guide](https://github.com/richrace/highlight-selected/blob/master/CONTRIBUTING.md)

0 comments on commit 9852cb5

Please sign in to comment.