Tutorons

Tutorons automatically detect and explain code in programming tutorials on the web. They build context-relevant explanations to describe the purpose and syntax of code.

See some of the explanations Tutorons can generate by clicking on highlighted code in the snippets below. The highlighted code was detected and explained dynamically by Tutorons when this page loaded. The examples below include explanations for a variety of small languages like wget, CSS selectors, regular expressions, and Python built-in functions.

wget -A".pdf" -r -l1 -p -k http://eecs.berkeley.edu/~andrewhead

soup.select('div#sidebar a[href^=youtube]')[0].get_text()

RewriteRule ^(scripts|assets|daemons)($|/) - [L]

[item for item in range(len(a)) if a[item] == 'bar']

Curious about how Tutorons were designed and built? Read our paper:

Add Tutorons to your tutorial

To enable Tutorons, and thus context-relevant explanations, for code in your tutorial, add the Tutorons library script to the header of your web page's HTML:

<script src="//tutorons.com/static/tutorons-library.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function (event) {
    var tutoronsConnection = new tutorons.TutoronsConnection(window);
    tutoronsConnection.scanDom();
  });
</script>

If you want to enable explanations for another language not currently included in Tutorons, you may need to build a custom explainer. See the next section.

Build Tutorons for a new language

If you want to enable explanations for a language not yet supported by Tutorons, you'll need to create an explainer. Currently, the recommended method for this is by extending this base implementation of a Tutorons server. Follow this tutorial to learn how to build on top of the Tutorons framework to write you own custom rules for detecting and generating explanations for a new language.

Browse the web with the Tutorons browser extension

To see automatic explanations for wget, CSS selectors, regular expressions, and Python built-ins everywhere you navigate online, install the Firefox addon. Then click on the icon to enable automatic detection of code and insertion of explanations. Give the new plugin a spin by viewing some explanations for wget on this tutorial and some explanations for regular expressions on this tutorial. Explanations may take a few seconds to appear as the Tutorons work to detect the code.

Contribute

Check out our GitHub projects for the Tutorons backend and frontend. Pull requests, bug fixes, and suggestions are most welcome!