How to add better code snippets in presentations and blog posts?
Tags: snippets, codeannotations, question, discuss
Published: 2017-11-16 02:19:16

---
title: How to add better code snippets in presentations and blog posts?
published: true
description: How to add better code snippets in presentations and blog posts?
tags: snippets, code annotations, question, discuss
---

**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](https://blog.codepen.io/documentation/api/screenshots/). There is also highlighter libraries like [highlight.js](https://highlightjs.org/), in additions to plugins that allow highlighting in presentation(text processors).  


**Example**

![teropa article](http://teropa.info/images/angular_1_component_approximation.png)
_this gem comes from ["refactoring angular apps"](http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html#components)_


**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](https://jumpshare.com/capture-screenshot-annotate)
- [Explain and send screenshots](https://jasonsavard.com/Explain-and-Send-Screenshots) ~ _paying_
- [Marker](https://marker.io) ~ _paying_
- [Awesome Screenshot](http://www.awesomescreenshot.com/)
- [SnagIt](https://www.techsmith.com/screen-capture.html) ~ _paying_
- [Droplr](https://droplr.com)
- [Nimbus Capture](https://nimbus.everhelper.me/screenshot.php) ~ _paying_
- [Carbon](https://carbon.now.sh)_free and open source_



**Research** 


I read most of these links without luck.

- [Advanced Data Vizualization](https://wattenberger.com/blog/react-hooks) ~ using [prismjs](https://prismjs.com/plugins/custom-class/)/[d3js]
- [Creating beautiful presentations using Highlight](https://developer.atlassian.com/blog/2015/08/beautiful-presentations-with-highlight/)
- [Adding dynamic code snippets to presentations](https://productforums.google.com/forum/#!topic/docs/Q1N4KKe3jOE)
- [Approaches to presenting code demos to a Developer audience](https://jeremythake.com/approaches-to-presenting-code-demos-to-a-developer-audience-33b5f09841c2)
- [How To Format A Block of Code Within a Presentation?](https://stackoverflow.com/questions/281025/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?](https://stackoverflow.com/questions/5505515/how-do-i-embed-source-code-or-html-in-open-office-org-presentations-without-usin?noredirect=1&lq=1)

- [Code highlighting for Keynote presentations](https://gist.github.com/jimbojsb/1630790)
- [Code Syntax Highlighting with Angular and PrismJS](https://auralinna.blog/post/2017/code-syntax-highlighting-with-angular-and-prismjs)
- [How can I get code syntax highlighting in Google Docs?](https://webapps.stackexchange.com/questions/19241/how-can-i-get-code-syntax-highlighting-in-google-docs)
- [What's the easiest way to insert code snippets into a Keynote presentation?](https://www.quora.com/Whats-the-easiest-way-to-insert-code-snippets-into-a-Keynote-presentation)
- [Tools to annotate screenshots for documentation purposes](https://superuser.com/questions/98701/tool-to-annotate-pictures-screenshots-for-documentation-purposes)
- [Gitpitch](https://github.com/gitpitch/gitpitch)
- [Slides](http://help.slides.com/knowledgebase/articles/646126-syntax-highlighted-code)