Merge pull request #101 from lannonbr/decorator-sample/usage-document

Adding some usage documentation for the decorator sample

decorator-sample/USAGE.md

@@ -0,0 +1,70 @@
+# Adding Decorations
+
+The Decorator API allows text to be decorated with a subset of CSS.
+
+The following steps can be done to decorate content in an editor:
+
+## Decoration Types
+
+the [TextEditorDecorationType](https://code.visualstudio.com/docs/extensionAPI/vscode-api#TextEditorDecorationType) class defines how to style a decoration.
+
+It can be created using `vscode.window.createTextEditorDecorationType`. It takes an object as a parameter which includes any of the properties of [DecorationRenderOptions](https://code.visualstudio.com/docs/extensionAPI/vscode-api#DecorationRenderOptions) which match up to their CSS properties.
+
+```typescript
+const smallNumberDecorationType = vscode.window.createTextEditorDecorationType({
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    overviewRulerColor: 'blue',
+    overviewRulerLane: vscode.OverviewRulerLane.Right,
+    light: {
+        // this color will be used in light color themes
+        borderColor: 'darkblue'
+    },
+    dark: {
+        // this color will be used in dark color themes
+        borderColor: 'lightblue'
+    }
+});
+```
+
+## Creating an array of Ranges
+
+the Decorator API requires an array of [Ranges](https://code.visualstudio.com/docs/extensionAPI/vscode-api#Range). A VS Code range object describes a range of code which can span across both rows and columns in a single file.
+
+you can either use a `Range[]` or a [DecorationOptions[]](https://code.visualstudio.com/docs/extensionAPI/vscode-api#DecorationOptions).
+
+For simple sets of selections, using a regular expression can be useful.
+
+```typescript
+const regEx = /\d+/g;
+
+const text = activeEditor.document.getText();
+const smallNumbers: vscode.DecorationOptions[] = [];
+
+let match;
+
+while (match = regEx.exec(text)) {
+    const startPos = activeEditor.document.positionAt(match.index);
+    const endPos = activeEditor.document.positionAt(match.index + match[0].length);
+
+const decoration = { range: new vscode.Range(startPos, endPos), hoverMessage: 'Number **' + match[0] + '**' };
+    if (match[0].length < 3) {
+        smallNumbers.push(decoration);
+    }
+}
+```
+
+## Setting the decoration
+
+Finally, you can insert the decoration into any editor with the `setDecorations` method of the [TextEditor](https://code.visualstudio.com/docs/extensionAPI/vscode-api#TextEditor) class. It takes two arguments:
+
+* The `TextEditorDecorationType` defined for the decoration.
+* Either a `Range` array or a `DecorationOptions` array.
+
+```typescript
+activeEditor.setDecorations(smallNumberDecorationType, smallNumbers);
+```
+
+## Tips
+
+As a note, if you insert a new range of decorations using `editor.setDecorations` with a `TextEditorDecorationType` that has already been used, it will overwrite the previous set of decorations.