What are the first blog entries here all about?

The following blog entries describe my voyage to set up my Edublog. As such it contains also a lot of reflections about what worked out and which pitfalls I ran into. In the coming weeks, I will set up this site for blogging with one of my classes following the edublogs Teacher Challenge.

What do I want to achieve with my blog after the setup stage?

I will use it for my ICT after school activities to provide basic information, links to supportive material as well as assignments. Furthermore, I plan to open up blogs for the students to describe what they are doing, reflecting on their work, commenting and also getting feedback from parents.

What am I going to write about here?

Today I will focus on how code can be represented in WordPress, comparing in particular handling and display of code with the old “Classic Editor” versus the new “Gutenberg Editor”. For me there are two ways how to give my students access to code:

Sometimes I want that the students go through typing and debugging code by themselves. I want to avoid that they are just copying and pasting code snippets and make them run without thinking what they have done. In these cases it is best just to post an image of the code in jpg format, something they can not simply copy and paste into their IDE.

Other times, code here may serve as starter code, then it is great if they can copy and paste lines and add their own parts to it. Making code available here is a quick way to cater for this scenario. An even better way may be GitHub Classroom, once I have run the first classes with this tool, I will share my experiences here.

In the following I will share my experiences on how to handle the second scenario best.

Displaying Code Snippets

Today I have played a bit around with the possibilities to format code snippets. I have another site hosted on WordPress.com. The Premium package I have subscribed to gives you ample storage space, and most important good exposure to search engines. On the downside, that package does not allow for any plugins to be installed. So a lot of helpful add-ons are not available.

Edublogs on the contrary allows you to install at least from a selection of plugins.

For coding in particular, the SyntaxHighligher Evolved is really useful to format code with keyword highlighting for various programming languages, indentation and line numbering. You also get “copy & paste” ready code snippets. This tool for syntax highlighting is available for the “old” Classic Editor in WordPress.

As I decided to go with Gutenberg, the new WordPress editor, you only get plain vanilla code snippets. But with a bit of work you can still select the Classic Editor for individual blocks, do some editing in HTML mode and then get the code nicely formatted.

Here is the famous “Hello World” in C++, first with the old syntax highlighter written in the Classic Editor, next with the new Gutenberg code block. Compare for yourself.

 
#include <iostream> 
using namespace std; 
int main() { 
    cout << " Hello World!\n"; 
    return 0; } 

#include <iostream> 
using namespace std;

int main() {
    cout << " Hello World!\n"; 
    return 0; 
}

Both examples are nicely formatted, all the indentations are there. But the second snippet misses the colour highlighting of keywords as well as the line numbering. For the moment I will mostly use the new editor, sooner or later a similar plugin will be available here on Edublogs for Gutenberg, they are already out there for self-run WordPress sites. In the meantime when required, I will fall back to a classic code within Gutenberg.

Two more sites to check out …

I also run two more ICT related sites, www.code2run.com and www.mikefromd.github.io. The later will only come live in the coming weeks. I will use it with GitHub Classroom for my students to provide sample code to remix and code fragments to start with, I mentioned this earlier. The other site code2run has examples and descriptions on how to use various educational platforms as Alice 3, Arduino, p5js (a Javascript Library with IDE derived from Processing). Have a look at those sites if these subjects are interesting for you.

print