orange highlighting

Author: Jesse Haigh

src/components/ContentNode/CodeListing.vue

@@ -41,7 +41,8 @@
         v-for="(line, index) in syntaxHighlightedLines"
       ><span
         :key="index"
-        :class="['code-line-container',{ highlighted: isHighlighted(index) }]"
+        :class="['code-line-container',{ highlighted: isHighlighted(index),
+                 'user-highlighted': isUserHighlighted(index) }]"
       ><span
         v-if="showLineNumbers"
         class="code-number"
@@ -163,10 +164,10 @@ export default {
   },
   methods: {
     isHighlighted(index) {
-      const lineNumber = this.lineNumberFor(index);
-      const h1 = this.highlightedLineNumbers.has(lineNumber);
-      const h2 = this.highlightSet.has(lineNumber);
-      return (h1 || h2);
+      return this.highlightedLineNumbers.has(this.lineNumberFor(index));
+    },
+    isUserHighlighted(index) {
+      return this.highlightSet.has(this.lineNumberFor(index));
     },
     // Returns the line number for the line at the given index in `content`.
     lineNumberFor(index) {
@@ -237,6 +238,15 @@ export default {
   }
 }
 
+.user-highlighted {
+  background: var(--user-line-highlight, var(--color-user-code-line-highlight));
+  border-left: $highlighted-border-width solid var(--color-user-code-line-highlight-border);
+
+  .code-number {
+    padding-left: $code-number-padding-left - $highlighted-border-width;
+  }
+}
+
 pre {
   padding: $code-listing-with-numbers-padding;
   display: flex;

src/components/Tutorial/CodeTheme.vue

@@ -84,6 +84,7 @@ export default {
         '--text': codeColors.text,
         '--background': codeColors.background,
         '--line-highlight': codeColors.lineHighlight,
+        '--user-line-highlight': codeColors.userLineHighlight,
         '--url': codeColors.commentURL,
         '--syntax-comment': codeColors.comment,
         '--syntax-quote': codeColors.comment,

src/styles/core/colors/_dark.scss

@@ -37,6 +37,7 @@
   --color-badge-default: var(--color-badge-dark-default);
   --color-button-background-active: #{dark-color(fill-blue)};
   --color-code-line-highlight: #{change-color(dark-color(figure-blue), $alpha: 0.08)};
+  --color-user-code-line-highlight: #{change-color(dark-color(figure-orange), $alpha: 0.32)};
   --color-dropdown-background: var(--color-dropdown-dark-background);
   --color-dropdown-border: var(--color-dropdown-dark-border);
   --color-dropdown-option-text: var(--color-dropdown-dark-option-text);

src/styles/core/colors/_light.scss

@@ -77,6 +77,8 @@
   --color-code-collapsible-text: var(--color-figure-gray-secondary-alt);
   --color-code-line-highlight: #{change-color(light-color(figure-blue), $alpha: 0.08)};
   --color-code-line-highlight-border: var(--color-figure-blue);
+  --color-user-code-line-highlight: #{change-color(light-color(figure-orange), $alpha: 0.32)};
+  --color-user-code-line-highlight-border: var(--color-figure-orange);
   --color-code-plain: var(--color-figure-gray);
   --color-dropdown-background: #{transparentize(light-color(fill), 0.2)};
   --color-dropdown-border: #{light-color(fill-gray)};