突出显示js的语法

时间:2015-09-25 14:49:29

标签: javascript jquery syntax-highlighting

我使用的是什么以及我做了什么

我有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">&lt;</code>
                <code class="xml keyword">body</code>
                <code class="xml plain">&gt;HTML's here &lt;/</code>
                <code class="xml keyword">body</code>
                <code class="xml plain">&gt;</code>
              </div>
            </div>
        </td>
      </tr>
     </tbody>
     </table>
   </div>
  </div>

0 个答案:

没有答案