Is there a way that every time the word green appears, anywhere on my website, that the font shade is the color green? Is there a module that would help, or something in css or scss?

closed as off-topic by Free Radical, kiamlaluno Jun 27 '14 at 11:04

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – Free Radical, kiamlaluno
If this question can be reworded to fit the rules in the help center, please edit the question.


Answer updated based on comment

A simple jQuery solution might be ideal here.

In your theme.info add a reference to jquery.highlight.js, custom.js and custom.css files:

name = My theme
description = Theme developed by me.
core = 7.x
engine = phptemplate
scripts[] = jquery.highlight.js
scripts[] = custom.js
stylesheets[all][] = custom.css

Or you can use drupal_add_js() and module or theme, see https://www.drupal.org/node/304255

Rather than using "Highlight Keywords on a Page with Jquery" found at http://hawkee.com/snippet/9854/, let's use a fork of the JQuery Highlight Plugin by Penagwin found at http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html to more efficiently handle multiple colors.

Save this file to your theme as jquery.highlight.js from the source at https://dl.dropboxusercontent.com/u/18269294/penagwinhighlight.js

jquery.highlight.js contains:


highlight v4m1

Highlights arbitrary terms.


MIT license.

Modified by Penagwin to allow custom css classes.

Johann Burkard


jQuery.fn.highlight = function(pat, classn) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = String(classn);
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
  return skip;
 return this.length && pat && pat.length ? this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 }) : this;

jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  with (this.parentNode) {
   replaceChild(this.firstChild, this);

Then in custom.js add the following:

(function ($) {
  $(document).ready(function() {
    $(".field-name-body").highlight("green", "green");
    $(".field-name-body").highlight("red", "red");
    $(".field-name-body").highlight("blue", "blue");

And custom.css:

  color: #ED3027;
.green { 
  color: #497206;
  color: #0864A6;

Clear cache and and the color names found inside a .field-name-body class will be colored. Change the element name to what best matches your theme structure. For example article or #content may be more appropriate. Obviously for your use case the jquery.highlight.js function could be optimized to use the pattern as the highlight classname, but this gives you more freedom in naming classes.

  • I am also looking to expand this to making red "red" and blue "blue". – drupal_hack Jun 25 '14 at 12:47
  • Updated answer to reflect need for multiple colors. – Brent Jun 25 '14 at 17:28

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