diff --git a/packages/web/lib/highlights/highlightGenerator.ts b/packages/web/lib/highlights/highlightGenerator.ts
index a62c02016..c852d67af 100644
--- a/packages/web/lib/highlights/highlightGenerator.ts
+++ b/packages/web/lib/highlights/highlightGenerator.ts
@@ -147,7 +147,7 @@ export function makeHighlightNodeAttributes(
         }
 
         if (customColor) {
-          newHighlightSpan.className = `${newHighlightSpan.className} highlight_${customColor}`
+          newHighlightSpan.className = `${newHighlightSpan.className} highlight__${customColor}`
         }
 
         newHighlightSpan.setAttribute(highlightIdAttribute, id)
diff --git a/packages/web/styles/articleInnerStyling.css b/packages/web/styles/articleInnerStyling.css
index 67249319c..bde83edb0 100644
--- a/packages/web/styles/articleInnerStyling.css
+++ b/packages/web/styles/articleInnerStyling.css
@@ -20,22 +20,22 @@
 }
 
 
-.highlight_green {
+.highlight__green {
   background-color: rgba(var(--colors-highlightBackgroundGreen), var(--colors-highlightBackgroundAlpha));
   border-bottom: 2px solid rgba(var(--colors-highlightBackgroundGreen), var(--colors-highlightUnderlineAlpha));
 }
 
-.highlight_red {
+.highlight__red {
   background-color: rgba(var(--colors-highlightBackgroundRed), var(--colors-highlightBackgroundAlpha));
   border-bottom: 2px solid rgba(var(--colors-highlightBackgroundRed), var(--colors-highlightUnderlineAlpha));
 }
 
-.highlight_blue {
+.highlight__blue {
   background-color: rgba(var(--colors-highlightBackgroundBlue), var(--colors-highlightBackgroundAlpha));
   border-bottom: 2px solid rgba(var(--colors-highlightBackgroundBlue), var(--colors-highlightUnderlineAlpha));
 }
 
-.highlight_yellow {
+.highlight__yellow {
   background-color: rgba(var(--colors-highlightBackgroundYellow), var(--colors-highlightBackgroundAlpha));
   border-bottom: 2px solid rgba(var(--colors-highlightBackgroundYellow), var(--colors-highlightUnderlineAlpha));
 }