GithubHelp home page GithubHelp logo

liuderchi / atom-quick-highlight Goto Github PK

View Code? Open in Web Editor NEW

This project forked from t9md/atom-quick-highlight

0.0 2.0 0.0 123 KB

Highlight text quickly

Home Page: https://atom.io/packages/quick-highlight

License: MIT License

CoffeeScript 41.90% CSS 9.49% JavaScript 48.61%

atom-quick-highlight's Introduction

quick-highlight Build Status

  • Highlight selected and multiple persisting highlight across visible editor. gif

  • Show found count on StatusBar. gif

Commands

  • quick-highlight:toggle toggle highlight for selected or cursor word.
  • quick-highlight:clear clear all highlight.

And following two operator for vim-mode-plus user.

  • vim-mode-plus-user:quick-highlight: Operator to highlight by text-object or motion.
  • vim-mode-plus-user:quick-highlight-word Highlight cursor word, similar to quick-highlight:toggle, but well fit for vim's block cursor orientation. And . repeatable.

Keymap

No default keymap.

e.g.

  • general
'atom-workspace atom-text-editor:not([mini])':
  'cmd-k m': 'quick-highlight:toggle'
  'cmd-k M': 'quick-highlight:clear'
  • vim-mode-plus user
'atom-text-editor.vim-mode-plus.normal-mode, atom-text-editor.vim-mode-plus.visual-mode':
  'space m': 'vim-mode-plus-user:quick-highlight-word'
  'space M': 'quick-highlight:clear'
  'g m': 'vim-mode-plus-user:quick-highlight'

Modify highlight style

You can override style in you style.less. See example below.

@import "syntax-variables";

// For selection color
//=======================
atom-text-editor .quick-highlight.box-selection .region {
  border-width: 1px;
  background-color: transparent;
  border-color: @syntax-text-color;
}

// Make underline manual highlight prioritized(come front) over other highlight
//=======================
// Mixin to set z-index of quick-highlight manual color
.quick-highlight-z-index(@name, @value) {
  .quick-highlight.@{name} .region {
    z-index: @value;
  }
}

// quick-highlight use 0 to 7 color
//  for box style, use box-01 to box-07
//  for highlight style, use highlight-01 to highlight-07
.quick-highlight-z-index(underline-01, 1);
.quick-highlight-z-index(underline-02, 1);
.quick-highlight-z-index(underline-03, 1);
.quick-highlight-z-index(underline-04, 1);
.quick-highlight-z-index(underline-05, 1);
.quick-highlight-z-index(underline-06, 1);
.quick-highlight-z-index(underline-07, 1);

vim-mode-plus operator

You can quick-highlight with combination of any motion, text-object.
Since it's operator, yes can repeat by ..

e.g.

  • g m i w: highlight inner-word.
  • g m i l: highlight inner-line.
  • g m i': highlight inner-single-quote.
  • v 2 l g m: highlight three visually selected character..

Display found count on StatusBar

By default, when you highlight new text by quick-highlight:toggle, found count is displayed on StatusBar.
You can configure CSS class to use with countDisplayStyles.
See. styleguide:show for available style classes.

e.g.

  • Default: badge icon icon-location
  • e.g. 2: badge badge-error icon icon-bookmark
  • e.g. 3: badge badge-success icon icon-light-bulb
  • e.g. 4: btn btn-primary selected inline-block-tight

TODO

  • Improve default to dynamically change using color-channel?
  • Highlight with RegExp.

atom-quick-highlight's People

Contributors

t9md avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.