Wowchemy-hugo-modules: Prevent wrapping in code blocks

[lcolladotor]

Hi,

After reading http://seankross.com/notes/css-for-code/ I updated my fork of hugo-academic with a couple minor edits (see https://github.com/lcolladotor/hugo-academic/commit/1e2380802dea7a5f8711df796be12a16a86a9aca) to fix the code chunks in phones.

Just thought that you might be interested in changing this.

Best,
Leo

[gcushen]

Hi Leo, please can you clarify what the problem is that you have fixed in your fork?

[lcolladotor]

Hi George,

Sean Kross @seankross wrote a blog post that details an issue that affects many blogs, including hugo-academic. In his blog post http://seankross.com/notes/css-for-code/ he shows that long lines in code chunks are displayed in a way that makes it hard to read. See the image below taken from his blog:

In https://github.com/lcolladotor/hugo-academic/commit/1e2380802dea7a5f8711df796be12a16a86a9aca I implemented the changes Sean suggests for fixing this issue by modifying the css for code elements. The long lines are now scrollable in both mobile and desktop/laptop versions.

Best,
Leo

[gcushen]

Thank you for clarifying the problem! I agree that we should favor horizontal scrolling over wrapping for long lines in code blocks. This is mainly for two reasons:

1. A wrapped line of code may be interpreted as two separate lines unless all code lines are numbered.
2. Some languages are sensitive to new lines and white space - if a user manually copies wrapped code, the code may fail to run correctly

The solution is actually already implemented in Academic, it is just being effectively overridden by the default style defined by Bootstrap. I'll update the Academic code style to prevent Bootstrap overriding it.

[lcolladotor]

Awesome George! I didn't know that the solution was already implemented (or if I did, I forgot about). Thanks again for creating and maintaining hugo-academic ^^

[lcolladotor]

Hi again George,

I'm re-configuring my blog to use git submodule instead of the fork I had made, to make it easier to keep things updated. However, I'm having trouble overriding the css.

In my config.toml I have:

custom_css = ["override.css"]

Then I have the file at static/css/override.css where the css file is my modified version of academic.css (this file https://github.com/lcolladotor/hugo-academic/blob/1e2380802dea7a5f8711df796be12a16a86a9aca/layouts/partials/css/academic.css renamed to override.css).

I got here following the instructions at https://sourcethemes.com/academic/docs/customization/ Am I missing something?

Best,
Leo

[lcolladotor]

Awesome, thanks for fixing this @gcushen! ^^