adding a class attribute to <mark> tags to facilitate styling (only for ranges)

Author: olance

jquery.highlighttextarea.js

@@ -1,6 +1,10 @@
 /*!
  * jQuery highlightTextarea
- * Copyright 2014 Damien "Mistic" Sorel (http://www.strangeplanet.fr)
+ * Original work Copyright 2014 Damien "Mistic" Sorel (http://www.strangeplanet.fr)
+ *
+ * Modified work Copyright 2015 Digital Cuisine (http://www.digitalcuisine.fr):
+ *  - adding a class attribute to <mark> tags to facilitate styling (only for ranges)
+ *
  * Licensed under MIT (http://opensource.org/licenses/MIT)
  */
 
@@ -73,7 +77,15 @@
         $.each(this.settings.ranges, function(i, range) {
             if (range.start < text.length) {
                 text = Utilities.strInsert(text, range.end, '</mark>');
-                text = Utilities.strInsert(text, range.start, '<mark style="background-color:'+ range.color +';">');
+
+                var mark = '<mark style="background-color:'+ range.color +';"';
+                if (range.class != null)
+                {
+                    mark += 'class="' + range.class + '"';
+                }
+                mark += ">";
+
+                text = Utilities.strInsert(text, range.start, mark);
             }
         });
 
@@ -514,6 +526,7 @@
                         if ($.isArray(range.ranges[j])) {
                             out.push({
                                 color: range.color,
+                                class: range.class,
                                 start: range.ranges[j][0],
                                 end: range.ranges[j][1]
                             });

jquery.highlighttextarea.min.css

@@ -58,13 +58,14 @@
       });
       $('#demo9').highlightTextarea({
           ranges: [{
-              color: '#ADF0FF',
+              class: 'blue',
               start: 0,
               length: 5
           }, {
               color: '#FFFF00',
               ranges: [[6, 11], [40, 55]]
           }],
+          id: 'demo9-wrap',
           debug: true
       });
 
@@ -103,6 +104,10 @@
       border-radius:0.5em;
       background-color:#9999FF !important;
   }
+
+  #demo9-wrap mark.blue {
+      background-color: #ADF0FF;
+  }
   </style>
 </head>
 
@@ -185,4 +190,4 @@ <h3>API</h3>
 <footer>&copy; 2014 <a href="http://www.strangeplanet.fr">strangeplanet.fr</a> - Created by Damien "Mistic" Sorel</footer>
 
 </body>
-</html>
+</html>