org2blog: get horizontal scrollbar on code examples?

org2blog: get horizontal scrollbar on code examples?

[Steinar Bang]

Does anyone know of a way to get horizontal scrollbars on code examples,
instead of line breaks?

I try to make code examples as horizontally compact, but sometimes
that's not enough, see e.g. some maven <dependency> elements here, and
the maven command line examples:
 https://steinar.bang.priv.no/2020/03/30/how-to-get-test-coverage-back-in-sonarcloud-maven-builds/

Re: org2blog: get horizontal scrollbar on code examples?

[Christian Moe]

Try adding

 .org-src-container .src { overflow: auto; white-space: nowrap }

to the CSS, e.g.:

  #+html_head_extra: <style>.org-src-container .src { overflow: auto; white-space: nowrap }</style>

Cheers,
Christian

Steinar Bang writes:

> Does anyone know of a way to get horizontal scrollbars on code examples,
> instead of line breaks?
>
> I try to make code examples as horizontally compact, but sometimes
> that's not enough, see e.g. some maven <dependency> elements here, and
> the maven command line examples:
>  https://steinar.bang.priv.no/2020/03/30/how-to-get-test-coverage-back-in-sonarcloud-maven-builds/

Re: org2blog: get horizontal scrollbar on code examples?

[Steinar Bang]

>>>>> Christian Moe <mail@christianmoe.com>:

> Try adding

>  .org-src-container .src { overflow: auto; white-space: nowrap }

> to the CSS, e.g.:

>   #+html_head_extra: <style>.org-src-container .src { overflow: auto; white-space: nowrap }</style>

Thanks for the tip, Christian!

The "#+html_head_extra" example didn't work, because the SOAP and/or
wordpress HTML parser, strips off everything it doesn't like.

But I have wordpress premium, so I have the possibiliy of adding CSS: https://wp.me/PEmnE-Bt

I tried adding:
 .org-src-container .src {
 	overflow: auto;
 	white-space: nowrap;
 }

and that gave me a scrollbar, but unfortunately everything is put on a
single line.

Removing "white-space: nowrap" gives me the line feeds back, but also
loses the horisontal scroll bar.

According to what google tells me
 	overflow: auto;
should be enough to get scrollbars...?

The pre element has
    white-space: pre-wrap;
    word-wrap: break-word;
are those the problem?

Hm... https://www.w3schools.com/cssref/pr_text_white-space.asp ?

Tried:
 .org-src-container .src {
 	overflow: auto;
 	white-space: pre;
 }

Yep! That worked!

Needed to get the same formatting on command line examples as well, so I
ended up with: 
 .org-src-container .src, .example {
 	overflow: auto;
  	white-space: pre;
 }

Thanks again!