16 Free Javascript Code Syntax Highlighters For Better Programming

Posted in Coding, Freebies, JS & AJAX5 years ago • Written by 20 Comments

title-syntax-highlightersIf you are programmer or actually if you at least have some basic coding skills, you’ll find this article useful. For example just look at this page source – without highlighting that whole code is just a bunch of plain black text and it is really hard to find specific things if everything looks the same. Thankfully there are many highlighting scripts available, for example Notepad++ also supports and highlights different code snippets. These code syntax highlighters actually are doing mainly the same thing, but with more options, big coding language support, better integration – really in our days you just need to choose one – there are too many tools available anyway.

Use these syntax highlighters in daily coding or just in cases where you are sharing code with friends, want to add that code in your blog post (by the way there is SyntaxHighlighter WordPress plugin available too) or just want to rapidly read and maintain it – use online syntax highlighters in that case and pick your favorite one from this article!

1. SyntaxHighlighter

I definitely think this syntax highlighter tool should be your choice – this tool is supported very well and offers many options, extensions and integrations with other programs and platforms, but however I want to offer you other tools too to choose from.

SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server.

The idea behind SyntaxHighlighter is to allow insertion of colored code snippets on a web page without relying on any server side scripts. SyntaxHighlighter isn’t for those looking for ability to edit highlighted code.

Extensions & Integration – check out this page too, because you can find there WordPress extensions, Ruby on Rail plugins and much more integration extensions, should be handy!

syntaxhighlighter-javascript-syntax-highlighter

Check out demo page

Download link

2. GeSHi – Generic Syntax Highlighter

GeSHi supports PHP5 and Windows, and has even been used to highlight code on ASP pages, it really supports and highlights almost every coding language, you should check out his website to read more – very powerful tool!

GeSHi aims to be a simple but powerful highlighting class, with the following goals:

  • Support for a wide range of popular languages
  • Easy to add a new language for highlighting
  • Highly customizable output formats

geshi-generic-syntax-highlighter

Check out demo page

Download link

3. Quick Highlighter

Doesn’t get any easier than this to create a web page from your source code. This online highlighter tool offers many coding languages you can choose to highlight together with several options, you can check/uncheck before highlighting code:

  • Combine Style and HTML Code
  • Highlight inbuilt keywords, data types etc.
  • Strict Mode
  • Wrap overflowing text

quick-highlighter-syntax-highlighter

quick-highlighter-syntax-highlighter

4. Google Code Prettify

A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.

The comments in prettify.js are authoritative but the lexer should work on a number of languages including C and friends, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl and Ruby, but, because of commenting conventions, doesn’t work on Smalltalk, or CAML-like languages.

Features:

  • Works on HTML pages
  • Works even if code contains embedded links, line numbers, etc.
  • Simple API : include some JS&CSS and add an onload handler.
  • Lightweights : small download and does not block page from loading while running.
  • Customizable styles via CSS.
  • Supports all C-like, Bash-like, and XML-like languages. No need to specify the language
  • Extensible language handlers for other languages. You can specify the language.
  • Widely used with good cross-browser support.

google-code-prettify-javascript-syntax-highlighter

Check out demo page

5. Pygments – Python Syntax Highlighter

Pygments is a generic syntax highlighter for general use in all kinds of software such as forum systems, wikis or other applications that need to prettify source code.

Pygments supports an ever-growing range of languages, you can check full list supported language listing here

pygments-python-syntax-highlighter

Check out demo page

Download link

6. Highlight.JS Syntax Highlighter

Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.

This program supports following languages – 1C, AVR Assembler, Apache, Axapta, Bash, C#, C++, CSS, DOS .bat, Delphi, Django, HTML, XML, Ini, Java, Javascript, Lisp, MEL (Maya Embedded Language), PHP, Perl, Python, Python profile, RenderMan (RIB, RSL), Ruby, SQL, Smalltalk, VBScript, diff.

highlight-javascript-syntax-highlighter

Check out demo page

Download link

7. Lighter.js – Syntax Highlighter written in MooTools

There isn’t available actual demo page just download link, but it is very easy to use this highlighter as all others by the way.

lighter-syntax-highlighter-written-in-mootools

8. SHJS – Syntax Highlighting in JavaScript

SHJS is a JavaScript program which highlights source code passages in HTML documents. Documents using SHJS are highlighted on the client side by the web browser.

SHJS Support many languages too – Bison, CC++, C#, ChangeLog, CSS, Desktop files, DiffFlex, GLSL, Haxe, HTML, Java, Java properties files,JavaScript, JavaScript with DOM, LaTeX. LDAP files, Log files, LSM (Linux Software Map) files, M4, Makefile, Objective Caml, Oracle SQL, Pascal, Perl, PHP,Prolog, Python, RPM spec files, Ruby, S-Lang, Scala, Shell, SQLSt, andard ML, Tcl, XML, Xorg configuration files.

shjs-syntax-highlighter

Download link

9. CodePress – Online Real Time Syntax Highlighting Editor

CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it’s being typed in the browser.

This editor offers several features like real-time syntax highlighting, code snippets, auto completion and multiple windows. Check out their website to see online demo version.

codepress-online-syntax-highlighter

Demo page and download links are on the same first page.

10. Chili 2.2 jQuery code highlighter plugin

Chili is the jQuery code highlighter plugin which is very fast highlighting, trivial setup, fully customizable, thoroughly documented and MIT licensed.

Plugin supports several languages like C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, and XHTML and has many configuration options giving you very good control over code appearance.

chili-jquery-code-highlighter-plugin

Check out demo examples and install

Download link

11. Highlight – Code & Syntax highlighting by Andre Simon

Highlight converts source code to formatted text with syntax highlighting:

  • Colorized output in HTML, XHTML, RTF, TeX, LaTeX, SVG, BBCode and XML format
  • Supports 140+ programming languages
  • Includes 40 colour themes
  • Platform independent

highlight-andre-simon-syntax-highlighter

Check out demo page

Download link

12. BeautyOfCode: jQuery Plugin for Syntax Highlighting

BeautyOfCode is using Syntaxhighlighter as a base, but this plugin enables xhtml compliant syntax in beautiful way.

beauty-of-codejquery-code-highlighter-plugin

13. JUSH – JavaScript Syntax Highlighter

JavaScript Syntax Highlighter can be used for client-side syntax highlighting of following languages: html, css, javascript, php, mysql, SQLlite, Apache, PostgreSQL.

Features:

  • Highlights languages embedded into each other
  • Links to documentation of all languages
  • Colors can be easily modified via CSS
  • Recognizes complete PHP syntax including __halt_compiler, heredoc, backticks, {$} variables inside strings, namespaces
  • Works in all major browsers including Internet Explorer, Firefox, Opera

jush-javascript-syntax-highlighter

Check out demo page

Download link

14. Ultraviolet – Syntax Highlighting Engine

Ultraviolet is a syntax highlighting engine based on Textpow – you must install it to use Ultraviolet first. Since it uses Textmatesyntax files, it offers out of the box syntax highlighting for more than 50 languages and 20 themes. Ultraviolet is at the same time a stand-alone command line utility and a Rubylibrary.

ultraviolet-synax-highlighter-engine

Check out demo page

Download link

15. DlHighlight – JavaScript Syntax Highlighting Engine

This project is an extensive JavaScript-based syntax highlighting engine, check also why you should choose this engine instead of others.

dlhighlight-code-highlighter-plugin

Download and demo links are all in the same page.

16. Syntax highlighter for JavaScript

This online tool will syntax highlight JavaScript 1.2. code. The highlighting is based on patterns, it will not test for valid JavaScript. Put your code into the box, and tell it to syntax highlight. It may take a little while to highlight large amounts of code, be patient and let it finish.

The output format is HTML – designed so that you can create a Web page displaying your code. I enjoyed how this tool really displays code in very clean way!

syntax-highlightning-javascript

Of course there are also many programs with already built in syntax highlighting support, but these online versions and JS scripts offer bigger control over highlighting and flexibility.

192 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

20 Comments Best Comments First
  • Laura

    Wednesday, August 5th, 2009 00:39

    9

    I had previously been using plain textareas. I always thought these pretty highlighted boxes on sites were done server side. Will check a few of these out and use one in future.

    +2
  • Phaoloo

    Monday, August 3rd, 2009 16:22

    3

    Great new design and useful as always.

    +2
    • Dainis Graveris

      Monday, August 3rd, 2009 16:25

      4

      Thanks man! glad you enjoy!:)

      0
  • Bunnygotblog

    Tuesday, August 4th, 2009 00:13

    5

    Hello Dainis,

    These are great resources for coding. I have bookmarked and Stumble this so other can benefit from your list.

    +1
  • Dean

    Tuesday, October 4th, 2011 20:55

    16

    Anyone know which of these will play nice with velocity?

    +1
  • sarath

    Tuesday, August 4th, 2009 00:20

    6

    Wow, I had no idea there were that many syntax highlighting projects.

    When I was looking for one, I found the first one you listed, SyntaxHighlighter, which has worked very well for me. I especially like that the author provides a hosted version of the scripts so you don’t need to figure out where to put them (convenient when using it in Blogger, for example).

    0
  • Luis Lopez

    Monday, August 3rd, 2009 15:15

    1

    That is really useful, I’m really bad at coding so this tools are like heaven for me.
    Thanks Dainis

    0
    • Dainis Graveris

      Monday, August 3rd, 2009 15:32

      2

      Thanks, Luis for your kind and regular comments! Though I like SyntaxHighlighter..and usually I am using Aptana which offers already good highlighting by default:)

      +5
      • Dicky

        Tuesday, August 4th, 2009 06:09

        7

        Hi Dainis,
        Aptana is more to IDE, and the loading speed is pretty slow. If you want a powerful code editor with syntax highlighting feature, you can go for Notepad++.

        +5
        • Dainis Graveris

          Tuesday, August 4th, 2009 07:27

          8

          Ah, i know, but I am enjoying not highlighting there,but helpful error showing and auto completion to {} tags and things like that,for me it is really handy tool and never any other program offered such flexibility.

          +3
  • Ajit Choudhary

    Monday, August 31st, 2009 22:14

    10

    I always thought these pretty . Javascript… thanks for sharing!

    0
  • Balmiki Kumar

    Saturday, August 20th, 2011 09:31

    15

    this is very useful site,……………

    thanks for sharing!……….

    0
  • Abel Braaksma

    Wednesday, September 30th, 2009 16:17

    11

    PS: Dainis, I love the design of this website, it’s great, clean and it’s clear you put a lot of effort in making posts like this. Very neat!

    0
  • JorgeM

    Wednesday, January 25th, 2012 20:35

    18

    Thanks for the post. I am going to look into #1 and #6. I have pages on my site that have code so this will come in handy!!!

    0
  • Ben

    Monday, January 9th, 2012 07:31

    17

    I like Syntax highlighters! Thanks for the info

    0
  • function

    Tuesday, February 16th, 2010 06:21

    14

    Thank you for this share.
    In the future, I hope that you will share the good information again.

    0
  • tom

    Friday, January 22nd, 2010 19:02

    12

    I miss the http://tools.dottoro.com/services/highlighter/ from the list above.
    I definitely find that online code highlighter handy.
    It provides easy customization and supports embedded CSS and JavaScript code blocks within HTML documents.

    0
  • Duvvar Design

    Monday, February 8th, 2010 21:11

    13

    good code’s :)
    this is thank you.. :)

    0
  • MWS

    Wednesday, March 28th, 2012 03:45

    19

    I want to install in blogger this script but not able to install. Can you guide me how to install and configure this code.

    Thanks in advance

    -1
  • Jonty

    Thursday, April 12th, 2012 14:31

    20

    I use syntax-highlighting on my blog …… thanks for the wonderful share ….

    -6
  • Jonty

    Thursday, April 12th, 2012 14:31

    20

    I use syntax-highlighting on my blog …… thanks for the wonderful share ….

    -6
  • MWS

    Wednesday, March 28th, 2012 03:45

    19

    I want to install in blogger this script but not able to install. Can you guide me how to install and configure this code.

    Thanks in advance

    -1
  • JorgeM

    Wednesday, January 25th, 2012 20:35

    18

    Thanks for the post. I am going to look into #1 and #6. I have pages on my site that have code so this will come in handy!!!

    0
  • Ben

    Monday, January 9th, 2012 07:31

    17

    I like Syntax highlighters! Thanks for the info

    0
  • Dean

    Tuesday, October 4th, 2011 20:55

    16

    Anyone know which of these will play nice with velocity?

    +1
  • Balmiki Kumar

    Saturday, August 20th, 2011 09:31

    15

    this is very useful site,……………

    thanks for sharing!……….

    0
  • function

    Tuesday, February 16th, 2010 06:21

    14

    Thank you for this share.
    In the future, I hope that you will share the good information again.

    0
  • Duvvar Design

    Monday, February 8th, 2010 21:11

    13

    good code’s :)
    this is thank you.. :)

    0
  • tom

    Friday, January 22nd, 2010 19:02

    12

    I miss the http://tools.dottoro.com/services/highlighter/ from the list above.
    I definitely find that online code highlighter handy.
    It provides easy customization and supports embedded CSS and JavaScript code blocks within HTML documents.

    0
  • Abel Braaksma

    Wednesday, September 30th, 2009 16:17

    11

    PS: Dainis, I love the design of this website, it’s great, clean and it’s clear you put a lot of effort in making posts like this. Very neat!

    0
  • Ajit Choudhary

    Monday, August 31st, 2009 22:14

    10

    I always thought these pretty . Javascript… thanks for sharing!

    0
  • Laura

    Wednesday, August 5th, 2009 00:39

    9

    I had previously been using plain textareas. I always thought these pretty highlighted boxes on sites were done server side. Will check a few of these out and use one in future.

    +2
  • sarath

    Tuesday, August 4th, 2009 00:20

    6

    Wow, I had no idea there were that many syntax highlighting projects.

    When I was looking for one, I found the first one you listed, SyntaxHighlighter, which has worked very well for me. I especially like that the author provides a hosted version of the scripts so you don’t need to figure out where to put them (convenient when using it in Blogger, for example).

    0
  • Bunnygotblog

    Tuesday, August 4th, 2009 00:13

    5

    Hello Dainis,

    These are great resources for coding. I have bookmarked and Stumble this so other can benefit from your list.

    +1
  • Phaoloo

    Monday, August 3rd, 2009 16:22

    3

    Great new design and useful as always.

    +2
    • Dainis Graveris

      Monday, August 3rd, 2009 16:25

      4

      Thanks man! glad you enjoy!:)

      0
  • Luis Lopez

    Monday, August 3rd, 2009 15:15

    1

    That is really useful, I’m really bad at coding so this tools are like heaven for me.
    Thanks Dainis

    0
    • Dainis Graveris

      Monday, August 3rd, 2009 15:32

      2

      Thanks, Luis for your kind and regular comments! Though I like SyntaxHighlighter..and usually I am using Aptana which offers already good highlighting by default:)

      +5
      • Dicky

        Tuesday, August 4th, 2009 06:09

        7

        Hi Dainis,
        Aptana is more to IDE, and the loading speed is pretty slow. If you want a powerful code editor with syntax highlighting feature, you can go for Notepad++.

        +5
        • Dainis Graveris

          Tuesday, August 4th, 2009 07:27

          8

          Ah, i know, but I am enjoying not highlighting there,but helpful error showing and auto completion to {} tags and things like that,for me it is really handy tool and never any other program offered such flexibility.

          +3

Comments are closed.

54.205.247.203 - unknown - unknown - US