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.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent