Code Block

Code Examples in CSS, HTML, JavaScript, PHP, C#, and More

Play Video

Copy Code Action

Feature

The user can copy source code quickly with a Copy button.

Expand Code Window

Feature

The code example can be expanded with the Enlarge button.

Code Highlight

Feature

Choose a language and preset to control how language keywords are colored and bolded.

Presets

Our Code Blocks Widget has eleven presets to choose from, allowing for a custom look for the software snippets.

Preset 2 ( Coy )

PHP

				/**
 * This is a longer Comment Example to show case  
 * the expand button
 *
 * @param    object  $post_type_params The object to convert
 * @return   string
 */
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

/**
 * This is a longer Comment Example to show case  
 * the expand button
 *
 * @param    object  $post_type_params The object to convert
 * @return   string
 */
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

Preset 3 ( Dark )

PHP

				//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

Preset 4 ( Fanky )

PHP

				//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

Preset 5 ( Okaidia )

PHP

				//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

Preset 6 ( Solarized Light )

PHP

				//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

Preset 7 ( Codemirror Default )

PHP

				//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

Preset 8 ( Blackboard )

PHP

				//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

Preset 9 ( Hopscotch )

PHP

				//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

Preset 10 ( Dracula - 1 )

PHP

				//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

Preset 11 ( Dracula - 2 )

PHP

				//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

Preset 11 ( TTCN )

PHP

				//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

//hello world function
 function hell_world( $post_type_params ) {             
     $post_type_params['hierarchical'] = true;
     if ( empty($post_type_params) ) {
         helper();
     }
     return 'success';
 }

Learn More

Check out our Documentation on how to use and configure this Widget

Learn More

Code Block

Code Examples in CSS, HTML, JavaScript, PHP, C#, and More

Copy Code Action

Expand Code Window

Code Highlight

Presets

Preset 2 ( Coy )

Preset 3 ( Dark )

Preset 4 ( Fanky )

Preset 5 ( Okaidia )

Preset 6 ( Solarized Light )

Preset 7 ( Codemirror Default )

Preset 8 ( Blackboard )

Preset 9 ( Hopscotch )

Preset 10 ( Dracula - 1 )

Preset 11 ( Dracula - 2 )

Preset 11 ( TTCN )

Resources

Terms

Support