atom-indent-codecrumbs

Atom plugin package to add breadcrumbs feature based on code indendation

ocoka

538

1

1.3.5

MIT

GitHub

Atom plugin package that adds breadcrumbs feature based on code indendation

Any language, can be easily extended to support more languages in aspect of crumbs colorization and clean filtering

image

How to add new color for crumbs

No colors

  1. Place the cursor in the editor on the row that you want to colorize in breadcrumbs
  2. Invoke CTRL-SHIFT-P (Command Pallete)
  3. Find command Log cursor scope and invoke it
  4. Take scope

Get scope from notification popup

  1. Open user stylesheet Command to open stylesheet
  2. Insert import this plugin
@import (reference) 'packages/atom-indent-codecrumbs/styles/index';
  1. Invoke special LESS mixin
/* add color fur current language scope */
@import (reference) 'packages/atom-indent-codecrumbs/styles/index';
.codecrumbsAddColor(orange, ~'meta.property-list');

  1. Feel the difference Result

  2. You can easily reconfigure component styles styling

// same import 
@import (reference) 'packages/atom-indent-codecrumbs/styles/index';
// set parameters
@codecrumbs-height: 14px; // corners height (crumbs will have height = @codecrumbs-height * 2)
@codecrumbs-width: 10px; // corners width
@codecrumbs-max: 26ch; // max crumb width, text will have ellipsis
@codecrumbs-min: 5ch; // min crumb width
@codecrumbs-font: 1.2rem; // font-size
// after parameters set invoke reconfiguration mixin
.codeCrumbsReconfigure();

Of course you can do any styling you want just by overriding CSS rules in your user style.less