🏠 back to Observable

Code Block Style Picker

Want to make code blocks stand out in Observables? Instead of writing new styles for custom appearances, you can use this notebook to pick a style already supported by highlightjs.

You can import its function applyHljsStyle to use it in your own notebook. Give the function a name of one of the styles found here: https://github.com/observablehq/highlight.js/tree/master/src/styles (without the .css extension)

This just uses the html template function to import the relevant stylesheet. It only works with stylesheets found in the official highlightjs repo and fails silently otherwise.

1 Like