如何在語法高亮中創建動態內容

Question

我想根據用戶輸入顯示屬性名稱，並將其顯示在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 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>

這將輸出純文本。 好像SyntaxHighlighter從未運行過。 我懷疑問題與以下事實有關：呈現頁面后<pre>不存在。 但是，更新

SyntaxHighlighter.config.tagName = "label";

以及pre-label也不起作用。

Answer 1

要使其正常運行，必須克服許多問題。 我覺得最好用代碼解釋一下：

JS

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

標記

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