diff --git a/test/playground.generated/extending-language-services-color-provider-example.html b/test/playground.generated/extending-language-services-color-provider-example.html
new file mode 100644
index 00000000..e23a98cf
--- /dev/null
+++ b/test/playground.generated/extending-language-services-color-provider-example.html
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+
+
+
+[<< BACK]
+THIS IS A GENERATED FILE VIA gulp generate-test-samples
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/playground.generated/index.html b/test/playground.generated/index.html
index 6d8643d4..a684f42f 100644
--- a/test/playground.generated/index.html
+++ b/test/playground.generated/index.html
@@ -29,6 +29,7 @@ THIS IS A GENERATED FILE VIA gulp generate-test-samples
Extending Language Services > Custom languages
Extending Language Services > Completion provider example
Extending Language Services > Codelens provider example
+Extending Language Services > Color provider example
Extending Language Services > Hover provider example
Extending Language Services > Configure JavaScript defaults
Extending Language Services > Configure JSON defaults
diff --git a/website/playground/new-samples/all.js b/website/playground/new-samples/all.js
index 892d8aa8..54395bc2 100644
--- a/website/playground/new-samples/all.js
+++ b/website/playground/new-samples/all.js
@@ -133,6 +133,12 @@ var PLAY_SAMPLES = [
id: "extending-language-services-codelens-provider-example",
path: "extending-language-services/codelens-provider-example"
},
+ {
+ chapter: "Extending Language Services",
+ name: "Color provider example",
+ id: "extending-language-services-color-provider-example",
+ path: "extending-language-services/color-provider-example"
+ },
{
chapter: "Extending Language Services",
name: "Hover provider example",
diff --git a/website/playground/new-samples/extending-language-services/color-provider-example/sample.css b/website/playground/new-samples/extending-language-services/color-provider-example/sample.css
new file mode 100644
index 00000000..e69de29b
diff --git a/website/playground/new-samples/extending-language-services/color-provider-example/sample.html b/website/playground/new-samples/extending-language-services/color-provider-example/sample.html
new file mode 100644
index 00000000..b2e43e28
--- /dev/null
+++ b/website/playground/new-samples/extending-language-services/color-provider-example/sample.html
@@ -0,0 +1 @@
+
diff --git a/website/playground/new-samples/extending-language-services/color-provider-example/sample.js b/website/playground/new-samples/extending-language-services/color-provider-example/sample.js
new file mode 100644
index 00000000..bedf1b32
--- /dev/null
+++ b/website/playground/new-samples/extending-language-services/color-provider-example/sample.js
@@ -0,0 +1,63 @@
+monaco.languages.register({
+ id: "colorLanguage"
+})
+
+monaco.editor.create(document.getElementById("container"), {
+ value: "red\nblue\ngreen",
+ language: "colorLanguage",
+ colorDecorators: true
+});
+
+monaco.languages.registerColorProvider("colorLanguage", {
+ provideColorPresentations: (model, colorInfo) => {
+ var color = colorInfo.color;
+ var red256 = Math.round(color.red * 255);
+ var green256 = Math.round(color.green * 255);
+ var blue256 = Math.round(color.blue * 255);
+ var label;
+ if (color.alpha === 1) {
+ label = "rgb(" + red256 + ", " + green256 + ", " + blue256 + ")";
+ } else {
+ label = "rgba(" + red256 + ", " + green256 + ", " + blue256 + ", " + color.alpha + ")";
+ }
+
+ return [
+ {
+ label: label
+ }
+ ];
+ },
+
+ provideDocumentColors: () => {
+ return [
+ {
+ color: { red: 1, blue: 0, green: 0, alpha: 1 },
+ range:{
+ startLineNumber: 1,
+ startColumn: 0,
+ endLineNumber: 1,
+ endColumn: 0
+ }
+ },
+ {
+ color: { red: 0, blue: 1, green: 0, alpha: 1 },
+ range:{
+ startLineNumber: 2,
+ startColumn: 0,
+ endLineNumber: 2,
+ endColumn: 0
+ }
+ },
+ {
+ color: { red: 0, blue: 0, green: 1, alpha: 1 },
+ range:{
+ startLineNumber: 3,
+ startColumn: 0,
+ endLineNumber: 3,
+ endColumn: 0
+ }
+ }
+ ]
+ }
+
+})
\ No newline at end of file