Code formatting for Brightspace
As we continue to develop courses for Centennial College directly into their LMS, we have learned to use additional tools to those provided within Brightspace to make the courses more engaging and appealing.
We have used platforms to create interactions such as H5P, Nearpod or Padlet. But one of the things that has come up quite often, especially in the computer science courses, is the use of code, in C#, to explain concepts and demonstrate their applicability in real life software.
For example, one of the most generic pieces of code, that’s used mostly in the first class to demonstrate the programming language, displays on the screen the line “Hello World!”. In C#, this what it would look like:
public class Program
public static void Main()
However, as a programmer, I always like to see the code the way it’s supposed to look in the IDE (Integrated Development Environment), because it makes the syntax and structure much clearer and more understandable. So, how do we make the code look as if we are programming in the IDE?
For starters, we can use the <pre> tag in HTML to have preformatted code, so that tab spaces and line breaks are kept. So, the code above would look like this:
But still, we need a bit more formatting, like adding colours to the different keywords of the code, such as “using”, “public”, “class”, etc. It would be a bit painful to do this manually, because there are several different formatting options for these keywords.
Thankfully, we can use this tool: http://hilite.me/ which will allow us to easily format the code, all we need to do is put in the code in the Source Code text box, select the programming language, and click “Highlight”. That will generate a code snippet in HTML that will closely resemble C#.
For example, the code above would look like this:
You might have to still do some formatting, but it will give you a head start on making you code look beautiful!