Markdown support for canvas

(22)

Markdown

Markdown is a plain text format for writing content using a simple markup language. It is in widespread use and features prominently on sites related to research, math, and coding. It is, for instance, the default markup language for Stack Exchange and GitHub. You can read a brief (and the original) introduction to markdown here. It would be a great addition to canvas is would be appreciated by everyone who teaches in topics related to math and computer science.

 

Flavors

There are several so called flavors of markdown, which feature support for code blocks and math. One of these, such as Pandoc or CommonMark should be used.

 

Demo

Please see this demo for a live demo of how text written in markdown is translated into HTML.

 

MathJax

As an extension for markdown, support for MathJax should also be added. There is already an idea for using mathjax instead of the current math editor: https://community.canvaslms.com/ideas/12274-make-math-equation-editor-accessible. This and that idea should do well to be implemented in parallel.

 

Possible implementation

In addition to having a button for the HTML editor, include a markdown editor as an alternative editor. In a basic implementation, the text in this editor would be processed by a script/executable (such as pandoc or commonmark) on the server side once the user switches to the HTML tab or previews the page.

 

Text translated from markdown is translated into standard HTML. In fact, my current workflow right now is to simply write in markdown, convert it using pandoc to HTML, and then copy from a preview in my browser into the canvas editor. This works (surprisingly) well for everything except math and code highlighting. This means that there is already basic support in canvas for viewing output produced by markdown. In a first implementation, the only necessary step would be to include a simple editor and a script that can translate code into HTML.

 

Previous ideas

There has been several previous ideas (put in cold storage now) calling for support for markdown, such as

https://community.canvaslms.com/ideas/4835?sr=search&searchId=27ae75f0-9b33-4920-be7f-7a54f687e4c2&s... 

https://community.canvaslms.com/ideas/11707?sr=search&searchId=27ae75f0-9b33-4920-be7f-7a54f687e4c2&... 

https://community.canvaslms.com/ideas/12851?sr=search&searchId=27ae75f0-9b33-4920-be7f-7a54f687e4c2&... 

https://community.canvaslms.com/ideas/10784?sr=search&searchId=27ae75f0-9b33-4920-be7f-7a54f687e4c2&... 

23 Comments
g_schirner
Community Novice

Thanks a lot to for documenting and consolidating the idea. I would love this feature very much.

My use case is simple formatted text writing. I find markdown convenient and concise (much preferred over WYSIWYG HTML). It also makes it so much easier to quote source code (github).

My preferred implementation is a switch per course that sets the default editor (HTML or Markdown). A JavaScript Markdown editor such as https://simplemde.com could be used which renders in real-time. I find such an approach to be good compromise between purist text and WYSIWYG. I am not tied to a particular Markdown flavor (as my requirements are simple) or editor.

Back-end storage can be in HTML or Markdown -- an implementation trade-off about how deeply to integrate into the backend. HTML back-end storage is probably minimally invasive as much of it can be done in JS in the browser.

PS: While searching, I also found this GitHub issue on the same topic: Markdown Rendering · Issue #503 · instructure/canvas-lms · GitHub 

joseph_acct
Community Member

Agree, this would be most welcome and there are many nice markdown editors/processors out there.

mohades
Community Novice

This could be very helpful. Markdown or a code editor can be even more helpful for the CS students. I wish canvas ELMS would have this feature right now since I'm taking a programming midterm on ELMS in two days.

checkma
Community Participant

Upvoted for MathJax.

It would be great if MathJax could be incorporated with the Point Annotation tool (which works with just text at the moment), or annotation tools in general.

droberts4
Community Novice

Agree, agree, 100 times agree. This feature, particularly support for code blocks and MathJAX, would make developing curriculum for my computer science course so much easier.

jlai1
Community Explorer

Just echoing my support for Markdown! Thank you.

joel_ostblom
Community Member

This would be super useful to have available in Canvas, thanks for considering it!

OlivierD
Community Member

Yes! Please! The current editor is so slow! Markdown support would help tremendously!

sfkiesling
Community Member

Agreed markdown would make life so easy!

ja505
Community Participant

I'd just like to add our support to this too. Having native Markdown support within Canvas would make
the following much easier 

  • formatting comments
  • responses
  • ePortfolio content
willfreeman
Community Novice

Canvas is years behind on this feature. How can we bring it to their attention to implement. I pay so much in infrastructure fees to my university to support this company, so the least they can do is add a simple feature that nearly every other site has.

greenengineer
Community Member

Upvoted. Markdown could be very useful,  for all the reasons mentioned above.

braftbroward
Community Member

While we're adding support for Markdown, it would be great to use a flavor of Markdown that supports creating diagrams with Mermaid.

There's a cool demonstration of an in-browser Markdown editor with Mermaid support at https://stackedit.io/app#.

screenshotOfMermaidSample.png

nicolito
Community Member

YES! Please! Add Markdown support now, with mathjax if possible, and means to extend with other useful functions as suggested above

wyelearning
Community Participant

Hello,

There is an extension we have developed to allow Canvas users to easily insert markdown text into the Canvas Rich Content Editor. It is a LTI tool that can be added to the Apps icon in the editor a pops up a markdown editor.

There's more information here: https://www.wyelearning.com/services/markdown-editor/

Installation instructions here: https://www.wyelearning.com/support/markdown-editor/

And a very short video of how it works here: https://youtu.be/OjvWw1gl5-g

Do let us know how you get on.

wyelearning
Community Participant

Ok and we've updated the editor to use a better widget for editing markdown. It now has syntax highlighting and understands markdown better:

Screenshot 2021-03-20 at 09.39.30.png

lsloan
Community Participant

I like using Markdown for most documentation.  Using the visual editor in Canvas can be tedious.  The HTML it generates is messy.  Instructors and staff often ask why it's so difficult to make their documents look right in Canvas.  Supporting Markdown would simplify documentation maintenance a lot.  I think some users may still require a visual editor, but behind the scenes, their document would be in Markdown.  I think one of the challenges would be to provide helpers for constructing links to other pages and resources within each course.

LarsDeRichter
Community Member

Would love to have this. This would mak my life so much easier!

hawkinwh
Community Novice

Yes, yes, YES!!

hawkinwh
Community Novice

@wyelearning I wish that I could add your editor -- our installation does not apparently allow custom application loading.