This website is a WordPress blog. WordPress powers about 25% of all websites. It is very much worth becoming familiar with this content managing systems. For general information about editing WordPress pages, see this resource, or this one. To get started publishing, go to the login tab in the menu.

Some of your homework will be submitted in the form of WordPress Posts (not Pages), that you edit and publish with the WordPress editor after logging in. Below, you can find additional information and links describing how to:

• Embed syntax-colored code in your posts
• Upload and embed images
• Use standard “shortcodes” to embed various external media, such as YouTube videos
• Embed p5js sketches directly into your posts – this means they will be interactive. See this guide here by Lauren Mccarthy.

Embedding syntax-colored code.

This WordPress includes the WP-Syntax plugin by Steven A. Zahm. This plugin provides syntax highlighting for a wide range of popular languages. In the WordPress editor’s HTML or “Text” mode, wrap your code blocks with <pre lang=”LANGUAGE” > and </pre> , where LANGUAGE is a GeSHi-supported language syntax. See here for more information and examples. For a quick example, suppose your code is the following:

void setup() {
size(200, 200);
}
void draw() {
smooth();
background(#ffffff);
rect(0,0, width-1,height-1);
ellipse (100, 100, random(80), random(80));
line (0,0, mouseX, mouseY);
}

That looks awful! To see this formatted properly, put the fragment <pre lang=”java” line=”1″> before your code, and </pre> afterwards. (The optional ‘line’ tag adds line numbers.) The result will look like the following:

1
2
3
4
5
6
7
8
9
10

void setup() {
	size(200, 200);
}
void draw() {
        smooth();
	background(#ffffff);
        rect(0,0, width-1,height-1);
	ellipse (100, 100, random(80), random(80));
	line (0,0, mouseX, mouseY);
}

WP-Syntax supports all GeSHI languages, listed here.

Embedding uploaded images.

Customary varieties of web-ready images (.jpg, .gif, .png) can be uploaded to our site using the “Add Media” button in the top left of the WordPress post editor. Click this button, upload your media to the site, and then be sure to “insert into post”. (If you forget to insert the image into your post, it will just languish in a directory of uploaded images.) Here’s what the “Add Media” button looks like:

Note that there are restrictions on the maximum file size (2MB) you may upload. Contact the professor if this presents a problem, or try saving your file with a smaller file size using Photoshop’s “Save for Web & Devices” feature.