Save Time Creating Canvas Pages

Astronomy professor Andy Rivers crafts beautiful Canvas sites for his courses. Some of them have been featured as examples in Northwestern's Canvas Learning Center. To save himself time when building in Canvas, Rivers uses a syntax called Markdown to create his course pages. I recently sat down with Andy to discover how he's been using Markdown and why you too may want to give it a try. 

What's Markdown and Why Use It?

Simply put, Markdown is a web syntax that allows you to write in plain text and then quickly convert it into HTML. It’s designed to save you the mouse clicks you'd typically spend clicking on formatting options in the WYSIWYG editor by allowing you to format as you write with some simple mark-up. How is that any different than HTML you might ask? HTML’s mark-up language is more complex and tedious. Markdown is designed to be quick and efficient.

Why use Markdown? You can quickly type text that you want formatted and save the time you'd usually be clicking between headings, bold, italics, etc. You can also use the same plain-text to quickly convert between different formatted texts types: HTML, PDF, etc.

There are many good guides to getting started with Markdown on the web, and some simple online converters to turn Markdown into HTML.

A Quick Exercise

1. Copy the following text:

# My Page’s Title
Here I will talk about what you **need** to know, and what you skim over, *if you really need to skim.* Then I’m going to ask you to [visit our Canvas course site](https://canvas.northwestern.edu).

2. Paste the plain text into a Markdown converter to see what it looks like. Here’s a nice online Markdown converter that I found.

NOTE: You can click the </> option in the top right corner to see the HTML. If you copy the HTML code, you can bring into Canvas.

3. Open a new Canvas course page and paste the HTML code inside of the rich content editor. 

  • In your course, click Pages in your course menu
  • Click the + Page button near the top right corner
  • Give your page a title
  • Click the blue HTML Editor above the text box to go into HTML mode
  • Paste the HTML you copied from the Markdown Converter
  • Click the Save button to save your page and enjoy the Markdown goodness

Additional Tips

Here are a few additional tips and tricks to make editing with Markdown a breeze. 

  • Use the Markdown and TableEdit packages in Sublime Text to make editing easier (guide on using Markdown in Sublime)
  • Marked 2 app integrates into the Sublime Text editor and allows you to export HTML of the text
  • Use TextExpander to save frequently used snippets of Markdown text to be copied anywhere and quickly converted into formatted text
  • Some email clients (like Apple Mail, Thunderbird, and Outlook on a PC) have Markdown plugins