How to add syntax highlighting to Code Snippets on your website, app or blog

• PrismJS

  59 12,011 0.0 JavaScript

  Lightweight, robust, elegant syntax highlighting.

  

It does most of the work using Regular Expressions, which you can easily read through in the source (e.g. for JavaSript the rules are here: https://github.com/PrismJS/prism/blob/master/components/prism-javascript.js)

• babel-plugin-prismjs

  6 154 0.0 JavaScript

  A babel plugin to use PrismJS with standard bundlers.

There are a couple of choices to bring it into your project. If you're already using a JS Bundler (e.g. esbuild or Webpack) you can setup the Babel Plugin for Prism. For our demonstration we'll do this the old, simple way, writing our HTML tags directly.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• carbon

  372 34,015 6.8 JavaScript

  :black_heart: Create and share beautiful images of your source code

  

Note that there are code screenshot sites like https://carbon.now.sh/ that will give you great little screenshots of your code. But these are mere .pngs, they're not accessible, searchable or copy & pasteable. That's NOT what we're going to do here, our output will be fully accessible and appear as text on the page.

Suggest a related project