If you’re teaching computer science, odds are pretty good that you need to share code with your students. Maybe it’s starter code for a project. Maybe it’s a solution for lab. But it’s something that you probably do.
Canvas, and specifically the rich text editor, makes this a little more difficult than it should be. Web editors tend not to be friendly to the tab key when you’re trying to indent code.
Enter GitHub & Gists
GitHub is probably something that you’re familiar with, even if it’s just a word that you’ve heard in passing. If not, it’s a website where users publish their code so that it can be viewed, edited, and shared. It makes coding a bit more of a social process. And it’s really great for open source projects.
But GitHub has a smaller, but perfect service for what we’re trying to do and that’s a Gist. A gist is a piece of code that you want to share with other users. If you already have a GitHub account you can create gists under your account, but you can also create them anonymously. For this demo that’s what we’re going to do. But if this is something that you think you mind wind up doing often it’s probably worth setting up an account. They’re free.
Creating a Gist
Let’s head over to Gist.GitHub.com. If you have an account you can go ahead and login so that the gists show up under your account.
You should see a page that looks similar to this, except it will be blank. I went ahead and typed in a bit of code that we’ll be using later.
If you give your code a filename GitHub will automatically syntax highlight it for you. And, the editor works just like you would expect it to. Tabs work, braces highlight, that sort of thing.
If you’ve got more than one file, there’s an Add File button on the bottom of the editor.
Once you’re done, click on one of the two Create buttons on the bottom right of the editor. The only difference is that secret gists don’t show in search results. But, anyone that knows the URL can get to it. There’s no real protection, so you probably want to be careful about what you put out there.
Viewing the Gist
After saving your gist you’ll be bounced to the URL of your newly created page. It’ll look a bit like this.
The important part is the URL. Go ahead and copy it. We’ll need it later, and it’s not something that you’d want to type in manually.
You may also notice that there’s a button that says embed. This link, the one that starts with <script, would allow you to embed this gist into a web page. Unfortunately, Canvas strips out HTML script tags out of any content entered so it won’t work.
Over to Canvas
Now it’s time to actually embed the gist, so head on over to your Canvas account. For the demo we’re going to embed the gist into a discussion page, but it could be anywhere that you enter text using the rich text editor.
Once you get to the page where you want to embed the gist click on the link above the editor to switch from rich text to html mode. This is important because if we try to type in the embed code directly into the rich text editor it will convert it in such a way that it won’t work.
Notice the text we’ve entered. It’s the HTML code for an iframe. You’re going to want to replace the URL next to src with the gist URL you copied earlier.
There’s one important change before you save though. If you just paste in the URL you’ll embed the entire GitHub site with all of the headers and stuff. If all you want is the files, and it probably is, you’re going to add .pibb to the end of the src URL. This tells GitHub that you want to get the iframe friendly version of the gist. That way there’s no headers. Just the files.
Click to save your page and you’ll see something along these lines.
Fixing the Size
Okay, so that’s not quite right. Yes, it’s embedded. But it’s tiny. There’s a really easy fix though.
What we need to do is specify the size of the iframe with a bit of inline CSS. Click to go back and edit your post and then click on the link to switch back to HTML mode.
What we want to do is specify how big the iframe should be. Odds are pretty good that Canvas has already guessed, but probably guessed wrong. You might see something like height="300" width="300" as part of your iframe code. Just leave that there. What we’re about to do will override that.
Here’s a screenshot of what we’re changing.
Notice that we added style="width:100%;height:500px;" to the embed code. This is a bit of inline CSS that tells the web page how big to make your frame. It’s going to be 100% of the available width which will take it edge to edge in your post. It’ll also be 500 pixels (px is the abbreviation for pixels) tall. We can’t use a percentage here because of the way HTML does percentage heights. So we’re going to specify exactly how tall to make it.
And that’s much better. The gist is now across the entire width of the post.
But there’s a big gap between the bottom of the gist and the bottom of the post. That’s because 500 pixels was too much. But it’s not something you want to worry about too much. Even if you get the number exactly right, some browsers will still be a bit off and may leave the gap or not show the entire gist with scrollbars. I typically will either leave a pretty good gap if it’s a short bit of code or leave it short enough for longer code so that it’s obvious that they need to scroll.