Adding syntax highlighting to this Blog

This Blog will in the future have to be able to show programming source code in Python, Arduino-C or any other programming language used in the CanSat project. This will allow the team to share some relevant source code.

We had several requirements for the integration in our Blog of source code:

1. [Mandatory] The source code should be numbered to allow us to explain selected lines in the code
2. [Mandatory] The syntax highlighting should work at least for Python and Arduino-C which are the main programming languages that we shall use in the project
3. [Mandatory] It should allow an easy "copy-paste" so that our readers can easily test a use our code
4. [Optional] Javascript should be avoided so that the Blog is not slow down

Well we have found an acceptable solution that respects the requirements above from 1 to 3, but unfortunately does not respect the requirement 4. For now we will use this solution but we will search for solutions for Blogger that avoid Javascript.

We will use the GitHub Gist which is like a repository for small code snippets.You can add any number of snippets and you can easily embed the code to your Blog post. It also have a support for highlighting many programming languages. To this we have followed the following steps:

1. Create a GitHub account
2. Head on to Github Gist
3. Create a Gist
1. Insert a text describing the source code you are adding, in the text field "Gist description..."
2. Insert the name of the file containing the source code being added in the text field "Name this file..."
3. Write the source code, or copy paste the source code, in the applicable text box
4. Press the button "Create public Gist"
4. After the Gist is correctly created, copy the URL in the "Embed URL" field on the right of the screen, using the provided button. The URL will look something like: <script src="https://gist.github.com/xplorer-cansat/0b6274cbcd5eeb649b81.js"></script>
5. Paste the copied URL to the editor of the Blog by having it configured in HTML mode: in Blogger there are two buttons, one called 'Compose', and the other called 'HTML' - press the button 'HTML'
6. And enjoy...

For this post we have created a Python test code snippet to show the final result. You can find it here:

You can see that:

• All lines are numbered, allowing us to refer to a specific line in the source code - for instance:
• Notice that in line 8 (and in lines 11 and 24) the print statement ends with a comma ','; this prevents that a newline is placed at the end of the text to be printed
• The sys.stdout.write statement is used in lines 23 and 25, instead of print, so that at the end of the text is printed, a space character is not added
• The import statement in line 2 is needed because of the usage of the function sys.stdout.write
• The source code is highlighted, making the code more readable
• It allows an easy copy-paste (try it)

To finalise we will show a test code snippet for the Arduino-C, which is in the public domain, and which can be regarded as the Arduino-C "Hello World" program:

Once more, the requirements 1, 2 and 3 are respected.