Search code examples
htmlcsspretty-print

Prettify not linking correctly locally

I'm having issues getting the Google Code Prettify to work properly. This example is working, using the provided remote files:

<html>
<head>
    <title>Google Code Prettify testing</title>
    <script data-brackets-id='140' src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer">
    </script>
</head>

<body>

<h1>Google Code Prettify testing</h1>

<pre class="prettyprint" style="font-size: 12pt;">
&lt;script type="text/javascript"&gt;
// This is a comment
var myString = "Hello, World!";
var myInt = 42;

function helloWorld(world) {
    for (var myInt; --myInt &gt;= 0;) {
        alert(myString);
    }
}
&lt;/script&gt;
&lt;style&gt;
    p { color: pink }
    b { color: blue }
    u { color: "umber" }
&lt;/style&gt;
</pre>
  
</body>
</html>

Result:

prettify-testing1

This is pulling from the Prettify remote hosting. Please note that some items in <script> are only for styling and behavior. The following works fine as well:

<html>
<head>
  <title>Prettify Default Test</title>
  <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</head>

It just renders with the default look and behavior (note this is a different browser)

prettify-testing5

However, when I downloaded and saved files locally, I write this:

<html>
<head>
    <title>Google Code Prettify testing</title>
    <link href="google-code-prettify/src/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="google-code-prettify/js-modules/run_prettify.js"></script>
</head>

<body onload="prettyPrint()">

<h1>Google Code Prettify testing</h1>

<pre class="prettyprint" style="font-size: 12pt;">
&lt;script type="text/javascript"&gt;
// This is a comment
var myString = "Hello, World!";
var myInt = 42;

function helloWorld(world) {
    for (var myInt; --i &gt;= 0;) {
        alert('Hello ' + String(world));
    }
}
&lt;/script&gt;
&lt;style&gt;
p { color: pink }
b { color: blue }
u { color: "umber" }
&lt;/style&gt;
</pre>
  
</body>
</html>

And, follows, none of the formatting carries over:

prettify-testing2

Here is a snapshot of the folder structure. I have verified to be sure it was accurately referenced in the code...

prettify.css

prettify-testing3

run_prettify.js

prettify-testing4

Can you offer any advice as to why it's acting this way?

Solution

  • The reason your formatting doesn't work is because you have the wrong path referenced for the "run_prettify.js file. You have all your prettify files stored in google-code-prettify/src/ whereas your attempting to link to a folder that doesn't exist, e.g. js-modules.

    I've tested this locally, using the exact source you provided with the same folder structure to replicate your environment, and came up with the same result with the formatting rendering only black font. As soon as I changed it to "google-code-prettify/src/" it worked fine.

    Again, to remedy this, change the path from:

    <script type="text/javascript" src="google-code-prettify/js-modules/run_prettify.js"></script>

    to

    <script type="text/javascript" src="google-code-prettify/src/run_prettify.js"></script>

    The only other issue you might run into is that some browsers (IE especially), may block certain content from displaying in your browser. If you are on a network that enforces blocking some content from displaying or prompting you for permission before displaying blocked content, you may have to select "Show Blocked Content" or something similar before it will display how you'd like it to.

    Hope this helps!

    EDIT: This is unnecessary for you - but may help other community members with a similar situation - but I figured I'd also reference the Getting Started section that refers to the requirements on serving your own JS and CSS files and how to get up and running.

    https://code.google.com/p/google-code-prettif/wiki/GettingStarted#Serving_your_own_JS_&_CSS