The Great Code Block Mystery: A Tale of Rich Text Editors and CSS Detective Work

The Problem

Picture this: You're excited to share code snippets on your blog. You paste your beautifully indented Ruby code into your editor, hit save, and... everything's smashed against the left margin like it's afraid of whitespace. No indentation. No monospace font. Just a sad wall of text that looks nothing like code.

This was my reality until we went on a debugging adventure that taught me more about rich text editors than I ever expected.

First Attempt: The Wrong Editor Entirely

My first instinct was to check the CSS. The blog post styles had basic code formatting:

The problem? The pre tag was missing the crucial white-space: pre property that preserves indentation.

Easy fix, right? Add white-space: pre-wrap and we're done!

Not so fast.

Plot Twist: We're Not Even Using Trix

I started implementing Trix code block support - writing JavaScript to configure block attributes, adding toolbar buttons, the whole nine yards. Then came the moment of truth: checking the ActiveAdmin form.

Wait. The toolbar looks... different. And there's already a code block button (</>).

That's when we discovered the truth: We're using Quill Editor, not Trix.

The blog uses ActionText (which uses Trix) for rendering, but ActiveAdmin uses the activeadmin_quill_editor gem for editing. Two different editors, one confused developer.

The Real Culprit: Quill 2.x's Unique Structure

Here's where it gets interesting. Traditional rich text editors use the classic HTML approach:

But Quill 2.x does something different:

Each line becomes its own div. No pre tags. No code tags. Just divs all the way down.

So all our carefully crafted pre CSS was targeting elements that didn't exist!

The Solution: Target the Right Elements

Once we understood Quill's structure, the fix was straightforward:

We also added these styles to actiontext.css to ensure they work within the .trix-content wrapper that ActionText uses.

The Final Gotcha: Spaces vs. Tabs

With the CSS fixed, code blocks finally looked right - monospace font, gray background, rounded corners. Perfect!

Except the indentation still wasn't showing.

Why? Because Quill strips tabs when you paste code. The only way to get indentation is to manually type spaces using the spacebar.

Yes, really.

The Working Solution

Here's the workflow that actually works:

1. Click the </> code block button in the Quill toolbar
2. Either type your code manually (using spaces for indentation)
3. Or paste your code and manually re-add spacing with the spacebar
4. Save and your code will display with proper formatting

Not ideal for indentation, but the styling works!

Lessons Learned

1. Know your stack: We were using two different editors - Quill for editing in ActiveAdmin, Trix for rendering via ActionText. Understanding this separation was key.
2. Inspect the DOM: The HTML inspector revealed Quill's unique div-based structure. Always check what's actually being rendered before assuming CSS selectors.
3. Different tools, different quirks: Quill 2.x made architectural choices (divs instead of pre tags) that affect how you style c
4. ontent. What works for one editor won't work for another.
5. CSS specificity matters: We had to add styles in both blog_posts.scss (for the .blog-content wrapper) and actiontext.css (for the .trix-content wrapper) to ensure coverage.
6. The devil is in the whitespace: Sometimes the hardest bugs are about the characters you can't see - spaces, tabs, and newlines.

The Takeaway

What seemed like a simple CSS fix turned into a journey through the internals of rich text editors, ActionText rendering pipelines, and the subtle differences between Trix and Quill.

But now? Code blocks display properly with monospace fonts, gray backgrounds, rounded corners, and that clean aesthetic that makes code readable.

And I learned enough about rich text editors to last a lifetime.

Note: While we got code blocks displaying nicely, syntax highlighting (color-coded keywords and strings) is a feature for another day!