How to prettify dynamic content ?

Keanjyto

unread,

Feb 11, 2012, 12:59:56 AM2/11/12

to js-code-prettifier

Hi,

I'd like to prettify dynamic content for a "debug" function. I use
jQuery to trigger code-prettifier but it didn't work :

function debug(txt)
{
$( '#debug pre' ).empty().text( txt );
$( '#debug' ).bind( 'prettify', function() { prettyPrint(); });
$( '#debug' ).show().trigger( 'prettify' );
}

When I call "debug(txt)", a '<div id="debug"><pre>txt</pre></div>'
appears with the new content I'd like to read.

If anyone has an idea, I'm interested. Sorry for my English.

Keanjyto.

Mike Samuel

unread,

Feb 11, 2012, 1:47:36 PM2/11/12

to js-code-p...@googlegroups.com

2012/2/10 Keanjyto <kean...@gmail.com>:

> When I call "debug(txt)", a '<div id="debug"><pre>txt</pre></div>'
> appears with the new content I'd like to read.

Is this what happens or what you want to happen?

Keanjyto

unread,

Feb 11, 2012, 5:03:50 PM2/11/12

to js-code-prettifier

It's what happens, but I'd like to have the code with syntaxic
coloration too.

I tried to use a pop up to create a new page instead of modifying an
existing part of the document... It didn't work with JS-code-
prettifier and SyntaxHighlighter too :

function debug(txt)
{
var fullsize = window.open('', '_blank', 'width=800, height=800,
location=0, resizable=1, menubar=0, scrollbars=1');
fullsize.document.write('' +
'<html><head><meta http-equiv="content-type" content="text/html;
charset=utf-8" /><title>Code généré pour l\'arborescence</title>' +
'<script type="text/javascript" src="sh/scripts/shCore.js"></
script><script type="text/javascript" src="sh/scripts/
shBrushJScript.js"></script>' +
'<link type="text/css" rel="stylesheet" href="sh/styles/
shCoreDefault.css"/></head>' +
'<body onload="dp.SyntaxHighlighter.all(\'source\');"><pre
name="source" class="js">'+txt.replace(/</g, '<').replace(/>/g,
'>')+'</pre></body></html>');
}

On Feb 12, 5:47 am, Mike Samuel <mikesam...@gmail.com> wrote:
> 2012/2/10 Keanjyto <keanj...@gmail.com>:

Mike Samuel

unread,

Feb 11, 2012, 6:59:31 PM2/11/12

to js-code-p...@googlegroups.com

2012/2/11 Keanjyto <kean...@gmail.com>:

> It's what happens, but I'd like to have the code with syntaxic
> coloration too.

In

> $( '#debug' ).bind( 'prettify', function() { prettyPrint(); });
> $( '#debug' ).show().trigger( 'prettify' );

Is #debug in the DOM when prettyPrint is called? Does the <pre>
element have class="prettyprint"?

Keanjyto

unread,

Feb 12, 2012, 4:27:44 AM2/12/12

to js-code-prettifier

Yes, both #debug and <pre> are in the DOM and only the content of
<pre> is modified with the debug function. I used jQuery ".append()"
method to insert in DOM the new content and then tried to prettify but
it didn't work too... :

===================
<html>
<head>
[...]
<script type="text/javascript">
<!--
[...]
function debug(txt)
{
txt = txt.replace(/</g, '<').replace(/>/g, '>');
$( '#debug pre' ).empty().append( txt );

$( '#debug' ).bind( 'prettify', function() { prettyPrint(); });
$( '#debug' ).show().trigger( 'prettify' );
}

[...]
-->
</script>
</head>
<body>
[...]
<div id="debug"><pre class="prettify"></pre></div>
</body>
</html>
===================

On Feb 12, 10:59 am, Mike Samuel <mikesam...@gmail.com> wrote:
> 2012/2/11 Keanjyto <keanj...@gmail.com>:

Keanjyto

unread,

Feb 12, 2012, 4:29:05 AM2/12/12

to js-code-prettifier

NB : even with "<div id="debug"><pre class="prettyprint"></pre></div>"
it didn't work ;) So it's not an error due to the class name.

Keanjyto

unread,

Feb 12, 2012, 11:01:12 AM2/12/12

to js-code-prettifier

Impossible to prettify when the content is dynamically added in the
DOM.
I found a solution by creating my own prettifier which works only for
HTML, really basic (many regexp) but it does what I want. It can be
improved, but I don't have the time to do that. If it can help anyone,
you have the code just here :
================================
function debug(txt)
{
txt = txt
.replace(/</g, '<').replace(/>/g, '>').replace(/"/g,
'&#34').replace(/'/g, '&#39').replace(/=/g, '&#61')
.replace(/ ([^(&#61) ]*)(&#61)/g, ' <span class="gf">$1</span>$2')
.replace(/<(\/?)([^!|( <)|(>&#61)|(<\/)|]*)>/g, '&lt$1<span
class="b">$2</span>>')
.replace(/<([^!<>]*) /g, '&lt<span class="b">$1</span> ')
.replace(/(&#34|&#39)([^(&#34)|(&#39)]*)(&#34|&#39)/g, '$1<span
class="v">$2</span>$3')
.replace(/&#61/g, '<span class="rf">&#61</span>').replace(/\/>/
g, '<span class="rf">/</span>>');

$( '#debug pre' ).empty().append( txt );

$( '#debug' ).show();
}
================================

Sebastián Gurin

unread,

Mar 1, 2013, 8:56:40 PM3/1/13

to js-code-p...@googlegroups.com

The same question and need here. I create a <pre> element dynamicall, attache it to the DOM, add the class name "prettyprint" and call prettyPrint(); function . All in that order. The <pre> is shows with the text I want, but not syntax coloring. it seems this library only works for content generated on the original markup - no possible to prettify dynamically generated content ?

Thanks in advance, any help is appreciated.

Darryl Kuhn

unread,

Aug 19, 2013, 3:54:47 PM8/19/13

to js-code-p...@googlegroups.com

I was able to solve this problem by generating a new pre block and then calling prettyprint(). E.g.:

codeContainerId = 'output-'+ Math.floor(Math.random()*10000000);

$('#somediv').html('<pre class="prettyprint" id="'+codeContainerId+'"></pre>');

json = JSON.stringify(obj, undefined, 4);

$('#'+codeContainerId).html( json );

prettyPrint();

You can see a working example at https://github.com/darrylkuhn/iodoctor (implemented in js/run.js)

Hope this helps!

Darryl

Sebastián Gurin

unread,

Aug 26, 2013, 1:50:38 PM8/26/13

to js-code-p...@googlegroups.com

I was able to solve my problem using prettyPrintOne function and passing the dynamically created DOM element:

prettyPrintOne:
http://code.google.com/p/google-code-prettify/source/browse/trunk/js-modules/prettify.js#68

Thanks to Mike Samuels

Reply all

Reply to author

Forward