HTML/JS/CSS syntax highlighter that supports LLVM

Question

I'm currently using google-code-prettify for syntax highlighting. It doesn't seem to support LLVM. Here's what it looks like when formatting LLVM:

enter image description here

It's pretty ugly. Are there any front-end syntax highlighters that support LLVM?

The LLVM plugin that I wrote in my answer is now a part of google-code-prettify! So it *does* support LLVM syntax now. — Nikhil Dabas, Mar 08 '13 at 18:09

Nikhil Dabas · Accepted Answer · 2012-06-01T09:57:47.523

I grabbed the patterns for LLVM assembly syntax highlighting from the LLVM TextMate Bundle project and wrote up a plugin for google-code-prettify .

PR['registerLangHandler'](
    PR['createSimpleLexer'](
        [
         // Whitespace
         [PR['PR_PLAIN'],       /^[\t\n\r \xA0]+/, null, '\t\n\r \xA0'],

         // A double quoted, possibly multi-line, string.
         [PR['PR_STRING'],      /^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/, null, '"'],

         // comment.llvm
         [PR['PR_COMMENT'],       /^;[^\r\n]*/, null, ';'],
        ],
        [
         // llvm instructions
         [PR['PR_KEYWORD'],     /^\b(?:add|alloca|and|ashr|bitcast|br|call|eq|exact|extractelement|extractvalue|fadd|fcmp|fdiv|fmul|fpext|fptosi|fptoui|fptrunc|free|frem|fsub|getelementptr|icmp|inbounds|indirectbr|insertelement|insertvalue|inttoptr|invoke|load|lshr|malloc|mul|ne|nsw|nuw|oeq|oge|ogt|ole|olt|one|or|ord|phi|ptrtoint|ret|sdiv|select|sext|sge|sgt|shl|shufflevector|sitofp|sle|slt|srem|store|sub|switch|trunc|udiv|ueq|uge|uge|ugt|ugt|uitofp|ule|ule|ult|ult|une|uno|unreachable|unwind|urem|va_arg|xor|zext)\b/, null],

         // llvm keywords
         [PR['PR_KEYWORD'],     /^\b(?:addrspace|alias|align|alignstack|alwaysinline|appending|asm|blockaddress|byval|c|cc|ccc|coldcc|common|constant|datalayout|declare|default|define|deplibs|dllexport|dllimport|except|extern_weak|external|fastcc|gc|global|hidden|inlinehint|inreg|internal|linkonce|linkonce_odr|metadata|module|naked|nest|noalias|nocapture|noimplicitfloat|noinline|noredzone|noreturn|nounwind|optsize|private|protected|ptx_device|ptx_kernel|readnone|readonly|section|sideeffect|signext|sret|ssp|sspreq|tail|target|thread_local|to|triple|uwtable|volatile|weak|weak_odr|x86_fastcallcc|x86_stdcallcc|zeroext)\b/, null],

         // variable.llvm
         [PR['PR_TYPE'],       /^\s(?:[%@][-a-zA-Z$._][-a-zA-Z$._0-9]*)/],

         // variable.language.llvm
         [PR['PR_TYPE'],       /^\s(?:[%]\d+)/],

         // storage.type.language.llvm
         [PR['PR_PLAIN'],       /^\b(?:i\d+\**)/],

         // variable.metadata.llvm
         [PR['PR_PLAIN'],       /^(!\d+)/],

         // constant.numeric.float.llvm
         [PR['PR_LITERAL'],       /^\b\d+\.\d+\b/],

         // constant.numeric.integer.llvm
         [PR['PR_LITERAL'],       /^\b(?:\d+|0(?:x|X)[a-fA-F0-9]+)\b/],
        ]),
    ['llvm', 'll']);

Here are the links to a demo jsFiddle and a Gist with a demo page and README.

I took a shot at the transplant: http://jsfiddle.net/eaPg6/ - I'm no LLVM expert, can you try it out with some actual LLVM code? — Nikhil Dabas, Jun 01 '12 at 00:05
It looks awesome. I put it up on github as a gist: https://gist.github.com/2848530 - can you include it (or copy to your own gist, or just the jsfiddle) in the answer, and ill award you the bounty? — jterrace, Jun 01 '12 at 03:41
Whoot! What the **** is this lol! My human eyes got burned while reading this syntax :-). Nice job you did on the plugin! — Rob Angelier, Jun 04 '12 at 15:32
@RobAngelier, that syntax is my fault. Sorry about your goggles. It's a compact way of specifying almost-regular grammars for lexers. — Mike Samuel, Feb 09 '13 at 23:52
@NikhilDabas, I'd like to include the LLVM plugin in Google Prettify. Are you ok with releasing it under the Apache 2.0 license and with me putting it in code.google.com/p/google-code-prettify as an official language extension? — Mike Samuel, Feb 09 '13 at 23:53

score 1 · Answer 2 · answered Jun 04 '12 at 15:23

1

Pyments has support for LLVM. It is based on a python backend and the user can choose between styles.

Output modes:

HTML
ANSI sequences (console output)
LaTeX combined with the package minted
RTF

http://pygments.org/demo/45402/

answered Jun 04 '12 at 15:23

waynix

501
3
13

But you need a server backend for pygments right? I needed a purely frontend (JS) approach – jterrace Jun 04 '12 at 15:56

score 0 · Answer 3 · answered May 31 '12 at 19:30

Considering LLVM is a rather obscure programming language, it's doubtful you'll find a syntax highlighter specifically designed for it. However, that doesn't mean you can't cheat a little, and make something work. I'd recommend using SyntaxHighlighter. http://alexgorbatchev.com/SyntaxHighlighter

Though it does not natively support LLVM, it provides many built-in brushes for various other programming languages. I would try it out, and try applying different brushes (syntax highlighters) to your LLVM code. Some will match quite well, while others will appear pretty bland, like in the example you demonstrated.

If you look here, you'll also see that many unofficial brushes exist as well. That is a benefit to using SyntaxHighlighter--if a brush for LLVM is ever designed (or if you decide to design it yourself) it'll be simple to implement.

Good luck!

score 0 · Answer 4 · answered May 31 '12 at 19:31

don't know if you'r a linux guy, since you use Python i suppose you do. Emacs and Vim seem to support LLVM syntax highlighting. See http://llvm.org/docs/GettingStarted.html. If you don't want to use these perhaps you can use the syntax files (with some fiddling) that are provided in other IDE's or Editors. Googled it up so can't help you any further. Success on your quest if this is't enough.

HTML/JS/CSS syntax highlighter that supports LLVM

4 Answers4