?
Solved

Getting syntax highlighter to work - convert < to &lt; ?  (jsfiddle included to see problem)

Posted on 2016-10-26
18
Medium Priority
?
89 Views
Last Modified: 2016-11-01
I want the code in the result window to have syntax highlighting.

The first box (red border) does NOT have the syntax highlighting.

The second box (blue border) DOES have the syntax highlighting.

https://jsfiddle.net/TomJSFiddleNew/L13m3jaa/3/
0
Comment
Question by:Tom Knowlton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 5
  • 2
18 Comments
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41861604
What is the problem you are having exactly?
0
 
LVL 27

Expert Comment

by:BigRat
ID: 41862304
It all seems to be about this sequence of code
var a = jq(".dynbind").html();

		jq("#codesyn").text(a);

    var $pre = jq("#codesyn");
    $pre.html($pre.html().replace(/</g, '&lt;').replace(/>/g, '&gt;'));

Open in new window


which is a mix of JQuery and Angular - tut,tut!

I think it might be a better idea to first extract the HTML from the dynbind element as a string, then do the replacement of the markup and then set the HTML property of the code element (id codesyn).
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 41862494
I think it might be a better idea to first extract the HTML from the dynbind element as a string, then do the replacement of the markup and then set the HTML property of the code element (id codesyn).

How?

Can you  provide a fork of my  JS Fiddle that makes the contents of the red box have syntax coloring, just like the blue box code has syntax coloring?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 27

Expert Comment

by:BigRat
ID: 41862548
Can you  provide a fork...

No, I'm not registered there.

var a = jq(".dynbind").html();

a = a.replace(/</g, '&lt;').replace(/>/g, '&gt;');

var $pre = jq("#codesyn");

$pre.html(a);

Open in new window

0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 41862593
Notice the difference in one code block vs the other.  In the <pre><code> block that DOES work ... each element is being wrapped in <span class-"tag">, etc.  where as my attempt to insert the code block programmatically just pastes the entire block as a string.

So it seems to be a timing issue and a formatting issue.  The code syntax coloring performed by run_prettify.js happens WAY EARLY in the rendering process.  And the other problem is my inserted html snippet is not formatted correctly.  It is not being converted over to use &lt; rather than "<":


devtoolsscreencap

jsfiddle screenshot:

js fiddle

link to the updated jsfiddle:

https://jsfiddle.net/TomJSFiddleNew/L13m3jaa/3/
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 41862599
BigRat:

This did not work, sorry:

var a = jq(".dynbind").html();

a = a.replace(/</g, '&lt;').replace(/>/g, '&gt;');

var $pre = jq("#codesyn");

$pre.html(a);

Open in new window

0
 
LVL 27

Expert Comment

by:BigRat
ID: 41862794
 It is not being converted over to use &lt; rather than "<":

in which case with the bit of script I wrote it would be a good idea if you did a console.log after the double replace to see whether the substitution did work.
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 41862806
var jq = $.noConflict();

jq(document).ready(function () {
       
var a = jq(".dynbind").html();

console.log(a);

a = a.replace(/</g, '&lt;').replace(/>/g, '&gt;');

console.log(a);

var $pre = jq("#codesyn");

$pre.html(a);

console.log(a);

Open in new window



yields the following in Chrome Dev Tools:

(index):68
        <div ng-controller="HelloWorldController" class="ng-scope">
            <input ng-model="greeting.text" class="ng-pristine ng-untouched ng-valid ng-not-empty"> (change the text inside the input field to change the label text below)
            <p class="ng-binding">Hello World!!!</p>
        </div>


    
(index):72 
        &lt;div ng-controller="HelloWorldController" class="ng-scope"&gt;
            &lt;input ng-model="greeting.text" class="ng-pristine ng-untouched ng-valid ng-not-empty"&gt; (change the text inside the input field to change the label text below)
            &lt;p class="ng-binding"&gt;Hello World!!!&lt;/p&gt;
        &lt;/div&gt;
    



(index):78 
        &lt;div ng-controller="HelloWorldController" class="ng-scope"&gt;
            &lt;input ng-model="greeting.text" class="ng-pristine ng-untouched ng-valid ng-not-empty"&gt; (change the text inside the input field to change the label text below)
            &lt;p class="ng-binding"&gt;Hello World!!!&lt;/p&gt;
        &lt;/div&gt;
    

Open in new window

0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 41862813
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 41862821
One question I am researching is:  "Can you apply syntax highlighting at runtime?  For example, with a button click?"
0
 
LVL 27

Expert Comment

by:BigRat
ID: 41862825
I'll look at this tomorrow, because it's late here (and cheese time)
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 41862829
Enjoy your cheese.  :  )
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 41864629
Here is the answer:

Call:

PR.prettyPrint(( );

Apparently PR creates a simple lexer?

http://stackoverflow.com/questions/16127015/how-to-re-apply-prettyprint-after-run-prettify-js-has-been-loaded
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41865179
This seems to be about two things.

On the one hand it is about replacing <> with &lt; &gt; and on the other about applying prettyPrint to dynamically created element.s

I have to admit I am still confused as to what you are actually asking here - what is it you are trying to solve?
0
 
LVL 27

Accepted Solution

by:
BigRat earned 2000 total points
ID: 41866770
To be honest I'm not happy about the mix of JQuery and Angular. In Angular a watch would have been made on the display field, so that when it's content changed it would be "re-rendered", ie: the pretty print would have run. The best way is probably a directive. There are a couple of examples on the web, for example this fiddle http://jsfiddle.net/yAv4f/6/.

app.directive('prettyprint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
              element.html(prettyPrintOne(element.html(),'',true));
        }
    };
});

Open in new window

0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 41867313
Julian:

Prettify.js applies code syntax coloring to <pre><code> blocks.

But it won't apply the syntax coloring to content that is INSERTED into the DOM at runtime without running:

PR.prettyPrint(  );

My question was about the need for PR.prettyPrint(  ).  The problem was I did not realize that such a method call existed as part of Googles prettify.js library.  This ability to "re-apply" the syntax coloring AFTER the DOM has been modified was unknown to me and was the heart of the question I asked originally.
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 41867319
BigRat:

Your jsfiddle does not seem to work:

The resulting web page shows only this:

<!DOCTYPE html><html lang="en"></html>
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 41869200
Thanks for your help.
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

718 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question