3 files changed, 54 insertions, 3 deletions

diff --git a/editors/code/package-lock.json b/editors/code/package-lock.json
index 29cd260a4..6b3a12f91 100644
--- a/editors/code/package-lock.json
+++ b/editors/code/package-lock.json
@@ -36,6 +36,11 @@
             "integrity": "sha512-Ja7d4s0qyGFxjGeDq5S7Si25OFibSAHUi6i17UWnwNnpitADN7hah9q0Tl25gxuV5R1u2Bx+np6w4LHXfHyj/g==",
             "dev": true
         },
+        "@types/seedrandom": {
+            "version": "2.4.28",
+            "resolved": "https://registry.npmjs.org/@types/seedrandom/-/seedrandom-2.4.28.tgz",
+            "integrity": "sha512-SMA+fUwULwK7sd/ZJicUztiPs8F1yCPwF3O23Z9uQ32ME5Ha0NmDK9+QTsYE4O2tHXChzXomSWWeIhCnoN1LqA=="
+        },
         "agent-base": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz",
@@ -984,6 +989,11 @@
             "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
             "dev": true
         },
+        "seedrandom": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.1.tgz",
+            "integrity": "sha512-1/02Y/rUeU1CJBAGLebiC5Lbo5FnB22gQbIFFYTLkwvp1xdABZJH1sn4ZT1MzXmPpzv+Rf/Lu2NcsLJiK4rcDg=="
+        },
         "semver": {
             "version": "5.7.0",
             "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
diff --git a/editors/code/package.json b/editors/code/package.json
index cde5fbcb8..d8ba914f5 100644
--- a/editors/code/package.json
+++ b/editors/code/package.json
@@ -31,11 +31,13 @@
         "singleQuote": true
     },
     "dependencies": {
+        "seedrandom": "^3.0.1",
         "vscode-languageclient": "^5.3.0-next.4"
     },
     "devDependencies": {
         "@types/mocha": "^5.2.6",
         "@types/node": "^10.14.5",
+        "@types/seedrandom": "^2.4.28",
         "prettier": "^1.17.0",
         "shx": "^0.3.1",
         "tslint": "^5.16.0",
diff --git a/editors/code/src/highlighting.ts b/editors/code/src/highlighting.ts
index 8389d94b8..4597db08f 100644
--- a/editors/code/src/highlighting.ts
+++ b/editors/code/src/highlighting.ts
@@ -1,3 +1,4 @@
+import seedrandom = require('seedrandom');
 import * as vscode from 'vscode';
 import * as lc from 'vscode-languageclient';
 
@@ -6,6 +7,20 @@ import { Server } from './server';
 export interface Decoration {
     range: lc.Range;
     tag: string;
+    id?: string;
+}
+
+// Based on this HSL-based color generator: https://gist.github.com/bendc/76c48ce53299e6078a76
+function fancify(seed: string, shade: 'light' | 'dark') {
+    const random = seedrandom(seed);
+    const randomInt = (min: number, max: number) => {
+        return Math.floor(random() * (max - min + 1)) + min;
+    };
+
+    const h = randomInt(0, 360);
+    const s = randomInt(42, 98);
+    const l = shade === 'light' ? randomInt(15, 40) : randomInt(40, 90);
+    return `hsl(${h},${s}%,${l}%)`;
 }
 
 export class Highlighter {
@@ -76,6 +91,8 @@ export class Highlighter {
         }
 
         const byTag: Map<string, vscode.Range[]> = new Map();
+        const colorfulIdents: Map<string, vscode.Range[]> = new Map();
+
         for (const tag of this.decorations.keys()) {
             byTag.set(tag, []);
         }
@@ -84,9 +101,23 @@ export class Highlighter {
             if (!byTag.get(d.tag)) {
                 continue;
             }
-            byTag
-                .get(d.tag)!
-                .push(Server.client.protocol2CodeConverter.asRange(d.range));
+
+            if (d.id) {
+                if (!colorfulIdents.has(d.id)) {
+                    colorfulIdents.set(d.id, []);
+                }
+                colorfulIdents
+                    .get(d.id)!
+                    .push(
+                        Server.client.protocol2CodeConverter.asRange(d.range)
+                    );
+            } else {
+                byTag
+                    .get(d.tag)!
+                    .push(
+                        Server.client.protocol2CodeConverter.asRange(d.range)
+                    );
+            }
         }
 
         for (const tag of byTag.keys()) {
@@ -96,5 +127,13 @@ export class Highlighter {
             const ranges = byTag.get(tag)!;
             editor.setDecorations(dec, ranges);
         }
+
+        for (const [hash, ranges] of colorfulIdents.entries()) {
+            const dec = vscode.window.createTextEditorDecorationType({
+                light: { color: fancify(hash, 'light') },
+                dark: { color: fancify(hash, 'dark') }
+            });
+            editor.setDecorations(dec, ranges);
+        }
     }
 }