surdu / scroll-marker

Provides scrollbar highlight functionality for Atom Editor

Scroll Marker

This is a base package for Atom that provides the functionality for other atom packages (see list below) to highlight important things on the editor's scroll bar.

That means, in order to get any use out of this package, you also need to install one of the packages bellow.

Packages powered by Scroll Marker:

Name	What it highlights	Marker Layer Class
find-scroll-marker	Search results.	.find-marker-layer
lint-scroll-marker	Lint errors found by linter, atom-ide-ui or nuclide.	.link-scroll-marker-warn, .lint-scroll-marker-error or .link-scroll-marker-info
highlight-selected	Occurrences of the selected text. Scrollbar highlight requires enabling in the package settings.	.highlight-selected-selected-marker-layer

Customize marker color

If you would like to customize the color of the marker for one of the scroll marker types, place the following CSS in you Atom stylesheet:

<marker-layer-class> .scroll-marker {
	background-color: <css-color> !important;
}

Substitute <marker-layer-class> with one of the marker layer classes from the table above and <css-color> with a valid CSS color

Developer documentation

The next part is addressed to developers who want to use the services provided by this package in order to create their own scroll bar marker package or to add scroll bar highlight capabilities to their packages.

If you're new to Atom's Services API I would strongly encourage you to first read the documentation for Services API and their nice blog post about this topic.

The first thing that is needed is declare in your plugin's package.json that you want to consume the scroll-marker service:

{
  "name": "example-scroll-marker",
  "main": "lib/index.js",
  "version": "0.0.0",

  // ...

  "consumedServices": {
    "scroll-marker": {
      "versions": {
        "0.1.0": "consumeScrollMarker"
      }
    }
  }
}

Then, in your main JS file (in this case lib/index.js) add the consumeScrollMarker method:

module.exports = {
  activate() {
    // ...
  },

  consumeScrollMarker(api) {
    // Use `api` here
  },

  deactivate() {
    // ...
  }
};

This will give you the reference to the scroll-marker API.

API

getLayer(editor, name, color)

Creates and returns a singleton instance of Marker Layer. That means there will be only one instance of Marker Layer for a given editor/name combination.

This Marker Layer instance is what you'll use to add/remove markers to the scroll bar. All Markers added to this layer will have the specified color.

Arguments:

• editor - an editor instance, usually acquired by using observeTextEditors
• name - a unique name for the layer, usually the name of your package
• color - CSS color that you want the markers added to this layer to be

Example:

consumeScrollMarker(api) {
  atom.workspace.observeTextEditors(function(editor) {
    const layer = api.getLayer(editor, "example-layer", "#00ff00");
    // ...
  });
}

Marker Layer

addMarker(line)

Adds a marker on the marker layer at the specified line.

Arguments:

• line - line number you want to add the marker to. Note that the first line number is 0.

Example:

consumeScrollMarker(api) {
  atom.workspace.observeTextEditors(function(editor) {
    const layer = api.getLayer(editor, "example-layer", "#00ff00");
    layer.addMarker(2);
  });
}

---

syncToMarkerLayer(markerLayer)

Sync the markers on the scroll marker layer with the markers on a DisplayMarkerLayer.

Arguments:

• markerLayer - an instance of DisplayMarkerLayer that is usually used to highlight text in the editor

Example:

consumeScrollMarker(api) {
  atom.workspace.observeTextEditors(function(editor) {
    const scrollLayer = api.getLayer(editor, "example-layer", "#00ff00");
    // `findApi` was obtained similarly to `api` but from find-and-replace package
    const searchLayer = findApi.resultsMarkerLayerForTextEditor(editor);

    scrollLayer.syncToMarkerLayer(searchLayer);
  });
}

For a detailed syncToMarkerLayer working example you can checkout the find-scroll-marker source code.