0

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

4
  • When you edit the article again does it display correctly?
    – Craig
    Jun 11, 2014 at 2:04
  • Yes - If I go back in and edit the article it displays as expected.
    – Lembasts
    Jun 11, 2014 at 5:33
  • Ok, so it's not JCE or Joomla's text filters stripping it - so that means it could be CSS or Easyblog or any system extensions — do you have a link showing the problem?
    – Craig
    Jun 11, 2014 at 5:52
  • @cppl This is how it appears in my blog: zemdegs.com.au/blog/hilitetest
    – Lembasts
    Jun 11, 2014 at 23:43

2 Answers 2

2

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.

2
  • Thanks so much for that and for teaching me about "inspect element". I can now do my own troubleshooting!
    – Lembasts
    Jun 12, 2014 at 2:03
  • No probs, I'm glad it's sorted :D
    – Craig
    Jun 12, 2014 at 2:08
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.