Joomla, Easyblog and format irregularities

Question

I have a joomla 3 site using the Easyblog add-in. I often have code snippets in my blog and have found that "hilite.me" is my favourite html generator for code. However, when I insert this code into my blog, either joomla or easyblog is mangling it so bad it is unrecognisable.

Take for example this bit of code - Codepen - Hilite me html

After inserting this code into the JCE editor in easyblog, it looks fine. However, when looking at the blog post on my website, all line breaks are removed and so are all tabs/whitespace for indenting. As you can see in the "hilite me" generated html, it is wrapped in the "pre" tag. My limited understanding of html tells me that you must honour all line breaks and white space within a pre. It seems to me that some transformation is happening behind the scenes which "corrupts" the "pre" tag intention. Does anyone know what might be happening and more importantly how I can get joomla/easyblog to respect my inserted html asis please?

Thanks

David

Answer 1

Comparing the HTML in Codepen and just the HTML on the page you linked to (shown below) in Codepen the both appear the same. So, it's not being altered (at least not in a way that damages the display) so that comes down to the CSS thats applied to it.

<!-- HTML generated using hilite.me -->
<div style="background: #111111; overflow: auto; width: auto; border: solid grey; border-width: .1em .1em .1em .8em; padding: .2em .6em;">
<pre style="margin: 0; line-height: 125%;"><span style="color: #fb660a; font-weight: bold;">For</span> <span style="color: #ffffff;">i</span> <span style="color: #ffffff;">=</span> <span style="color: #0086f7; font-weight: bold;">1</span> <span style="color: #fb660a; font-weight: bold;">To</span> <span style="color: #0086f7; font-weight: bold;">10</span>
    <span style="color: #ffffff;">WScript.Echo</span> <span style="color: #ffffff;">i</span>
<span style="color: #fb660a; font-weight: bold;">Next</span>
</pre>
</div>

Using "Inspect Element" on the test page you can trace back the CSS and see that the <pre> block has CSS it's inheriting from templates/j51_nocturne/css/typo.css that appears to be the main culprit:

p.note, p.pin, p.clip, p.down, pre, .code {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.08);
    border-style: solid;
    border-width: 1px 1px 1px 5px;
}
pre, .code {
    margin: 10px 0;
    clear:both;
}
pre, code {
    font: italic 100% monospace;
    padding: 10px;
    white-space: normal !important;
}

You will need to override or remove that CSS to fix the problem.

Answer 2

I suspect JCE is stripping things. Try turning off the editor entirely. With JCE you can simply click the little toggle text link above the editor and put your code in the box (don't use JCE's code mode). Or turn of the editor completely for your user in the global config and try that.

If THAT doesn't work, try Nonumber Sourcer and see if that works. It lets you put raw code in without it being mangled or stripped

http://www.nonumber.nl/extensions/sourcerer