Synopsis

Quite often code snippets are posted on this and other dev platforms. Graphical annotations(drawings and text) on top of snippets, make code easy to digest, therefore conveying more knowledge to readers.

What I know

Codepen.io gives a way to take and export a screenshot. There is also highlighter libraries like highlight.js, in additions to plugins that allow highlighting in presentation(text processors).

Example

this gem comes from "refactoring angular apps"

Question

How do you guys add graphical annotations on top of code snippets? Is it possible to share techniques you use; or any pointer that can help? I also wonder how long it takes to update those drawings after editing a typo for example.

Tools

Non exhaustive list of some products:

• Jumpshare
• Explain and send screenshots ~ paying
• Marker ~ paying
• Awesome Screenshot
• SnagIt ~ paying
• Droplr
• Nimbus Capture ~ paying
• Carbonfree and open source

Research

I read most of these links without luck.

• Advanced Data Vizualization ~ using prismjs/[d3js]
• Creating beautiful presentations using Highlight
• Adding dynamic code snippets to presentations
• Approaches to presenting code demos to a Developer audience
• How To Format A Block of Code Within a Presentation?

• How do I embed source code or HTML in Open Office Org Presentations without using screenshots?

• Code highlighting for Keynote presentations

• Code Syntax Highlighting with Angular and PrismJS

• How can I get code syntax highlighting in Google Docs?

• What's the easiest way to insert code snippets into a Keynote presentation?

• Tools to annotate screenshots for documentation purposes

• Gitpitch

• Slides