javascript - How to create dynamic content within syntaxhighlighter -

I want to display a property name based on the user input and want to display it inside the syntax highlighter. The post says that it should be easy.

JS

  $ ('# inputText'). Key (function () {var outputValue = $ ('# CodeTemplate') .HTML (); // codeTemplate $ ('# codeContent') .html (outputValue); output of code template; Paste the contents of the content, finalOutputValue = $ ('# CodeContent'). HTML code; Collect the contents of the code and insert it in sample label $ ('. Popover #sample') .html (finalOutputValue); SyntaxHighlighter.highlight ();}); SyntaxHighlighter.all ();   
  Markup   
  & lt; Div style = "display: none;" & Gt; & Lt; Label class = "propertyName" & gt; & Lt; / Labels & gt; & Lt; Label id = "codeTemplate" & gt; & Lt; Label class = "propertyName" & gt; & Lt; / Labels & gt; // Use dynamic objects and default sections (app settings): var real = new configuration (). Receive ("Hilted. Property"); // more code & lt; / Label & gt; & Lt; Pre id = "codeContent" class = "brush: csharp;" & Gt; & Lt; / Pre & gt; & Lt; / Div & gt; & Lt; Div id = "popover-content" style = "display: none" & gt; & Lt; Label id = "sample" & gt; & Lt; / Labels & gt; & Lt; / Div & gt;   
 This output plain text as if the syntax highlighter never runs. I suspect the issue has to do with the fact that after the page is submitted  & lt; Pre & gt;  is not present, however,  
  SyntaxHighlighter.config.tagName = "label";   
 with labels did not work either in the past either.   
 
 
 To overcome this, many problems were to be removed. I think that with this code the most Good explained:  
  JS   
  & lt; Script & gt; $ (Function () {$ ('' key ''). Pop ({html: true, trigger: 'focus', position:' top ', content: function () {loadCodeData (true); console.log (' Content update '); var popover = $ (' # popover-content '); Return pops up html (); // data into popover-content (a new division with matching class name for ID)} }}; $ ('# Key') keyboard (function () {loadCodeData ();}); Load Loaded Data (Load Origin) {var userData = $ ('# key'). Val (); var codeTemplate = $ (' # CodeTemplate $ ('$ $ PropertyNameToken', userData); $ ('# codeContent') .HTML (tokenizedValue); $ ('# codeContent'). ('$$ propertyNameToken'). 'Class', 'Brush: CSRAPP'), //! Important: To add a class again, Syntax Highlighter will again process the device. Syntax Highlighter. Highlight (); var Syntax Highlighted Result = $ ('#CodeCommunications') .html (); / / Collect the contents of the code content and insert it in Div-VSP popup; if (loaded orynal) Popup = $ ('#PopOverContent'); / / Popover updates the content generated, so good for us By class we have to update popover {popover = $ ('. Popover-content '); // Otherwise we need to update the dynamically generated popup. } Popover.html (Syntax Highlighted Result); } SyntaxHighlighter.config.tagName = 'div'; // Override the default prefix because the pre customer gets converted to another tag SyntaxHighlighter.all (); }); & Lt; / Script & gt;   
  Markup   
  & lt; Div style = "display: none;" & Gt; & Lt; Label id = "codeTemplate" & gt; // Dynamic item and default section (app settings) are not used: var real = new configuration (). ("$$ propertyNameToken"); // Use a type argument: int = actual new configuration (). & Amp; Lt; Int & gt; ("Asdf"); // and then specify a section: var real = new configuration ("sectionname"). (Get "exam"); // Dynamic object and default section: var real = new configuration (). NumberOfRetries (); // Using a type argument: int real = new configuration () NumberOfRetries & amp; Lt; Int & gt; (); // and then specify a section: var real = new configuration ("SectionName"). NumberOfRetries (); & Lt; / Labels & gt; & Lt; Div id = "codecontent" class = "brush: csharp;" & Gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "popover-content" style = "display: none" & gt; & Lt; / Div & gt;