我有SyntaxHighlighter(alexgorbatchev.com/SyntaxHighlighter)
<div class="question-text">
<pre width="300px" class="brush: xml">
<?= //php generated text ?>
</pre>
</div>
当我写下面的代码时,它完全有效:
$(document).ready(function(){
SyntaxHighlighter.all();
});
但是有一个问题:当用户从select
中选择时,我想更改画笔动态:
<div class="nameselect">
<select name="language">
<option value=" ">Text</option>
<option value="cpp">C++</option>
<option value="csharp">C#</option>
<option value="css">CSS</option>
<option value="java">Java</option>
<option value="js">JScript</option>
<option value="php">PHP</option>
<option value="py">Python</option>
<option value="ruby">Ruby</option>
<option value="sql">Sql</option>
<option value="xml">HTML/XML</option>
</select>
</div>
我写了一些代码:
$(document).on('change', 'select[name=language]', function () {
var code = $(this).parent().parent().find("pre");
code.addClass('brush: ' + $(this).val());
SyntaxHighlighter.all();
});
但它没有用。
实际上我发现这个库完全改变了我的<pre>
标签。
有什么建议吗?
更改<pre class="brush: xml">
的值<body>HTML's here</body>
如下所示:
<div>
<div id="highlighter_860958" class="syntaxhighlighter xml">
<div class="toolbar">
<span>
<a href="#" class="toolbar_item command_help help">?</a>
</span>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="gutter">
<div class="line number1 index0 alt2">1</div>
</td>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
<code class="xml plain"><</code>
<code class="xml keyword">body</code>
<code class="xml plain">>HTML's here </</code>
<code class="xml keyword">body</code>
<code class="xml plain">></code>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>