?
Solved

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

Posted on 2016-10-26
18
Medium Priority
?
105 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
  • 11
  • 5
  • 2
18 Comments
 
LVL 61

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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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 61

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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

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.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

601 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