Add highlight CSS (#2985)

Author: jasonLaster

src/components/Editor/Highlight.css

@@ -0,0 +1,41 @@
+.cm-highlight {
+  position: relative;
+}
+
+.cm-highlight::before {
+  position: absolute;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-top-color: var(--theme-comment-alt);
+  border-bottom-color: var(--theme-comment-alt);
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  top: -1px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  content: "";
+  margin-bottom: -1px;
+}
+
+.cm-highlight-full::before {
+  border: 1px solid var(--theme-comment-alt);
+}
+
+.cm-highlight-start::before {
+  border-left-width: 1px;
+  border-left-style: solid;
+  border-left-color: var(--theme-comment-alt);
+  margin: 0 0 -1px -1px;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+.cm-highlight-end::before {
+  border-right-width: 1px;
+  border-right-style: solid;
+  border-right-color: var(--theme-comment-alt);
+  margin: 0 -1px -1px 0;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}

src/components/Editor/index.js

@@ -75,6 +75,7 @@ import {
 import { getVisibleVariablesFromScope } from "../../utils/scopes";
 import { isFirefox } from "devtools-config";
 import "./Editor.css";
+import "./Highlight.css";
 
 import { SourceEditor } from "devtools-source-editor";