Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 110
  • Last Modified:

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

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
Tom Knowlton
Asked:
Tom Knowlton
  • 11
  • 5
  • 2
1 Solution
 
Julian HansenCommented:
What is the problem you are having exactly?
0
 
BigRatCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
BigRatCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
 
BigRatCommented:
 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
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
0
 
Tom KnowltonWeb developerAuthor Commented:
One question I am researching is:  "Can you apply syntax highlighting at runtime?  For example, with a button click?"
0
 
BigRatCommented:
I'll look at this tomorrow, because it's late here (and cheese time)
0
 
Tom KnowltonWeb developerAuthor Commented:
Enjoy your cheese.  :  )
0
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Julian HansenCommented:
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
 
BigRatCommented:
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
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
BigRat:

Your jsfiddle does not seem to work:

The resulting web page shows only this:

<!DOCTYPE html><html lang="en"></html>
0
 
Tom KnowltonWeb developerAuthor Commented:
Thanks for your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 11
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now