10 CSS & JavaScript Snippets for Beautiful Syntax Highlighting

We’re all familiar with desktop coding software and web IDEs. These feature syntax highlighting to make writing code & debugging easier.

But did you know that you can take the same syntax coloring and add that to your web content?

Granted not everyone writes about code or has code snippets in their blog posts. But if you do write a lot of coding articles or need to add code snippets onto your landing page, then you’ll enjoy these CSS & JS code highlighting solutions.

If you’re looking for syntax highlighter plugins for WordPress, take a look at this post.

1. Angular Source Code Boxes

Here’s a pretty cool snippet created by Andrew Archibald built entirely on Angular.js.

All of these sample code boxes have tabs much like you would find with CodePen’s embeds. But you can add this type of code into your page without any embeds, all handled through CSS for styling.

This would reduce HTTP requests over embedding, and this gives you far more control over the type of syntax you’re using.

I’ll admit the tabs are pretty darn cool and this uses the angular-highlight library for syntax support across dozens of languages.

2. <pre> Tag Style

Here’s a much more detailed example for developers writing lengthy tutorials and sharing massive code snippets.

This code styling project works with two features: a left-hand vertical bar with line numbers or a full-page dark background for the sample code.

You can restyle the color choices however you want with just a little bit of jQuery. Not to mention there’s a bunch of variety here to match any website layout.

3. Textarea Tabs

So here’s a really unique project developed by Ashley Ktorou showing what you can do with a simple textarea.

Coders on the web need to enter the code somewhere. A textarea is the perfect element to handle that.

Yet, with this snippet you’ll find a custom textarea with highlighting along with custom tabs and a fullscreen feature. Not to mention this all works with basic CSS & JS code.

Pretty crazy that we can build code editors right in the browser nowadays.

4. CSS-Only Line Numbers

This dynamic syntax element is actually very simple. But it’s because of this simplicity that it really deserves a spot in this list.

With this code you can add dynamic line numbers automatically into your snippet blocks. You don’t need to hard-code the numbers and they’ll adjust regardless of how many lines of code you add.

I think this can work well for a blog with lots of code snippets inbetween the writing.

And it’s one of the few examples here that uses a lighter background with darker text.

5. Bootstrap Syntax Highlighting w/ Tabs

Looking to add a syntax highlighting feature alongside Bootstrap? Then you’ve stumbled onto the perfect pen by developer Kijan Maharjan.

This lets you add a tabbed widget to your page that contains many different styles for syntax highlighting.

You pick the colors with the code-prettify library and setup the entire design with small edits in CSS.

6. Syntax Highlighting Demo

Here’s a very cool highlighting demo supporting a wide array of languages to pick from.

Each language has its own design style and color scheme, but you can also edit these on your own with a bit of CSS.

You’ll find some homogenous options inside more basic snippets like the JSON example embedded above. Yet, this still offers variety and the design is simple enough to match any layout.

7. Prism.js Demo

The free Prism.js script is one of the best open source solutions for syntax highlighting. It’s used by massive design blogs like Smashing Magazine and it’s freely available for any use case.

But if you want to dive into Prism without much code you can study this snippet created by Bram de Haan.

From that code you’ll find a very lightweight setup that you can copy and re-style to match your site. It uses zebra striping and a custom scrollbar to really stand out from other elements on the page.

8. Pure CSS Code Editor

Okay so the name on this is a tad misleading. It’s not technically a code editor you can use that just runs on CSS.

But this snippet is still wildly impressive.

It’s a static code IDE interface re-created using just HTML and CSS.

You probably won’t find much use for something like this on your website. But the code styles might inspire you to clone a similar design for your own snippets.

9. Syntax Coloring

Super simple and super basic describes this snippet created by Michaël Germini.

If you want to avoid creating your own syntax highlighting from scratch this pen is for you. It uses a clean white background with bright text, and it’s a nice starting template.

Just keep in mind this is super basic so you’ll need to spend a bit of time editing the style to match your site.

10. Code Guide

In this free code guide by Jo Dahl you can see how these syntax highlighting blocks get used in a real-world scenario.

The guide takes you through HTML & CSS with a very clean grid-style layout. The snippets look phenomenal, and they have a color scheme to grab your attention without being obtrusive to the reading experience.

Keep this design in mind if you’re creating a blog or website that features code snippets.

The post 10 CSS & JavaScript Snippets for Beautiful Syntax Highlighting appeared first on Speckyboy Web Design Magazine.