Custom Javascript block highlighting


Recently started using Atom so still getting things configured and generally lost in how to do so. I’m working on a platform that runs server side JS and the indicator for these blocks are <% %> rather than tags. I have the file type association using HTML style syntax highlighting but it won’t properly color these server side js blocks at all. How can I define that inside of <% %> should be treated like Javascript? Thanks!


Usually if atom doesn’t do something out-of-the-box, there’s a package you can install to do it. What JS server is your environment using? Search for a package using that name.


I believe it is using nodejs. Clearly I’m not an expert but I don’t really need new highlighting “rules” as the code is all just javascript. It’s just that the indicator that a block should be highlighted as javascript is not the “script” tags but <% %>. Maybe that doesn’t preclude a package from solving my issue but it feels like I just need to be able to say "treat <% as if it was ‘script’ " somewhere.

Thanks for your help.


Just realized that my less-than script greater-than is being stripped out of the post so some clarity issues exist in my posts…


You actually do need new highlighting rules. It’s easy to create a grammar that “wraps” an existing grammar like so and matches the syntax of the file overall, then switches to the embedded language when it gets there. I can help make this happen, but first: is the syntax of the overall file associated with any particular framework?


Well, the file extension is ssp and is written for a Netsuite web application. The platform for the app is Backbone,js. Most of the file types are pretty straightforward such as the .ss file type. Those can also include the server side JS indicator <% but since they are highlighted as .js files already it works fine. I think the only issue are the .ssp files which are highlighted as HTML but need the <% sections to be treated as Javascript. Not sure that is answering your question. The end result is I want to designate <% %> code blocks to be highlighted as javascript for files with the extension .ssp.


Is this a custom thing or is there documentation about it online?


I’m not sure what documentation is available publicly. Netsuite is an omnichannel ERP provider. I’m thinking most of the docs about the particular web application/framework/platform is password protected.


I mean, if I can’t get this highlighting done fairly easily, it’s not the end of the world. Most of the work is done in files that do highlight properly. I just figured somewhere in the config I could say <% = <script and it would highlight as desired.


Like I said, it’s very easy. To install that, you can just jump into the command line and use apm install damnedscholar/language-ssp, or you can clone the repo and use apm link to create a symlink from your package folder to where the code is.


Awesome. Thanks for your help :slight_smile:


No problem. :slight_smile: