Javascript 如何在syntaxhighlighter中创建动态内容

我想根据用户输入显示属性名称，并在SyntaxHighlighter中显示此名称。波斯特说这应该很容易

JS

    $('#inputText').keyup(function () {
        var outputValue = $('#codeTemplate').html();//Take the output of codeTemplate
        $('#codeContent').html(outputValue);//Stick the contents of code template into codeContent
        
        var finalOutputValue = $('#codeContent').html();//Take the content of codeContent and insert it into the sample label
        $('.popover #sample').html(finalOutputValue);
                    
        SyntaxHighlighter.highlight();
    });               

    SyntaxHighlighter.all();

<div style="display: none;">
    <label id="codeTemplate">
        //Not using Dynamic object and default Section (appSettings):
        var actual = new Configuration().Get("$$propertyNameToken");

        //Using a type argument:
        int actual = new Configuration().Get&lt;int>("asdf");

        //And then specifying a Section:
        var actual = new Configuration("SectionName").Get("test");

        //Using the Dynamic Object and default Section:
        var actual = new Configuration().NumberOfRetries();

        //Using a type argument:
        int actual = new Configuration().NumberOfRetries&lt;int>();

        //And then specifying a Section:
        var actual = new Configuration("SectionName").NumberOfRetries(); 
    </label>            

    <div id="codeContent" class="brush: csharp;">

    </div>
</div>

<div id="popover-content" style="display: none">

</div>

标记

<div style="display: none;">
    <label class="propertyName"></label>
    <label id="codeTemplate">
        <label class="propertyName"></label>
        //Not using Dynamic object and default Section (appSettings):
        var actual = new Configuration().Get("Chained.Property.key");

        //more code
    </label>            

    <pre id="codeContent" class="brush: csharp;">
        
    </pre>
</div>

<div id="popover-content" style="display: none">
    <label id="sample">
        
    </label>
</div>

//不使用动态对象和默认部分（appSettings）：
var actual=new Configuration（）.Get（“Chained.Property.key”）；
//更多代码

这将输出纯文本。好像Highlighter从未运行过一样。我怀疑这个问题与页面呈现后

不存在这一事实有关。然而，更新

<script>        
    $(function () {        
        $('#Key').popover({
            html: true,
            trigger: 'focus',
            position: 'top',
            content: function () {
                loadCodeData(true);
                console.log('content updated');
                var popover = $('#popover-content');
                return popover.html();//inserts the data into .popover-content (a new div with matching class name for the id)
            }
        });       

        $('#Key').keyup(function () {
            loadCodeData();
        });

        function loadCodeData(loadOriginal) {
            var userData = $('#Key').val();
            var codeTemplate = $('#codeTemplate').html();
            var tokenizedValue = codeTemplate.toString().replace('$$propertyNameToken', userData);
            $('#codeContent').html(tokenizedValue);
            $('#codeContent').attr('class', 'brush: csharp');//!IMPORTANT: re-append the class so SyntaxHighlighter will process the div again

            SyntaxHighlighter.highlight();

            var syntaxHighlightedResult = $('#codeContent').html();//Take the content of codeContent and insert it into the div                   

            var popover;
            if(loadOriginal)
                popover = $('#popover-content');//popover.content performs the update of the generated class for us so well we need to do is update the popover itself
            else {
                popover = $('.popover-content');//otherwise we have to update the dynamically generated popup ourselves.
            }

            popover.html(syntaxHighlightedResult);
        }

        SyntaxHighlighter.config.tagName = 'div';//override the default pre because pre gets converted to another tag on the client.  
        SyntaxHighlighter.all();
    });
</script>

SyntaxHighlighter.config.tagName=“label”

加上pre-to-label也不起作用。
要使其发挥作用，必须克服许多问题。我觉得这最好用代码来解释：

JS

    $('#inputText').keyup(function () {
        var outputValue = $('#codeTemplate').html();//Take the output of codeTemplate
        $('#codeContent').html(outputValue);//Stick the contents of code template into codeContent
        
        var finalOutputValue = $('#codeContent').html();//Take the content of codeContent and insert it into the sample label
        $('.popover #sample').html(finalOutputValue);
                    
        SyntaxHighlighter.highlight();
    });               

    SyntaxHighlighter.all();

<div style="display: none;">
    <label id="codeTemplate">
        //Not using Dynamic object and default Section (appSettings):
        var actual = new Configuration().Get("$$propertyNameToken");

        //Using a type argument:
        int actual = new Configuration().Get&lt;int>("asdf");

        //And then specifying a Section:
        var actual = new Configuration("SectionName").Get("test");

        //Using the Dynamic Object and default Section:
        var actual = new Configuration().NumberOfRetries();

        //Using a type argument:
        int actual = new Configuration().NumberOfRetries&lt;int>();

        //And then specifying a Section:
        var actual = new Configuration("SectionName").NumberOfRetries(); 
    </label>            

    <div id="codeContent" class="brush: csharp;">

    </div>
</div>

<div id="popover-content" style="display: none">

</div>


$（函数（）{
$（“#键”）.popover({
是的，
触发器：“焦点”，
位置：'顶部'，
内容：功能（）{
loadCodeData（真）；
console.log（“内容更新”）；
var popover=$（“#popover内容”）；
return popover.html（）；//将数据插入到.popover内容中（一个新的div，其id具有匹配的类名）
}
});       
$（'#Key'）.keyup（函数（）{
loadCodeData（）；
});
函数loadCodeData（loadOriginal）{
var userData=$（'#Key'）.val（）；
var codemplate=$（'#codemplate'）.html（）；
var tokenizedValue=codemplate.toString（）.replace（“$$propertyNameToken”，userData）；
$（'#codeContent'）.html（tokenizedValue）；
$（“#codeContent”）.attr（'class'，'brush:csharp'）；/！重要提示：重新追加该类，以便SyntaxHighlighter将再次处理该div
SyntaxHighlighter.highlight（）；
var syntaxHighlightedResult=$（'#codeContent'）.html（）；//获取codeContent的内容并将其插入div
var popover；
如果（原始）
popover=$（'#popover content'）；//popover.content为我们执行生成类的更新，所以我们需要做的就是更新popover本身
否则{
popover=$（'.popover content'）；//否则我们必须自己更新动态生成的弹出窗口。
}
html（syntaxHighlightedResult）；
}
SyntaxHighlighter.config.tagName='div'；//重写默认的pre，因为pre会转换为客户端上的另一个标记。
SyntaxHighlighter.all（）；
});

标记

<div style="display: none;">
    <label class="propertyName"></label>
    <label id="codeTemplate">
        <label class="propertyName"></label>
        //Not using Dynamic object and default Section (appSettings):
        var actual = new Configuration().Get("Chained.Property.key");

        //more code
    </label>            

    <pre id="codeContent" class="brush: csharp;">
        
    </pre>
</div>

<div id="popover-content" style="display: none">
    <label id="sample">
        
    </label>
</div>


//不使用动态对象和默认部分（appSettings）：
var actual=new Configuration（）.Get（“$$propertyNameToken”）；
//使用类型参数：
int实际值=新配置（）.Getint>（“asdf”）；
//然后指定一个节：
var实际值=新配置（“SectionName”）。获取（“测试”）；
//使用“动态对象”和“默认”部分：
var actual=新配置（）.NumberOfRetries（）；
//使用类型参数：
int actual=新配置（）.NumberOfRetriesint>（）；
//然后指定一个节：
var actual=新配置（“SectionName”）.NumberOfRetries（）；
获取（“”）
？嵌套双引号？应该是
Get（“”）
？@gongzhitaa-这是一个很好的捕获，但是更改引号没有明显的影响。将
Get（“”）
更改为
Get（“”）
。下面是可以工作的JSFIDLE:。我只是不知道csharp语法，即字符串是否可以单引号引用。