DEV Community

Pascal Maniraho
Pascal Maniraho

Posted on • Edited on

7 1

How to add better code snippets in presentations and blog posts?

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

teropa article
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:

Research

I read most of these links without luck.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay