add decorations to demo

_includes/demo.html

@@ -1,22 +1,25 @@
 <div class="demo">
     <div class="inner"></div>
 </div>
-<link rel="stylesheet" href="https://unpkg.com/xterm@4.15.0-beta.10/css/xterm.css" />
+<link rel="stylesheet" href="https://unpkg.com/xterm@4.18.0/css/xterm.css" />
 <style>
-.xterm-viewport.xterm-viewport {
-    scrollbar-width: thin;
-}
-.xterm-viewport::-webkit-scrollbar {
-    width: 10px;
-}
-.xterm-viewport::-webkit-scrollbar-track {
-    opacity: 0;
-}
-.xterm-viewport::-webkit-scrollbar-thumb {
-    min-height: 20px;
-    background-color: #ffffff20;
-}
+    .xterm-viewport.xterm-viewport {
+        scrollbar-width: thin;
+    }
+
+    .xterm-viewport::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    .xterm-viewport::-webkit-scrollbar-track {
+        opacity: 0;
+    }
+
+    .xterm-viewport::-webkit-scrollbar-thumb {
+        min-height: 20px;
+        background-color: #ffffff20;
+    }
 </style>
-<script src="https://unpkg.com/xterm@4.15.0-beta.10/lib/xterm.js"></script>
+<script src="https://unpkg.com/xterm@4.18.0/lib/xterm.js"></script>
 <script src="https://unpkg.com/[email protected]/lib/xterm-addon-webgl.js"></script>
-<script src="{{ "/js/demo.js" | prepend: site.baseurl }}"></script>
+<script src="{{ " /js/demo.js" | prepend: site.baseurl }}"></script>

css/main.scss

@@ -185,6 +185,27 @@ h4:hover, h5:hover, h6:hover {
 
 }
 
+.link-hint-decoration {
+  background-color: #ff4500;
+  position: relative;
+  display: inline-block;
+  padding: .2em .5em;
+  border-radius: 15px;
+}
+
+.link-hint-decoration::after {
+  border-bottom: 10px solid #ff4500;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  width: 0;
+  height: 0;
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 100%;
+  left: 1em;
+}
+
 @import 'code';
 @import 'home';
 @import 'syntax_highlight';

js/demo.js

@@ -94,16 +94,16 @@ $(function () {
       ' │   A screen reader mode is available      Zero external dependencies        │',
       ' │                                                                            │',
       ' │  \x1b[35;1mUnicode support                        \x1b[36mAnd much more...\x1b[0m                   │',
-      ' │   Supports CJK 語 and emoji \u2764\ufe0f            \x1b[3mLinks\x1b[0m, \x1b[3mthemes\x1b[0m, \x1b[3maddons\x1b[0m, \x1b[3mtyped API\x1b[0m  │',
-      ' │                                            ^ Try clicking italic text      │',
+      ' │   Supports CJK 語 and emoji \u2764\ufe0f            \x1b[3mLinks\x1b[0m, \x1b[3mthemes\x1b[0m, \x1b[3maddons\x1b[0m,            │',
+      ' │                                          \x1b[3mtyped API\x1b[0m, \x1b[3mdecorations\x1b[0m            │',
       ' │                                                                            │',
       ' └────────────────────────────────────────────────────────────────────────────┘',
       ''
     ].join('\n\r'));
 
     term.writeln('Below is a simple emulated backend, try running `help`.');
+    addDecoration(term);
     prompt(term);
-
     term.onData(e => {
       switch (e) {
         case '\u0003': // Ctrl+C
@@ -197,16 +197,26 @@ $(function () {
                 activate() {
                   window.open('/docs/guides/using-addons/', '_blank');
                 }
-              },
-              {
-                text: 'typed API',
-                range: { start: { x: 68, y: 14 }, end: { x: 76, y: 14 } },
-                activate() {
-                  window.open('https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts', '_blank');
-                }
-              },
+              }
             ]);
             return;
+          case 15: callback([
+            {
+              text: 'typed API',
+              range: { start: { x: 45, y: 15 }, end: { x: 53, y: 15 } },
+              activate() {
+                window.open('https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts', '_blank');
+              }
+            },
+            {
+              text: 'decorations',
+              range: { start: { x: 56, y: 15 }, end: { x: 66, y: 15 } },
+              activate() {
+                window.open('https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L947', '_blank');
+              }
+            },
+          ]);
+            return;
         }
         callback(undefined);
       }
@@ -288,3 +298,14 @@ $(function () {
 
   runFakeTerminal();
 });
+
+function addDecoration(term) {
+  const marker = term.addMarker(16);
+  const decoration = term.registerDecoration({ marker, x: 45, width: 20 });
+  decoration.onRender(element => {
+    element.classList.add('link-hint-decoration');
+    element.innerText = 'Try clicking italic text';
+    element.style.height = '25px';
+    element.style.color = 'white';
+  });
+}