0

In Drupal 7 I'm trying to add JavaScript and CSS to dynamically modify the content in a theme. I've spent a good amount of time going over the Drupal documentation, several Drupal books, and the questions/answers on here. I'm trying to pull it all together, but I'm not sure how close I am and was hoping to get some feedback/help. What I have done so far:

(1) Created a CSS file with the code below called knitr.css and put it in the css folder

pre .operator,

pre .number {
 color: rgb(0, 0, 205);
}

pre .string {
 color: rgb(3, 106, 7);
}

(2) Created a JS file with the code below called jquery.knitr.js and put it in the js folder (note, to save space I have removed the js code)

var hljs=new function()
hljs.initHighlightingOnLoad();

 })(jQuery);

(3) Added the following code into the preprocess_node function of the template.php file. Important: responsive and page need to be changed to your theme name and the machine name for your content, respectively.

if ($variables['view_mode'] == 'full') {
$node =& $variables['node'];
if ($node->type == 'page') {
$path = drupal_get_path('theme', 'responsive');
drupal_add_css($path . '/css/knitr.css');
drupal_add_js($path . '/js/jquery.knitr.js', array('type' => 'file', 
'scope' =>  'header'));
 }
}

(4) Placed the follwong in the basic content page with as full HTML text format

</head>

<body>
<pre><code class="r">1 + 2
</code></pre>

<pre><code>## [1] 3
</code></pre>



Expected output:

I expect the output on the page to look something like the following at this point. The JavaScript and the CSS should be changing the font color of 1+2 to blue (wasn't sure how to change color for example below). I'm getting no errors from what I've done above, but it is not implementing as expected.

1 + 2
## [1] 3
Improve this question

1 Answer 1

Reset to default
1
  1. If the style sheet is used on all your pages, there's no need to load it dynamically with drupal_add_js(). Just put your style sheet into the .info file of your theme. The Writing theme .info files guide has detailed descriptions and links to more docs about this.
  2. Your JS script looks fundamentaly wrong to me. Remove the script tag alltogether.
  3. To add the JS script just add scripts[] = foo.js to your theme .info file. Look at the above mentionded guide, or here to get more detials.
  4. What do you mean with basic content page.
Improve this answer
2
  • @BetaRider I do need to load it dynamically, so the .info file approach will not work for me. I removed most of the JS script because it is very long, so I just have it here for the example. It does work outside of Drupal. But your saying here that the script tag is not needed in this context? By basic content page, I mean just a simple page for placing HTML text with the standard Title, Body, and URL path setting fields. I've done nothing unusual.
    – Tom
    Jun 24, 2012 at 15:15
  • @BetaRider I removed the script tag and that seems to have fixed it. I didn't think I was that close as I had never done this before. Thanks for your help.
    – Tom
    Jun 24, 2012 at 15:16

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.