2.0 Update Broke CSS for Crayon Syntax Highlighter

nraboy · October 30, 2015, 9:37pm

Hi,

I updated to version 2.0 and my Crayon Syntax Highlighter plugin seems to have broken. I know it is not entirely Colorlib’s fault by breaking it as I see the following item in the issue tracker:

github.com/aramk/crayon-syntax-highlighter

Highlighter too wide if max-width set on containing element

opened 08:48PM - 16 Apr 15 UTC

gthvidsten

If the Highlighter is inside an element that has a max-width CSS setting, and th…e element is smaller than the maxwidth, and the highlighter contains a code line that is wider than the element, the highlighter does not display a scrollbar and instead makes itself wider than the containing element forcing the element to become wider as well. If the containing element is as wide as the browser window the effect is that the containing element then becomes wider than the browser window and unwanted horizontal scrolling is introduced. **Example:** ``` <div style="width:auto; max-width:600px"> <crayon syntax highlighter> </div> ``` If this is displayed in a browser that is 500 pixels wide you would expect the DIV to be 500 pixels wide, but if the highlighter contains a very long code line it makes the containing DIV wider than the browser.

Basically, if my source code that I’m displaying on the screen is too long, the width of the page will increase with it. If the source is within the boundaries of the width, all is perfect.

Anything off the top of your head that would have caused this?

I’m no CSS wizard, but I think it would be nice if page elements could not run off the screen.

Thanks,

movin · November 3, 2015, 7:11am

Hi @nraboy,

I hope you are well today and thanks for posting here.

Could you please share the page URL from your site where it’s not displaying correctly so that i can troubleshoot it?

Kind Regards,
Movin

nraboy · November 3, 2015, 2:25pm

Hi @Movin,

Before looking at my URL, please note that I’ve implemented a custom CSS hack. Although I’m not entirely pleased with the solution I came up with, it works in the temporary.

An example URL on my blog:

https://blog.nraboy.com/2014/07/using-oauth-2-0-service-ionicframework/

If you open the inspector (Firebug, etc.), find the following tag:

#content > div.container.main-content-area > div > div.main-content-inner.col-sm-12.col-md-8

The hack I did was to calculate my own max-width using media queries. If you strip out all the max-width properties from the seven or so media queries you’ll see the content know flows off the screen.

I narrowed this down to the Crayon Syntax Highlighter. For any line of code that is too long for the screen, it will stretch the screen, but remain invisible. Not an ideal thing.

The ideal solution here would be to not force add a max-width calculated from each of my media queries. Otherwise I think I’ll have to add a ton of media queries for pixel perfect displaying. The weird thing is, before 2.0 of Sparkling Theme, the syntax highlighter worked fine. The syntax highlighter hasn’t been updated in more than six months.

Let me know what you think.

Thanks,

movin · November 4, 2015, 5:56am

Hi @nraboy,

I could confirm the issue on your site.

Could you please tell me the version of previous Sparkling theme that was using fine for you so that i can compare the difference between these versions to resolve the issue?

Regards,
Movin

movin · November 4, 2015, 6:00am

Hi @nraboy,

I could confirm the issue on your site.

Could you please tell me the version of previous Sparkling theme that was using fine for you so that i can compare the difference between these versions to resolve the issue?

Regards,
Movin

nraboy · November 4, 2015, 3:59pm

Hey @Movin,

I’m glad to hear I’m not crazy

I believe I was using 1.9.1 of Sparkling Theme. My CSS skills are pretty weak, otherwise I’d try to help you out.

Thanks for taking a look!

movin · November 6, 2015, 5:06am

Hi @nraboy,

It seems the issue with the Crayon Syntax Highlighter plugin CSS so to resolve it could you please remove any CSS fixes that you have used on your site to resolve it and try adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

div.crayon-syntax .crayon-pre,
div.crayon-syntax pre {
  white-space: initial;
}

Best Regards,
Movin

nraboy · November 6, 2015, 3:28pm

That was a worthy attempt, but it introduced a different problem when doing that. When making the change, it enabled a line-wrap for the syntax highlighter. When the line wrapped, it would increase the line number.

It shouldn’t line wrap in this case.