1

I have installed the full Google Code Prettify prettify-4-Mar-2013.tar.bz2 found here and hosting my own JavaScript/CSS works fine with the templates provided:

<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/src/run_prettify.js?autoload=true&amp;skin=sons-of-obsidian"></script>
</head>

I'm trying to link to a different CSS file, so that I can customize it. I got one from this Github page and saved it in google-code-prettify\src as instructed on the page. I changed my header as such, per the instructions on the Github page

It's pretty simple.
1. Setup the Google Code Prettify.
2. Load a downloaded CSS file instead of prettify.css.
3. Beautiful.

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

But then it just renders with the default Prettify style instead of the style from the new CSS file. I'm new at using this tool, and not very experienced designing websites overall so I'm not sure what I am doing wrong.

1

CSS is rendered in the order it's received.

For example, if your first CSS file says:

Body{background-color:blue;}

and your second CSS file says:

Body{background-color:red;}

The background will be Red because the second file overwrote the first. In short move your gitup down.

Without seeing the JavaScript file, it is probably using a document.onReady() so it is technically being fired after the page loads.

3
  • I tried that and it did not work... Any other suggestions? – Phrancis Jan 16 '15 at 22:32
  • Because the JS will load after the elements have loaded you will need to load your CSS after the JS fires. This is not a normal function for browsers. Therefor you will need to load your CSS using JS. If you have JQUERY can modify this code to test. <script type="text/javascript"> $("<link/>", { rel: "stylesheet", type: "text/css", href: "/styles/yourcss.css" }).appendTo("head"); </script> – Jamin Quimby Jan 16 '15 at 22:37
  • @JaminQuimby It might be helpful to add your comment above as an edit to the answer so it's more easily seen. – dan Jan 17 '15 at 1:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.