highlight.js - Githubissues

codeviolet commented 8 years ago

Hi. Could someone with the knowhow please submit this repository's highlight-js code to the main highlight.js repository? It would be great to see LSL added to the main project and available in the checkboxes on their download page here.

Note: I tried to build highlight.js by following their build guide but I ran into nodejs troubles after adding the lsl.js file in this repository. I can elaborate about my attempts if necessary but thought it may just be better if LSL was simply added to the main highlight.js repository.

buildersbrewery commented 8 years ago

Currently not at home. Will need to review the code next week before sending them a pull request. Will post status updates here regarding this issue.

buildersbrewery commented 8 years ago

@codeviolet were you planning on using this for a website or some third party? Should this be tested against some special case?

codeviolet commented 8 years ago

Thanks for your attention!

Not really a special case that I'm aware of.

The syntax highlighting is to be applied by the Code Snippet plugin for CKEditor, on a question2answer installation. CKEditor is the wysiwyg-editor used by the question2answer forum software.

For an example page on the actual website click here.

The LSL code on that page is currently using javascript syntax highlighting, but it would be nice to have LSL highlighting available because the site deals mostly with LSL.

The Code Snippet plugin for CKEditor includes a file named highlight.pack.js which can be replaced by a dynamically generated one at https://highlightjs.org/download

Therefore it seemed to me it would make sense if the work done here for LSL was moved towards being included as a checkbox there on the highlight.js download page.

Otherwise I will need to learn how I can add the LSL work on this repository to the main highlight.js package, and was not successful doing that so far. Thus requesting the expert to do it :)

buildersbrewery commented 8 years ago

[x] add test files
- buildersbrewery/linden-scripting-language@a265722
- buildersbrewery/linden-scripting-language@dd32641
- ~~replace current test file with the one from ajaxorg/ace~~
[x] check language against https://github.com/isagalaev/highlight.js/tree/master/src/languages
[x] check style against https://github.com/isagalaev/highlight.js/tree/master/src/styles
[x] check language against style
[x] check regular expressions against https://github.com/isagalaev/highlight.js/blob/master/src/highlight.js for re-use

buildersbrewery commented 8 years ago

@codeviolet Please see isagalaev/highlight.js#1191

buildersbrewery commented 8 years ago

Haven't gotten any feedback there. Will try to fix the PR on my own.

codeviolet commented 8 years ago

Apologies for lack of feedback, I could not make much of the Travis error message (and I'm not very familiar with highlight-js or nodejs). Should I try again to follow their build guide with your updates and see if I get a better/different result?

buildersbrewery commented 8 years ago

Uhm, I believe there is some stupid mistake somewhere. Going through their language guide right now to maybe find a clue.

buildersbrewery commented 8 years ago

Giving up for today. Feel free.

buildersbrewery commented 8 years ago

Latest commit passes tests.

/cc @codeviolet

buildersbrewery commented 8 years ago

@codeviolet

Reviewing the changes I had to make, I believe highlighting LSL with highlight.js will be fairly limited in regards to the visual feedback when viewing code with the scopes required there.

Did you try Ace Editor (see also their demo page) for your site? Github uses Ace and there are a few features, that might be welcome to users using your site such as multiple caret support (Ctrl + left mouse) as well as autocompletion and snippets via CtrlSpace. Most people don't know this, as it's not apparent from the UI (but I do, cause I updated LSL support there to include those features). I would recommend switching to Ace for your site and giving some tips in the UI when people enter LSL code as to how they can use multiple carets, autocompletion and snippets.

codeviolet commented 8 years ago

Thank you @buildersbrewery

I seek only basic lsl syntax highlighting for the question2answer install but will certainly keep Ace Editor in mind for future projects. question2answer natively supports CKEditor and I want to keep the install relatively unmodified for now.

When I merge your PR with the highlight-js code master branch and follow their build guide it now successfully compiles (unlike before) and results in a usable highlight.pack.js with lsl support, which happily replaces the original. yay

However, the lsl syntax highlighting seems to highlight code constants only like LINK_THIS, and not function names or variables. Do you know why? Here's a screenshot from highlight.js' /demo/index.html which results from following their build guide:

highlightjscapture

Certainly no rush on this and I'm glad to see the maintainer of highlight.js responsive to your PR and perhaps this will resolve itself in time.

buildersbrewery commented 8 years ago

Functions are now highlighted correctly.
Variables never had been in the LL Viewer afaik.

buildersbrewery commented 8 years ago

@codeviolet I'm done for now, I guess? This issue should close automatically when isagalaev/highlight.js#1191 is merged. You can review my code additions there if you choose the files changed tab. You can add your comments by clicking on the line numbers on the left. I have copied the code to the highlight-js subdirectory here as well. The highlighting issues you described in your last post should also be dependent upon which color scheme you are currently using, not just the highlighting files from isagalaev/highlight.js.

buildersbrewery commented 8 years ago

@codeviolet It seems highlight.js had previously supported highlighting variable names, but then dropped support at a later point again.

codeviolet commented 8 years ago

Expecting variables to be highlighted was my bad, no worries there. But I had wondered why I wasn't seeing functions highlighted, even with your latest changes. But you're right, it does work if I tinker with the css!

However, I believe all the other languages do work with the existing styles included with isagalaev/highlight.js, which are intended to be non-lanuage specific. I think it would make more sense for lsl.js to use the css classes found in their existing styles, so it works with all their existing styles. I think that is confirmed by @isagalaev in his comment here, but please let me know your thoughts.

Also, please let me know the best way to donate to the BB as I'd like to contribute in gratitude for your doing all this. I also hope others will be able to use highlight.js for simple lsl highlighting on blogs, etc if they wish, although there are other options that exist like GeSHi.

buildersbrewery commented 8 years ago

Only used the classes from the info page as requested. The options were fairly limited for languages like LSL.

Donations are gladly accepted by the group owners. I believe you'd get the fastest response nowadays from Sentinel Resident in case you need more info. Haven't been in-world much for the last two years.

codeviolet commented 8 years ago

Indeed you did, though the inbuilt lsl functions are not being set to an appropriate class to be colored by the default styles as is with the other languages (e.g. by class="hljs-keyword" or class="hljs-title"). Though you are probably aware of a good reason. Will close issue unless you see a way for inbuilt lsl functions to be highlighted by the default styles?

In case it helps, here is the demo code generated for LSL, versus ActionScript, where in ActionScript all hljs-class are also recognized as hljs-keyword, but not so in the LSL.

<code class="lsl hljs"><span class="hljs-class">default</span>
{
    <span class="hljs-class">state_entry</span>()
    {
        <span class="hljs-function">llSay</span>(<span class="hljs-built_in">PUBLIC_CHANNEL</span>, <span class="hljs-string">"Hello, Avatar!"</span>);
    }

    <span class="hljs-class">touch_start</span>(<span class="hljs-type">integer</span> num_detected)
    {
        <span class="hljs-function">llSay</span>(<span class="hljs-built_in">PUBLIC_CHANNEL</span>, <span class="hljs-string">"Touched."</span>);
    }
}
</code>

ActionScript

<code class="actionscript hljs"><span class="hljs-class"><span class="hljs-keyword">package</span> <span class="hljs-title">org</span>.<span class="hljs-title">example</span>.<span class="hljs-title">dummy</span> {</span>
    <span class="hljs-meta"><span class="hljs-meta-keyword">import</span> org.dummy.*;</span>

    <span class="hljs-comment">/*define package inline interface*/</span>
    <span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">interface</span> <span class="hljs-title">IFooBarzable</span> </span>{
        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span><span class="hljs-params">(<span class="hljs-rest_arg">... pairs</span>)</span>:Array</span>;
    }

    <span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FooBar</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">IFooBarzable</span> </span>{
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> cnt:uint = <span class="hljs-number">0</span>;
        <span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> bar:String;

        <span class="hljs-comment">//constructor</span>
        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">TestBar</span><span class="hljs-params">(bar:String)</span>:void </span>{
            bar = bar;
            ++cnt;
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span><span class="hljs-params">(<span class="hljs-rest_arg">... pairs</span>)</span>:Array </span>{
            pairs.push(bar);
            <span class="hljs-keyword">return</span> pairs;
        }
    }
}</code>

codeviolet commented 8 years ago

The colors are all working well for me with the latest round of css class changes. Thank you @buildersbrewery for going the extra mile to get it working. Looking forward to seeing LSL as an option on the highlight.js custom package generator page once they merge in your PR, which should make it easy for anyone to use.

buildersbrewery commented 8 years ago

@codeviolet I just noticed that the colors of the highlight.js theme on your site differ from what @lindenlab is using, compare the table below:

part of LSL grammar	hexadecimal	RGB Decimal	RGB Percentage
default text	`#000000`	`0, 0, 0`	`0, 0, 0`
comments	`#cd4d26`	`205, 77, 38`	`0.804, 0.302, 0.149`
states	`#801a4d`	`128, 26, 77`	`0.502, 0.102, 0.302`
events	`#004d80`	`0, 77, 128`	`0, 0.302, 0.502`
functions	`#820124`	`130, 1, 36`	`0.510, 0.004, 0.141`
integer constants	`#1a1a80`	`26, 26, 128`	`0.102, 0.102, 0.502`
string constants	`#1a4d80`	`26, 77, 128`	`0.102, 0.302, 0.502`
float constants	`#4d1a80`	`77, 26, 128`	`0.302, 0.102, 0.502`
vector & rotation constants	`#663366`	`102, 51, 102`	`0.400, 0.200, 0.400`
operators	`#000000`	`0, 0, 0`	`0, 0, 0`
storage type	`#1a4d1a`	`26, 77, 26`	`0.102, 0.302, 0.102`
strings	`#003300`	`0, 51, 0`	`0, 0.200, 0`
numbers	`#ff0000`	`255, 0, 0`	`1, 0, 0`
keywords	`#0000cd`	`0, 0, 205`	`0, 0, 0.804`

codeviolet commented 8 years ago

Thanks @buildersbrewery that's a good table to know about. I tweaked the theme on my site to get a little closer to it. I had been using the highlight.js googlecode theme before. Given the simple use it's being put to I think it's fine. It's much nicer than it was before your help.

I notice that LSL is still not an option on the highlight.js custom package generator page. Hope @isagalaev may eventually add it but it's obviously not top priority. I just assumed it might have made its way there since your work was merged :)

buildersbrewery commented 8 years ago

@codeviolet LSL is listed on highlightjs.org/download as Linden Scripting Language.

codeviolet commented 8 years ago

That's great! I am very glad it's there. Apologies, I was searching for LSL, as I think many would have.

buildersbrewery / linden-scripting-language

highlight.js #6