styling of chroma

Author: hlubek

dashboard/views/event-details.templ

@@ -14,12 +14,12 @@ import (
 // BodyContent renders a truncated body with a maximum length and syntax highlighting
 templ BodyContent(content string, contentType string, maxLength int) {
     if len(content) > maxLength {
-        <div class="bg-neutral-50 p-3 rounded border border-neutral-200 font-mono text-sm">
+        <div class="bg p-3 rounded border border-neutral-200 font-mono text-sm">
             <pre class="whitespace-pre-wrap break-words">{ content[:maxLength] }...</pre>
         </div>
     } else {
-        <div class="bg-neutral-50 p-3 rounded border border-neutral-200 font-mono text-sm">
-            @templ.Raw(highlightContent(content, contentType))
+        <div class="bg p-3 rounded border border-neutral-200 font-mono text-sm">
+            @highlightContent(content, contentType)
         </div>
     }
 }

dashboard/views/event-details_templ.go

@@ -1,7 +1,6 @@
 package views
 
 import (
-	"bytes"
 	"context"
 	"fmt"
 	"io"
@@ -36,32 +35,29 @@ func formatDurationSince(t time.Time) string {
 }
 
 // highlightContent applies syntax highlighting to the content
-func highlightContent(content string, contentType string) string {
-	// Split content type before ;
-	contentType = strings.Split(contentType, ";")[0]
+func highlightContent(content string, contentType string) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
+		// Split content type before ;
+		contentType = strings.Split(contentType, ";")[0]
 
-	lexer := lexers.MatchMimeType(contentType)
-	if lexer == nil {
-		fmt.Printf("DEBUG: mime type not matched: %q\n", contentType)
-		lexer = lexers.Fallback
-	} else {
-		fmt.Printf("DEBUG: mime type matched lexer: %q\n", lexer.Config().Name)
-	}
+		lexer := lexers.MatchMimeType(contentType)
+		if lexer == nil {
+			fmt.Printf("DEBUG: mime type not matched: %q\n", contentType)
+			lexer = lexers.Fallback
+		} else {
+			fmt.Printf("DEBUG: mime type matched lexer: %q\n", lexer.Config().Name)
+		}
 
-	formatter, style := chromaFormatterAndStyle()
+		formatter, style := chromaFormatterAndStyle()
 
-	iterator, err := lexer.Tokenise(nil, content)
-	if err != nil {
-		return content
-	}
+		iterator, err := lexer.Tokenise(nil, content)
+		if err != nil {
+			return err
+		}
 
-	var buf bytes.Buffer
-	err = formatter.Format(&buf, style, iterator)
-	if err != nil {
-		return content
-	}
-
-	return buf.String()
+		err = formatter.Format(w, style, iterator)
+		return err
+	})
 }
 
 func chromaFormatterAndStyle() (*html.Formatter, *chroma.Style) {
@@ -84,6 +80,8 @@ func chromaStyles() templ.Component {
 		_, _ = io.WriteString(w, "<style>")
 		formatter, style := chromaFormatterAndStyle()
 		err := formatter.WriteCSS(w, style)
+
+		_, _ = io.WriteString(w, ".chroma { white-space: pre-wrap; }\n")
 		_, _ = io.WriteString(w, "</style>")
 		return err
 	})