Question

这是我的情况，我有一个预标签，我填充了要突出显示的内容，当我填充预标记页面上的内容加载它工作，突出显示和所有。但是，如果在页面加载后我更新了pre标签中的内容并尝试再次突出显示该内容，则没有任何反应。我已经尝试了关于此主题的其他stackoverflow答案的所有建议，但没有任何工作。我已经倾倒了源代码，对其进行了调试（没有太大进展），而我只是很难在这里找不到。

使用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>

有什么想法吗？

Answer 1

呃，最后我意识到我的问题是什么。为什么总会发生这种情况;在我出去寻求帮助之后，一小时后我就明白了吗？

无论如何，我的'pre'元素修复在以下行中就是我的问题;

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

缺少一个关键组件。

修正：

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

SyntaxHighlighter.highlight（）不会导致pre中修改内容的语法突出显示

1 个答案: