Text overflow out of code block

support
1

I have a code block like this

```sh
$ vagrant
/usr/lib/ruby/3.3.0/rubygems/specification.rb:2245:in `raise_if_conflicts': Unable to activate vagrant_cloud-3.1.1, because rexml-3.3.2 conflicts with rexml (~> 3.2.5) (Gem::ConflictError)
        from /usr/lib/ruby/3.3.0/rubygems/specification.rb:1383:in `activate'
        from /usr/lib/ruby/3.3.0/rubygems/core_ext/kernel_gem.rb:62:in `block in gem'
        from /usr/lib/ruby/3.3.0/rubygems/core_ext/kernel_gem.rb:62:in `synchronize'
        from /usr/lib/ruby/3.3.0/rubygems/core_ext/kernel_gem.rb:62:in `gem'
        from /opt/vagrant/embedded/gems/gems/vagrant-2.4.2/bin/vagrant:17:in `block in <main>'
        from /opt/vagrant/embedded/gems/gems/vagrant-2.4.2/bin/vagrant:16:in `each'
        from /opt/vagrant/embedded/gems/gems/vagrant-2.4.2/bin/vagrant:16:in `<main>'
```

See here

But on the main page, the text overflow the box

image

Adding a CSS entry fixes it

code, kbd, pre, samp {
  overflow: auto;
}

As a workaround, I added a code-overflow css class but

  1. I have to add the class to very code block ` ``sh {class="code-overflow"}
  2. I had to duplicate the layout/partials/head.html from the theme to load the custom css
  3. The class is applied to the <div> instead of the <code>

The version: hugo env
hugo v0.139.2+extended linux/amd64 BuildDate=unknown
GOOS=“linux”
GOARCH=“amd64”
GOVERSION=“go1.23.3”
github_com/sass/libsass=“3.6.6”
github_com/webmproject/libwebp=“v1.3.2”

2

If you are asking how to override or add CSS to your theme’s styles, you need to read your theme’s documentation or contact the theme author.

3

You might find this article helpful.

1 Like
4

Thanks