Highlight_string not responsive

I have a site that displays code and I use highlight_string and highlight_file but I have a couple of problems. On long lines it overflows the div and it is not responsive.

Does anyone have an idea how to fix these problems or should I go for one of the javascript ( I assume that is how it works ) code boxes?

I suppose the code box will probably look a bit neater as the highlight string looks very dated as is my website!

Typically I can not find any of the code box examples now and I had forgotten about GeSHi.

From memory I did not want to use GeSHi before but there may have been a reason other than having some extra code rather than a built in php function. I will have to take a look at it again.

Well I have had a look at a few code highlighters this evening and only one of them is responsive. When I say responsive in this case the text stays the same size but the lines wrap.

They all have different themes and there may be a theme that is responsive but I do not want to check them every one. I suppose I could modify the font size from pixels to em in a theme which I will have to look into.

Not the “code boxes” I was thinking about but will do the job.

The last time I used PHP’s “highlight” the HTML it produced was a lot of span tags.

One problem I can see is that code is usually displayed as “pre” and therefore by nature not responsive.

Assuming that CSS could be used on the generated HTML to wrap lines, how to signify what is meant to be a new line of code vs. a continuation of the previous line?

Sitepoint books that inherently have a page width limit use something like ↳ to signify a continuation that should be a single line of code.

The only thing that I think could help here is to use line numbering similat to how GitHub does it.

Some good points there @Mittineagueand it is interesting that most of the JavaScript code highlighters use the pre tag with a class to start and end the highlighted area.

With the way I write my examples I can split it up using conjugate which works quite well but some lines can not be split else they will not work.

I was more interested in changing the font size rather than word wrapping and some of the code highlighters use themes so that is the next thing to check. I was hoping I could do that with the inbuilt php highlighter.

The code output from Google prettyfier is a bit strange, but is a lot shorted than then the code output from the php function:

<div class="code"><code class="prettyprint"<code><span style="color: #000000">

<br />$cmd&nbsp;=&nbsp;"$input&nbsp;-adaptive-blur&nbsp;0x2&nbsp;";&nbsp;
<br />exec("convert&nbsp;$cmd&nbsp;adaptive-blur.jpg");
<br />&nbsp;</span>
</code>

Have you tried adding white-space pre-wrap and pre-line to your css file?

Thanks for the tip @John_Betong. I have settled on Google prettyfier with a pre-wrap in the css. Google uses a pre or code tag for its highlighter anyway.

I can also resize the font within the highlighter code as well if required.

It would have been nice if I could have done something like @Mittineague suggested with a symbol to let people know the code was wrapped but hopefully they will be able to sort it out. I wonder how many people code on their phone anyway!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.