I recommend the module Syntax Highlighter which can be downloaded from Drupal. This will enable you to format code similar to the screenshot, and has syntax highlighting capabilities supporting a multitude of different programming languages!
Once you install this module by putting it in Drupal's modules directory, you will need to install a plugin which enables you to use the Syntax Highlighting module with CKEditor. This plugin can be downloaded from here and to install you simply need to extract the source directory (located in the downloaded archive) inside modules/ckeditor/ckeditor/plugins. Next step is to configure the plugin. Open up the file modules/ckeditor/ckeditor.config.js and add the following lines of code:
config.extraPlugins += (config.extraPlugins ? ',syntaxhighlight' : 'syntaxhighlight' ); config.toolbar_DrupalFull = [ ['Source'], ... ['DrupalBreak', 'DrupalPageBreak','Code'] ];
The first part of the code enables the module, while the second part adds the Syntax Highlighting button.
In theory this should work and you are ready to use this feature, but in practice most users either don't have the button or else no code formatting takes place. Therefore, make sure you read these
two important steps:
1. Make sure that you are using the DrupalFull toolbar (not the Basic or the Full). To enable go to admin/settings/ckeditor/edit/Advanced and change the settings as follows: