Solved

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

Posted on 2016-10-26
18
37 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 51

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
 
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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 51

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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 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…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

707 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now