feat: render highlight context and colored highlight text

src/components/HighlightItem.tsx

@@ -509,6 +509,38 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
     }
   }
   
+  const renderHighlightText = () => {
+    const { content, context } = highlight
+    
+    if (context && context.length > 0) {
+      const index = context.indexOf(content)
+      
+      if (index >= 0) {
+        const before = context.slice(0, index)
+        const after = context.slice(index + content.length)
+        
+        return (
+          <>
+            {before}
+            <span className="highlight-core">{content}</span>
+            {after}
+          </>
+        )
+      }
+      
+      // Fallback: show context and the core highlight separately
+      return (
+        <>
+          <span className="highlight-context-prefix">{context}</span>
+          <br />
+          <span className="highlight-core">{content}</span>
+        </>
+      )
+    }
+    
+    return <span className="highlight-core">{content}</span>
+  }
+  
   return (
     <>
     <div 
@@ -588,7 +620,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
           style={{ cursor: 'pointer' }}
           title="Go to quote in article"
         >
-          {highlight.content}
+          {renderHighlightText()}
         </blockquote>
         
         {showCitation && (

src/styles/layout/highlights.css

@@ -150,6 +150,26 @@
 
 .highlight-content { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 2.25rem 0.75rem 2.5rem; }
 .highlight-text { margin: 0; padding: 0 0 0 1.25rem; font-style: italic; color: var(--color-text); line-height: 1.6; border-left: none; font-size: 0.95rem; }
+.highlight-core {
+  background: color-mix(in srgb, var(--highlight-color, #fde047) 35%, transparent);
+  padding: 0 0.1em;
+  border-radius: 3px;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+.highlight-item.level-mine .highlight-core {
+  background: color-mix(in srgb, var(--highlight-color-mine, #fde047) 40%, transparent);
+}
+.highlight-item.level-friends .highlight-core {
+  background: color-mix(in srgb, var(--highlight-color-friends, #f97316) 35%, transparent);
+}
+.highlight-item.level-nostrverse .highlight-core {
+  background: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 35%, transparent);
+}
+.highlight-context-prefix {
+  display: block;
+  margin-bottom: 0.35rem;
+}
 .highlight-citation { margin-left: 1.25rem; font-size: 0.8rem; color: var(--color-text-secondary); font-style: normal; padding-top: 0.25rem; }
 .highlight-comment { margin-top: 0.5rem; padding: 0.75rem; border-radius: 4px; font-size: 0.875rem; color: var(--color-text); line-height: 1.5; display: flex; gap: 0.5rem; align-items: flex-start; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; min-width: 0; }
 .highlight-comment-icon { flex-shrink: 0; margin-top: 0.125rem; }