Computer Code

There are several formatting options for computer code.Each approach has a different look, features, advantages and disadvantages. While you have several choices, you should try to use the options consistently within a course. (Be warned that some types of code will produce problematic results, so test everything in preview before publishing.)

Preformatted Text

The simplest approach is to use the Preformatted option under the text type menu. This will produce monospaced code. You can add shading by going to the Text tab. You will see your code contained in pre elements. You can add a Corsbook style, such as class=”box-lavender”, by adding the class in the pre element such as:

<pre class="box-lavender">

to place the code within a shaded box for gentle emphasis. For example:

# My ruby program 
# Greet user 
    puts "Hello" 
# Do some math
    x = 1 
    puts x 
# Set a string variable
    myname = 'mark'

Enlighter

Another method is via the Enlighter utility. Use the Code Insert tool in the editing toolbar. Enlighter will sometimes protect against problematic code and sometimes preserves the indentation better. You can choose the language for semantic formatting. You can highlight lines of code turn line numbers on and off. After you create a code block, you can then change its appearance (theme) and other settings by hovering over the code and clicking on the pencil tool. A simple sample is below.

# My ruby program 
# Greet user 
    puts "Hello!" 
# Do some math
    x = 1 + 2 
    puts x 
# Set a string variable
    myname = 'mark'

Code Shortcode

Finally, you can enclose the lines of code in short codes, such as: code … /code. You can specify some of the most common languages using this format: code lang=”ruby” …/code.

Remember to use “[” and “]” around your short codes. Line numbers will be displayed along with some syntax coloring. A list of supported languages and other information can be found at Syntax Highlighter Evolved support page.  Here is an example of code formatted using the last option:

[code lang=”ruby”]
# My ruby program
# Greet user
puts “Hello!”
#Do some math
x = 1 + 2
puts x
# Set a string variable
myname = ‘mark’
[/code]

Simplecode Shortcode

Yet another approach is to use the simplecode shortcode. You can simpley type simplecode … /simplecode, or you can specify a background color, for example, simplecode color=”Azure” Your content… /simplecode.For example,

[simplecode color="Azure"]Your content… [/simplecode].

You should use light background colors. Examples of light background colors include Azure, AliceBlue, BlanchedAlmond, Cornsilk, FloralWhite, Gainsboro, HoneyDew, Lavender, LavenderBlush, LemonChiffon, MistyRose and SeaShell. See the W3Schools Color Picker for further choices. If you don’t include a color choice, the default is lavender. Below is an example using the color Azure:

 
# My ruby program
    puts "Hello!" 
#Do some 
    math x = 1 + 2 
    puts x 
# Set a string variable 
    myname = 'mark' 

Running Code Inside of a Lesson

None of the above options will run computer code from within the browser window. Some such utilities exist, but use them at your own risk. Some will not work with Corsbook, while other might only run for a limited amount of time.