# JavaScript-based Ruby lexer/parser for CSS syntax highlighti **URL:** \ **Category:** Ruby\ **Created:** [February 27, 2007, 8:46pm UTC](https://www.ruby-forum.com/t/javascript-based-ruby-lexer-parser-for-css-syntax-highlighti/87053 "2007-02-27T20:46:24Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![phrogz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@phrogz](https://www.ruby-forum.com/u/phrogz)\ **Post date:** [February 27, 2007, 8:46pm UTC](https://www.ruby-forum.com/t/javascript-based-ruby-lexer-parser-for-css-syntax-highlighti/87053/1 "2007-02-27T20:46:24Z")
I’m looking for a JS library that will find ` (or otherwise-specified) elements on an HTML page and wrap bits in … type elements for CSS syntax coloring of the original source.` I’ve found two JS-based syntax highlighters ([1] and [2]), but both fail on Ruby code like: foo = “Hello #{ “World” }” They’re both regexp-based, which is the problem. I’m happy to use them for quick-n-dirty highlighting, but I’m hoping that someone has written a lexer/parser that handles more complex situations like this (even if it doesn’t cover every single edge case). ---
**Author:** ![phrogz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@phrogz](https://www.ruby-forum.com/u/phrogz)\ **Post date:** [February 27, 2007, 8:50pm UTC](https://www.ruby-forum.com/t/javascript-based-ruby-lexer-parser-for-css-syntax-highlighti/87053/2 "2007-02-27T20:50:24Z")
On Feb 27, 12:43 pm, “Phrogz” [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: [snip] > I’ve found two JS-based syntax highlighters ([1] and [2]), but both > [/snip] Oops, forgot to attach the references: [1] [http://www.dreamprojections.com/SyntaxHighlighter/](http://www.dreamprojections.com/SyntaxHighlighter/) [2] [highlight.js](http://softwaremaniacs.org/soft/highlight/en/) ---
**Author:** ![phrogz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@phrogz](https://www.ruby-forum.com/u/phrogz)\ **Post date:** [February 27, 2007, 11:44pm UTC](https://www.ruby-forum.com/t/javascript-based-ruby-lexer-parser-for-css-syntax-highlighti/87053/3 "2007-02-27T23:44:49Z")
On Wed, Feb 28, 2007 at 04:50:05AM +0900, Phrogz wrote: > On Feb 27, 12:43 pm, “Phrogz” [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > [snip] > > > I’ve found two JS-based syntax highlighters ([1] and [2]), but both > > [/snip] Does it have to be JS? You gonna do client side lexing of ruby in JS? (I guess it has to be, else you wouldn’t have asked.) - forges on anyway \* Sure you can’t use [http://coderay.rubychan.de/](http://coderay.rubychan.de/) instead? ---
**Author:** ![phrogz](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/2acd7d/32.png) [@phrogz](https://www.ruby-forum.com/u/phrogz)\ **Post date:** [February 27, 2007, 11:55pm UTC](https://www.ruby-forum.com/t/javascript-based-ruby-lexer-parser-for-css-syntax-highlighti/87053/4 "2007-02-27T23:55:49Z")
On Feb 27, 3:44 pm, Logan C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > Does it have to be JS? You gonna do client side lexing of ruby in JS? (I > guess it has to be, else you wouldn’t have asked.) > > - forges on anyway \* > > Sure you can’t usehttp://coderay.rubychan.de/instead? I could, for sure. That trades bytes over the wire for user’s cpu time. Sometimes I just really like having code syntax highlighted by the page, particularly when it’s a tiny snippet as part of a larger page, and not an entire source file. I hacked the second library I found to do what I want. Although I’m annoyed with its speed, it’s working reasonably OK for now. It looks like I was wrong, that is has some form of ‘real’ lexing applied via a very incomplete idea about Ruby syntax. If no one has a premade JS library for this, and if it bothers me enough, I’ll spend some time understanding its scoping and lexing rules and see if it can make the jump from string mode back into code mode. My quick hackery to add some features makes it look possible.