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.

Image of Datadog

Measure and Advance Your DevSecOps Maturity

In this white paper, we lay out a DevSecOps maturity model based on our experience helping thousands of organizations advance their DevSecOps practices. Learn the key competencies and practices across four distinct levels of maturity.

Get The White Paper

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs