Issue with Prettyprint for HTML code with <pre> and/or <code>

Question

I'm trying to build an HTML element library (similar to Twitter Bootstrap) and I'd like to have a live version of the element next to the proper code markup for easy reference.

HERE'S THE LIVE PAGE FOR REFERENCE

I'm trying to use Prettify to display something like <button>Button</button>, but I'm having two problems:

It seems to be adding random line breaks.
It's only numbering the first line and then stopping.

Here's what I'm seeing when I view the page:

enter image description here

Question: What am I doing wrong here?

Here's the relevant HTML:

<html> <head> <title>Common HTML Library</title> <link type="text/css" rel="stylesheet" href="common.css" /> <link type="text/css" rel="stylesheet" href="prettify/prettify.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="script.js"></script> </head> <body> <div class="wrapper"> <!-- Button Section --> <h1>Buttons</h1> <p>Buttons should be used whenever something requires a clickable action which will result in a redirect, or dialog dismissal. Buttons appear in various states which are illustrated below.</p> <div class="live-example"> <div class="element"> <label for="defaultButton">Default Button</label> <button id="defaultButton">Button</button> </div> <div class="element"> <label for="primaryButton">Primary Button</label> <button id="primaryButton" class="primary">Primary</button> </div> <div class="element"> <label for="disabledButton">Disabled Button</label> <button id="disabledButton" disabled="disabled">Disabled</button> </div> </div> <div class="markup"> <button>Button</button> <button class="primary">Button</button> <button disabled="disabled">Button</button> </div> </div> <script type="text/javascript" src="prettify/prettify.js"></script> <script type="text/javascript">prettyPrint();</script> </body> </html>

Here's the script.js file:

$(function() { $('.markup').wrapInner('<pre class="prettyprint linenums" />'); }); $(document).ready(function() { $('.prettyprint').html(function(i,h){ return h.replace(/[<>\"\'\t\n]/g, function(m) { return { '<' : '&lt;', '>' : '&gt;', "'" : '&#39;', '"' : '&quot;', '\t': ' ', '\n': '<br/>' // needed for IE }[m]}); }); prettyPrint(); });

It seems like something is happening when it replaces all of the <> with the Unicode equivalents...like it's ditching the line breaks and/or adding in new ones. What is going on here and how can I fix it?

Jon · Accepted Answer · 2013-05-26 06:02:35Z

I figured it out. The issue was occurring when the jQuery was sweeping through and replacing the tag carets with the equivalent Unicodes.

Here is my solution. I decided to add the markup blocks on the fly, so you'll see that I'm adding a div after each live-example block, filling it with the code from the live example as text, not as HTML (this was the trick to getting it to work), then wrapping that in a <pre> tag.

// Add a markup block after each live example container $('.live-example').after("<div class='markup'></div>"); // Fill the markup block with the code from the live container $('.live-example').each(function () { $(this).next($('.markup')).text($(this).html()); }); // Wrap the code in the markup block with a <pre> tag for prettyprinting $('.markup').wrapInner('<pre class="prettyprint linenums" />');

I'm still getting the odd <br> before and after my code, but I can deal with that.

Result:

enter image description here

Collectives™ on Stack Overflow

Issue with Prettyprint for HTML code with <pre> and/or <code>

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related