Improving the user experience of code blocks @peduarte

Pedro Duarte posts about how to highlight various blocks of code in a program:

I’ve been exploring ways to improve the user experience of code blocks.

I’ve been spending a lot of time writing documentation for the Modulz products. Specifically for Stitches and Radix. And I wanted more than just pretty colors.

This was my wishlist:

  • Syntax highlight
  • Apply multiple themes
  • Highlight specific lines
  • Highlight specific words
  • Interact with the content
  • Make specific words link to other pages
  • Show line numbers
  • Make it collapsible/expandable
  • Render a preview

In this post, I’ll share with you how I built a custom code block component.

See the methodology used in the post here.


Stop breadboarding and soldering – start making immediately! Adafruit’s Circuit Playground is jam-packed with LEDs, sensors, buttons, alligator clip pads and more. Build projects with Circuit Playground in a few minutes with the drag-and-drop MakeCode programming site, learn computer science using the CS Discoveries class on code.org, jump into CircuitPython to learn Python and hardware together, TinyGO, or even use the Arduino IDE. Circuit Playground Express is the newest and best Circuit Playground board, with support for CircuitPython, MakeCode, and Arduino. It has a powerful processor, 10 NeoPixels, mini speaker, InfraRed receive and transmit, two buttons, a switch, 14 alligator clip pads, and lots of sensors: capacitive touch, IR proximity, temperature, light, motion and sound. A whole wide world of electronics and coding is waiting for you, and it fits in the palm of your hand.

Join 30,000+ makers on Adafruit’s Discord channels and be part of the community! http://adafru.it/discord

Have an amazing project to share? The Electronics Show and Tell is every Wednesday at 7pm ET! To join, head over to YouTube and check out the show’s live chat – we’ll post the link there.

Join us every Wednesday night at 8pm ET for Ask an Engineer!

Follow Adafruit on Instagram for top secret new products, behinds the scenes and more https://www.instagram.com/adafruit/

CircuitPython – The easiest way to program microcontrollers – CircuitPython.org


Maker Business — The Defense Production Act and the global supply chain

Wearables — Feathers from leather

Electronics — Get Oriented!

Python for Microcontrollers — Python on Microcontrollers Newsletter: Events, Projects, and much more! #Python #Adafruit #CircuitPython @micropython @ThePSF

Adafruit IoT Monthly — No-Code IoT with WipperSnapper, Beaming Internet across the Congo, and more!

Microsoft MakeCode — MakeCode Thank You!

EYE on NPI — Maxim’s Himalaya uSLIC Step-Down Power Module #EyeOnNPI @maximintegrated @digikey

New Products – Adafruit Industries – Makers, hackers, artists, designers and engineers! — JP’s Product Pick of the Week 10/19/21 DRV2506L Haptic Motor Controller @adafruit @johnedgarpark #adafruit #newproductpick

Get the only spam-free daily newsletter about wearables, running a "maker business", electronic tips and more! Subscribe at AdafruitDaily.com !



No Comments

No comments yet.

Sorry, the comment form is closed at this time.