orthecreedence / highlight-lisp

A Common Lisp syntax highlighter written in Javascript
77 stars 7 forks source link

highlight-lisp - Common Lisp syntax highlighter

This is a syntax highlighter for Common Lisp written in Javascript. It is completely themable via CSS (themes included).

The purpose of this is to make it really easy to embed beautiful Common Lisp code into a website with minimal effort.

See the demo!

Usage

Usage is simple. You include highlight-lisp.js, link to one of the CSS themes, and call one of highlight-lisp's highlighting functions:

<!-- Put these in your document somewhere, probably in the head, although the <script>
     tag can probably go anywhere -->
<script type="text/javascript" src="https://github.com/orthecreedence/highlight-lisp/raw/master/js/highlight-lisp/highlight-lisp.js"></script>
<link rel="stylesheet" href="https://github.com/orthecreedence/highlight-lisp/blob/master/js/highlight-lisp/themes/github.css">

...

<!-- By default, the highlighter looks for code blocks with class="lisp" -->
<pre><code class="lisp">(defun test-syntax-highlighter ()
  "Docstring explaining what this function does."
  (let ((hash (make-hash-table :test #'equal)))
    ...))</code></pre>

Once the HTML is set up, there are a few ways to initialize highlighting:

// automatically highlight all <code class="lisp">...</code> blocks
HighlightLisp.highlight_auto();

// specify a custom class name (instead of "lisp"):
HighlightLisp.highlight_auto({className: 'common-lisp'});

// highlight *every* code block
HighlightLisp.highlight_auto({className: null});

// manually highlight a code block
var code = document.getElementById('my-code-element');
HighlightLisp.highlight_element(code);

Paren matching

You can now enable paren matching (on mouse hover):

HighlightLisp.paren_match();

This will go through all highlighted blocks of code and add mouseover/mouseout event listeners to all ('s and )'s that highlight the matching paren on hover.

What gets highlighted

On that note, things that don't get highlighted/aren't properly highlighted:

Why

Aren't there a bunch of Javascript syntax highlighters out there already?

Yes, but truth be told, most ignore lisp. You can write custom parsers for some of them, but the APIs they provide didn't work well enough for me. highlight.js has a very nice lisp highlighting mode, along with really nice themes, but I wanted more control over the process.

For instance, highlight-lisp started as a SyntaxHighlighter brush, but I quickly realized that because of the limitations of Javascript not allowing real lookbehind regular expressions, I needed more direct control over the search/replace process.

What I discovered was that given the proper tools, parsing lisp is easy (in fact, a cake walk after just releasing markdown.cl) and there's no need for a big highlighting framework. You plug in some regexes, slap some tags around certain things, and call it a day.

License

As always, MIT.