add example for inlay hints

website/playground/new-samples/customizing-the-appearence/exposed-colors/sample.js

@@ -107,6 +107,8 @@ monaco.editor.create(document.getElementById("container"), {
 'editorLineNumber.activeForeground' // Color of editor active line number.
 'editorRuler.foreground' // Color of the editor rulers.
 'editorCodeLens.foreground' // Foreground color of editor code lenses
+'editorInlayHint.foreground' // Foreground color of editor inlay hints
+'editorInlayHint.background' // Background color of editor inlay hints
 'editorBracketMatch.background' // Background color behind matching brackets
 'editorBracketMatch.border' // Color for matching brackets boxes
 'editorOverviewRuler.border' // Color of the overview ruler border.

website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.html

@@ -0,0 +1 @@
+<div id="container" style="height:100%;"></div>

website/playground/new-samples/extending-language-services/inlay-hints-provider-example/sample.js

@@ -0,0 +1,38 @@
+const value = `
+const f = (a, b) => a + b;
+
+const result = f(2, 5);
+`;
+
+const editor = monaco.editor.create(document.getElementById("container"), {
+    value,
+    language: "javascript"
+});
+
+monaco.languages.registerInlayHintsProvider('javascript', {
+    provideInlayHints(model, range, token) {
+        return [{
+            kind: monaco.languages.InlayHintKind.Type,
+            position: { column: 13, lineNumber: 4 },
+            text: `: Number`,
+        }, {
+            kind: monaco.languages.InlayHintKind.Type,
+            position: { column: 13, lineNumber: 2 },
+            text: `: Number`,
+        }, {
+            kind: monaco.languages.InlayHintKind.Type,
+            position: { column: 16, lineNumber: 2 },
+            text: `: Number`,
+            whitespaceBefore: true, // see difference between a and b parameter
+        }, {
+            kind: monaco.languages.InlayHintKind.Parameter,
+            position: { column: 18, lineNumber: 4 },
+            text: `a:`,
+        }, {
+            kind: monaco.languages.InlayHintKind.Parameter,
+            position: { column: 21, lineNumber: 4 },
+            text: `b:`,
+            whitespaceAfter: true, // similar to whitespaceBefore
+        }]
+    }
+});