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.

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
3
  • I tried that and it did not work... Any other suggestions?
    – Phrancis
    Commented Jan 16, 2015 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
    Commented Jan 16, 2015 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 ♦
    Commented Jan 17, 2015 at 1:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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