Menu
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&skin=sunburst&lang=css" defer="defer">
</script>
</head>
<body>
<h1>Google Code Prettify testing</h1>
<pre class="prettyprint" style="font-size: 12pt;">
<script type="text/javascript">
// This is a comment
var myString = "Hello, World!";
var myInt = 42;
function helloWorld(world) {
for (var myInt; --myInt >= 0;) {
alert(myString);
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</pre>
</body>
</html>
Result:
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)
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;">
<script type="text/javascript">
// This is a comment
var myString = "Hello, World!";
var myInt = 42;
function helloWorld(world) {
for (var myInt; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: "umber" }
</style>
</pre>
</body>
</html>
And, follows, none of the formatting carries over:
Here is a snapshot of the folder structure. I have verified to be sure it was accurately referenced in the code...
Can you offer any advice as to why it's acting this way?
364
CodeBeautify is an online Code Beautifier and Code Formatter that allows you to beautify your source code. It also provides lots of tools that help to save developer's time.
To use the Prettify plugin, place your code within a <pre> text block, and then specify the class of the block as “prettyprint”. To do this, switch to Text mode within the WordPress editor. For more information on this plugin, see the Prettify Code Syntax page.
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
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
