Solved

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

Posted on 2016-10-26
18
63 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:knowlton
  • 11
  • 5
  • 2
18 Comments
 
LVL 55

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: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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
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: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: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: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:knowlton
ID: 41862813
0
 
LVL 5

Author Comment

by: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:knowlton
ID: 41862829
Enjoy your cheese.  :  )
0
 
LVL 5

Author Comment

by: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 55

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 500 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: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: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:knowlton
ID: 41869200
Thanks for your help.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

831 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