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
