Skip to content

Color your Code

rainbow

These are the languages you can use when adding code to the Doc It plugin. You will also find an example of how to use it below. To use this feature just check the option in the settings page and save. It ‘s the last option on the page.

Example usage

Below is an example of what you would want to paste into your content area. Notice the element <code data-language=”css”>…. “css” is the key word to change to whatever Supported Language it is you are wanting to display your code for.

<pre><code data-language=”css”>
a.icon-animate-small {
background-position: top right !important;
background-size: 34px !important;
height: 34px !important;
width: 34px !important;
}
.instructional-text {
font-size: 12px;
line-height: 16px;
margin-bottom: 9px;
letter-spacing: 1px;
color: #eee;
}
<code></pre>

Result of code above

a.icon-animate-small {
	background-position: top right !important;
	background-size: 34px !important;
	height: 34px !important;
	width: 34px !important;
}
.instructional-text {
	font-size: 12px;
	line-height: 16px;
	margin-bottom: 9px;
	letter-spacing: 1px;
	color: #eee;
}

A few more examples

jQuery(document).ready(function() {
    function showHiddenParagraphs() {
        jQuery("p.hidden").fadeIn(500);
    }
    setTimeout(showHiddenParagraphs, 1000);
});
$docit_include_custom_colored_code = get_option( 'doc-it-color-coded' );
	if ($docit_include_custom_colored_code == '1') { 

	add_action('wp_enqueue_scripts', 'di_head_color_code');
function  di_head_color_code() {

	  wp_register_style('di_head_color_code', plugins_url( 'colorCode/css/custom.css',  dirname(__FILE__) ) );
	  wp_enqueue_style('di_head_color_code'); 
	  wp_enqueue_script( 'di_head_color_code_main', plugins_url( 'colorCode/js/rainbow.min.js',  dirname(__FILE__) ),'','',true ); 
	  wp_enqueue_script( 'di_head_color_code_js', plugins_url( 'colorCode/js/language/generic.js',  dirname(__FILE__) ),'','',true ); 
	  wp_enqueue_script( 'di_head_color_code_js', plugins_url( 'colorCode/js/language/php.js',  dirname(__FILE__) ),'','',true ); 

	}
 } 

Supported Languages

  • C
  • C#
  • Coffeescript
  • CSS
  • D
  • Go
  • Haskell
  • HTML
  • Java
  • Javascript
  • Lua
  • PHP
  • Python
  • R
  • Ruby
  • Scheme
  • Shell
  • Smalltalk

To see more detailed options see everything on github https://github.com/ccampbell/rainbow