Qlik Web Syntax Highlighter


The Qlik Web Syntax Highlighter gives basic syntax highlighting of QlikView and Qlik Sense script and expressions contained within web pages. Additionally, it also provides a vector font to enable you to display QlikView and Qlik Sense user interface icons on web pages.


The syntax highlighting that is provided is an approximation of what you would get in QlikView's and Qlik Sense's Edit Script dialog. It currently supports the following features:
  • Highlighting of all QlikView v11.20+ and Qlik Sense functions
  • Highlighting of all QlikView v11.20+ and Qlik Sense keywords and statements
  • Highlighting of line comments (//) and block comments (/* */ and REM ; )
  • Highlighting of variable definitions (SET and LET)
  • Highlighting the usage of variable within dollar-sign expansion $( )
  • Highlighting of field names in most situations
The icons provided are either lifted directly from the Qlik products or are close approximations.

If you find any issues, including missing keywords or functions, then please let me know by raising and issue on the GitHub repository and I'll add them to the next release.

This syntax highlighter is also packaged as a plugin for WordPress and an extension for MediaWiki.

Installation

Here are the steps to get it installed and working yourself:
  1. Download the Qlik Web Highlighting (qvhighlight_vX.X.zip) ZIP archive file from https://github.com/MattFryer/Qlik-Web-Highlight/releases/latest
  2. Unpack the folder "qvhighlight" and the files it contains from the archive to a folder on you hard drive. 
  3. Upload the folder and its contents to your website (eg. using FTP)
  4. Edit the web page(s) in which you wish to display QlikView script and add the following lines within the <head> section:

    <link href="highlight/qlikview.css" rel="stylesheet" title="QlikView"></link>
    <link href="highlight/qlik-icons.css" rel="stylesheet" title="QlikView"></link>
    <script src="highlight/highlight.pack.js"></script>
    <script>
        hljs.configure({tabReplace: '    '});
        hljs.initHighlightingOnLoad();
    </script>

  5. If you uploaded the folder to a path other than the route of your website, you will need the amend the paths in the first 2 lines to match the location that you uploaded it to.

How To Use


Syntax Highlighting


Wrap any QlikView script blocks included within the web page in <pre> and <code> HTML tags as shown below:

<pre><code class="qvs">MyTable: LOAD * RESIDENT MyTempTable;</code></pre>

The class allocated within the code tag will define the type of code which syntax highlighting should be applied for. If you code type is given, the highlighting engine will attempt to work out what code type is contained within the tags. It can't always guess correctly and so it is recommended to always define the code type. The following following code types are currently supported:
  • "qvs" - QlikView Script
  • "exp" or "qve" - QlikView Expression
  • "sql" - SQL
  • "vbscript" - Visual Basic Script
  • "javascript" - Java Script
Syntax highlighting will then automatically be applied to the block when the page is view by the user.

Icons


Simply add the appropriate icon code to the class of any suitable HTML tag. For example:

<span class="qicon-XXXX"></span>


Disclaimer

This tool is provided free of charge, as is, with no warranties or guarantees. Neither Datoniq Limited or QlikViewAddict.com (including any of it's contributors) accept any liability for problems or loss resulting from it's use.

9 comments:

  1. Hi, Matt.
    Excellent tool, thank you.
    I manage Jekyll generated static blog at github pages. Their language is Ruby and highlighting library - pigments correspondingly, so I thought I'm out of luck with your package.
    But as I imported your package all my code snippets get highlightings without any intervention from me. Markdown code blocks are converting into PRE html blocks anyway and highlight.js heuristic get correct language automatically. Pure bliss.

    I even can use it in more dynamical situation - look at my Online syntax checker for QlikView chart expressions: http://inqlik.github.io/live/build/web/parser.html

    Thank you again

    ReplyDelete
    Replies
    1. Hi Vadim
      Glad you like it! I hadn't come across Jekyll before but having just taken a peek it looks an interesting idea.

      I chose highlight.js over the other available highlighting engines for a number of reason one of the top was because of the way it applies client side and so works in more dynamic situations. Your Expression syntax checker is a great example. It also supports much more complex language definitions than many, and QlikView script is actually quite a complex language when you worth through all the possible valid syntax.

      Whilst playing with your syntax checker I noticed a small problem with it. It doesn't seem to like the use of variable names in dollar expansion eg. $(vMyVar) which of course is valid in expressions. Other than that it's a great little tool!

      Regards
      Matt

      Delete
    2. Yes, dollar sign expansions are not supported in on-line version. I stated that in blog post http://inqlik.github.io/2014/10/online-syntax-chek-tool-for-qlikview-expressions/ but not in page itself.

      They would be treated at fullblown command-line tool. I've found earlier with qlikview load script parser that best way to deal with dollar sign expansion is to expand all variables as a first step of parsing command. So load script parser currently analyze whole load script and load all variable definitons and apply expansion where it required. For expression files it means that all expressions should be analyzed as a whole too.

      Delete
    3. Does the load script version support nesting of dollar sign expansion? For example:
      sum(Field_$(=if(a=b, 'This', $(vMyVar))))
      Although not very common, QlikView does support such nesting.

      Regards
      Matt

      Delete
    4. Nested dollar sign expressions per se are OK with qvs parser.
      In one of unit tests for example I check that script

      LET var1 = 1;
      TRACE $(var$(var1))$(var1);

      should transfor second line into TRACE 11; as a first step before parsing.
      Problem is what to do with $(=....) construct. It not expand something known into string - it evaluate arbitrary code. You should have interpreter - not parser to deal with it correctly.
      So I make some sort of compromise with constructs of such kind:
      In my load scripts analogues construct would probably looks like:

      LET fieldPart = if(a=b, 'This', $(vMyVar)));
      Sum(Field_$(fieldPart));

      In that case parser whould check that expression at the rigth side of LET command is valid expression, then assign some value to variable fieldPart - say fieldPart_ASSIGNED_VALUE. Then check second line after expansion
      Second line would look like Sum(Field_fieldPart_ASSIGNED_VALUE) - that is valid expression too.
      I'll probably treat $(=...) construct in same way - first shall check validity of internal expression then assign return value to something looking as identifier.




      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi Matt, great job and thanks for sharing this! I am wondering why you did not submit your language definition customization for QlikView to highlight.js website so it could be used from other blogging platforms / web sites.

    ReplyDelete
    Replies
    1. Hi,
      Glad you like it. My plan was, and still is, to do just that. I was completely new to highlight.js when I started playing with it as a possible tool to do QlikView syntax highlighting so kept it separate initially. I'll probably always keep a custom build of it though for things like my WordPress plugin as I have a couple of other non-highlight.js features in the pipeline for it.

      Regards
      Matt

      Delete
  4. Hey Matt, do you happen to have a tinyMCE flavour of this code? Just from a quick look, it seems that this is meant to provide syntax highlighting for page content but not inside an editor. Thanks!

    ReplyDelete