CODEWITHSUNDEEP
javascriptsyntaxhighlighter
rightclick
rightclick

Reputation: 43

SyntaxHighlighter.highlight() does not cause syntax highlighting on modified content within pre

This is my situation, I have a pre tag which I populate with content to be highlighted, when I populate the pre tag with content on the page load it works, highlighting and all. However if after the page has loaded I update the content in the pre tag and try to highlight the content again, nothing happens. I have tried all of the recommendations from the other stackoverflow answers on this topic and none work. I have poured over the source code, debugged it (without much progress), and I am just having a hard time with this getting no where.

Javascript:

var src = "\/*\n\tsome source\n\ttesting SyntaxHighlighter\n*\/\n\nfunction arrr()\n{\n\tvar ru = \"apirate?\";\n\treturn \"sure\";\n}\n\nvar calculatron = function(_a, _b)\n{\n\treturn (_a + _b);\n}\n\/\/ ...";
var $ = function (_id) { return document.getElementById(_id); }
function add_content()
{
    // re-adding the pre tags when updating content fixes a known issue.
    $('code').innerHTML = "<pre>" + src + "</pre>";

    <!-- does not work when updating content -->
    SyntaxHighlighter.highlight();
}

HTML:

<pre id="code" class="brush: js;"></pre>

<input type="submit" value=" submit " onclick="add_content()" />

<!-- works for onload -->
<script type="text/javascript">
SyntaxHighlighter.all();
</script>

Any ideas?

Upvotes: 2

Views: 799

Answers (1)

rightclick
rightclick

Reputation: 43

Ugh, finally I realize what my problem is. Why does this always happen; right after going out my way to ask for help then an hour later I figure it out?

Anyway, my 'pre' element fix in the following line was the issue in my case;

// re-adding the pre tags when updating content fixes a known issue.
$('code').innerHTML = "<pre>" + src + "</pre>";

It was missing a critical component.

Corrected:

// re-adding the pre tags when updating content fixes a known issue.
$('code').innerHTML = "<pre class=\"brush: js;\">" + src + "</pre>";

Upvotes: 1

Related Questions