diff --git a/package.json b/package.json
index ed81d8a3b1c..59d0734d5c0 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "@craco/craco": "<7",
     "@formatjs/intl-pluralrules": "^5.2.3",
     "@openstax/event-capture-client": "^2.0.2",
-    "@openstax/highlighter": "https://github.com/openstax/highlighter#v1.14.3",
+    "@openstax/highlighter": "https://github.com/openstax/highlighter#use-mark-dist-branch",
     "@openstax/open-search-client": "0.1.0-build.7",
     "@openstax/ts-utils": "1.6.0",
     "@openstax/ui-components": "https://github.com/openstax/ui-components#1.3.4-post2",
diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
index 675eca2ee71..8adfd095c3b 100644
--- a/src/app/content/__snapshots__/routes.spec.tsx.snap
+++ b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -583,10 +583,6 @@ Array [
 @media screen {
   .c4 .highlight::before,
   .c4 .highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -594,6 +590,13 @@ Array [
     width: 1px;
   }
 
+  .c4 .highlight::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c4 .highlight[data-start-message]::before {
     content: attr(data-start-message);
   }
@@ -692,10 +695,6 @@ Array [
 
   .c4 .search-highlight::before,
   .c4 .search-highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -703,6 +702,13 @@ Array [
     width: 1px;
   }
 
+  .c4 .search-highlight::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c4 .search-highlight,
   .c4 .search-highlight .math {
     background-color: #ffea00;
diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
index f4305e4681d..9687cbe8aa7 100644
--- a/src/app/content/components/Page/PageContent.tsx
+++ b/src/app/content/components/Page/PageContent.tsx
@@ -23,17 +23,21 @@ export const contentTextStyle = css`
 // otherwise math elements won't have full height background color
 const SELF_AND_CHILD_MATH_SELECTOR = '&, & .math';
 
+// after would normally also have clips, but the note indicator
+// corner color needs not to be hidden
 const hideBeforeAndAfter = `
   &::before,
   &::after {
-    clip-path: inset(100%);
-    clip: rect(1px, 1px, 1px, 1px);
     height: 1px;
     overflow: hidden;
     position: absolute;
     white-space: nowrap;
     width: 1px;
   }
+  &::before {
+    clip-path: inset(100%);
+    clip: rect(1px, 1px, 1px, 1px);
+  }
 `;
 
 export default styled(MainContent)`
diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
index f31dce84344..4d53f26297b 100644
--- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap
+++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -2218,10 +2218,6 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c78 .highlight::before,
   .c78 .highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -2229,6 +2225,13 @@ li[aria-label="Current Page"] .c60 {
     width: 1px;
   }
 
+  .c78 .highlight::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c78 .highlight[data-start-message]::before {
     content: attr(data-start-message);
   }
@@ -2327,10 +2330,6 @@ li[aria-label="Current Page"] .c60 {
 
   .c78 .search-highlight::before,
   .c78 .search-highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -2338,6 +2337,13 @@ li[aria-label="Current Page"] .c60 {
     width: 1px;
   }
 
+  .c78 .search-highlight::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c78 .search-highlight,
   .c78 .search-highlight .math {
     background-color: #ffea00;
@@ -6813,10 +6819,6 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c78 .highlight::before,
   .c78 .highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -6824,6 +6826,13 @@ li[aria-label="Current Page"] .c60 {
     width: 1px;
   }
 
+  .c78 .highlight::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c78 .highlight[data-start-message]::before {
     content: attr(data-start-message);
   }
@@ -6922,10 +6931,6 @@ li[aria-label="Current Page"] .c60 {
 
   .c78 .search-highlight::before,
   .c78 .search-highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -6933,6 +6938,13 @@ li[aria-label="Current Page"] .c60 {
     width: 1px;
   }
 
+  .c78 .search-highlight::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c78 .search-highlight,
   .c78 .search-highlight .math {
     background-color: #ffea00;
diff --git a/src/app/content/highlights/components/Note.tsx b/src/app/content/highlights/components/Note.tsx
index 1c9a66e9848..2a59d8a26ba 100644
--- a/src/app/content/highlights/components/Note.tsx
+++ b/src/app/content/highlights/components/Note.tsx
@@ -84,7 +84,7 @@ const Note = ({onChange, onFocus, note, textareaRef, edit = false}: Props) => {
   React.useEffect(setTextAreaHeight, [note, setTextAreaHeight]);
 
   return (
-    <WrapperLabel for='note-textarea'>
+    <WrapperLabel htmlFor='note-textarea'>
       <TextArea
         id='note-textarea'
         ref={textareaRef}
diff --git a/src/app/content/highlights/components/__snapshots__/Note.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/Note.spec.tsx.snap
index ff16bfe4444..21f9fb1ae5d 100644
--- a/src/app/content/highlights/components/__snapshots__/Note.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/Note.spec.tsx.snap
@@ -50,7 +50,7 @@ exports[`Note matches snapshot 1`] = `
 
 <label
   className="c0"
-  for="note-textarea"
+  htmlFor="note-textarea"
 >
   <textarea
     className="c1"
diff --git a/yarn.lock b/yarn.lock
index 86174788ea4..7e466d84c66 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5083,9 +5083,9 @@
   dependencies:
     uuid "^8.3.2"
 
-"@openstax/highlighter@https://github.com/openstax/highlighter#v1.14.3":
+"@openstax/highlighter@https://github.com/openstax/highlighter#use-mark-dist-branch":
   version "1.14.0"
-  resolved "https://github.com/openstax/highlighter#fd87f0b8c40cc1bbfc1fa539adadf3cb1b6f65b5"
+  resolved "https://github.com/openstax/highlighter#4dedeb4943139ce1050f3c2bf53c6b335eeb18db"
   dependencies:
     "@openstax/highlights-client" "0.2.3"
     change-case "^4.0.0"