Home

Creating a Code Example Block for Drupal

I'm sure this is documented somewhere on http://www.drupal.org but I couldn't find it so I thought I'd document it here so I can remember what I did.

I was looking at a way to highlight code blocks, as well as output from both Unix screens and command line windows, inside of Drupal entries. This makes those sections stand out from the rest of the text of your article like so:

This is what the code block should look like

To do this we need to create a new class in our css so open the style.css inside the directory of the theme that you want to modify. Of course, it might be a good point to make a backup at this point. Add the following into the style.css and save.

.codeblock {
margin: 20px 50px;
background: #F0F8FF;
border: 1px solid #c0c0c0;
padding: 10px;
}

Note that code is an existing HTML element. Now to reference this formatting in your Drupal entry surround your code block with this code <div class="codeblock"><code> Put code example, etc. here</code></codeblock> and the output should look like this:

Put code example, etc. here

Be sure your input type for the entry is set to full HTML.