Shader syntax highlighting in Visual Studio 2013

If you edit shader code in Visual Studio 2013, you might like to use NShader to get syntax highlighting. NShader was originally written by Alexandre Mutel. His version is available here but it only supports VS2008, VS2010, and VS2012. Issam Khalil had forked it and added VS2013 support, as well as Unity shader highlighting.

I’ve forked Issam’s code and added a couple of features. The installer for the extension can be downloaded here. This installer can be used to install into both Visual Studio 2013 and 2015.

You can now override the file type detection by specifying, on the first line of a shader file, a comment like so:

// shadertype=<type>

where <type> is one of:

hlsl
glsl
cg
unity

This will force the file to use the specified syntax highlighter. This is case sensitive and must appear exactly as above. Otherwise if the shadertype tag is not present, the file extension will be used to decide what type of highlighting to use. The following extensions are recognised:

HLSL syntax highlighter – .fx, .fxh, .hlsl, .vsh, .psh, .fsh
GLSL syntax highlighter – .glsl, .frag, .vert, .fp, .vp, .geom, .xsh
CG syntax highlighter – .cg, .cgfx
Unity syntax highlighter – .shader, .cginc, .compute

The keyword mapping files that can be placed in %APPDATA%\NShader now override the built-in mappings. For example, if float is mapped as a keyword in the built-in mapping for GLSL, it can be changed to a type by adding the following line to %APPDATA%\NShader\GLSLKeywords.map:

TYPE=float

Multiple words can be specified on a single line by separating them with spaces or tabs. The zip file contains the built-in keyword mapping files as examples.

I’ve also added a separate colour setting for anything that is defined as a type. This should appear in Tools > Options > Environment > Fonts and Colors in the display items list for the text editor colours. Scroll down to ‘n’ and you should see all the NShader colour settings. The new setting is ‘NShader – Type’.

If you are having troubles with files not highlighting, try uninstalling NShader first via Tools > Extensions and Updates. Also make sure you restart Visual Studio after installing NShader!

52 Responses to “Shader syntax highlighting in Visual Studio 2013”

  1. Jan-Tore on Reply

    Great tool! :)
    Is it possible to make the extension highlight .comp files as well (Compute Shader for GLSL)?
    I tried adding the the following line at the top on a .comp file:
    // shadertype=
    But it didn’t hilghlight anything. All my .geom, .vert and .frag files work perfectly though.
    I’m using Visual Studio 2015 Community.

  2. Jan-Tore on Reply

    The shadertype didn’t make it into the comment because of the brackets. But I wrote glsl as shadertype.

  3. Sam on Reply

    Yeah unfortunately it only parses specific files (those with extensions mentioned in the post). I’ll update it to add the .comp extension, and see if I can find a way to dynamically add extensions somehow (maybe in the VS options).

  4. Sam on Reply

    Ok I’ve updated the two zip files. Let me know if that works. Actually I think you can use the 2015 version to install in 2013 as well but I haven’t fully tested that, so I updated both.

  5. Bastien on Reply

    Thank you very much.
    Is it possible to customize the color used ? I’m not very fan of the current ones.
    Anyway very good job :)

    • Sam on Reply

      Yep! You should be able to change the colours in Tools > Options > Fonts and Colors. Make sure you have “Text Editor” selected in “Show settings for:”. The NShader colours all start with “NShader” so just scroll down to ‘N’ in the list.

      If it doesn’t show up in there, try running devenv /setup. There seems to be a common problem of items not showing up in there with other plugins. If devenv /setup doesn’t work, try this suggestion for ReSharper; it might also work for NShader.

  6. Lukas on Reply

    Hi,

    I’m trying to install this extension from your link (for VS 2013 Ultimate), but received such error:
    “The extension: ‘NSShader’ requires administrative privilages in order to be uninstalled.”. Yes, I get it while instalation. I tried to change privilages for this package, also for VS, but without any results. Do you know how to handle this?

    Thanks,
    Lukas

    • Sam on Reply

      Hm it sounds like you have a version of NSShader installed already and it’s trying to uninstall it. You could try running the installer as admin (right-click on it, select “run as admin”) or uninstall it yourself within Visual Studio (but you’ll have to run VS as admin I think – again, right-click and select “run as admin”).

  7. matt gipson on Reply

    thanks for the extension to NShader, works great!

    i was wondering if you could add highlighting to semantics. even if its just a color entry that we could map to, that would be very helpful

  8. Johnny on Reply

    Thanks!
    I knew about NShader but i didn’t know someone forked it and added VS2013 support :D

  9. NewOpengl on Reply

    When installing it in msvc 2013 error is showing “the extension is already installed to all applicable products” how o fix it?

    • Sam on Reply

      Are you sure you don’t already have it or an older version installed? Check in the extension manager (Tools->Extension Manager) and uninstall any NShader you see in there, and then close VS.

      • NewOpengl on Reply

        It is there but I can not uninsall it. After I click unistall and restart VC it is still there. Is there any way to remove it manually?

        • Sam on Reply

          I’m not sure sorry. It probably lives somewhere in %USERPROFILE%\AppData\Local\Microsoft\VisualStudio\xx\Extensions where xx is the Visual Studio version. I reckon try uninstalling it, shut down VS, then find the extension directory and delete it. There might be some registry settings too, but hopefully deleting the files and restarting will force it to clean that up.

  10. ygwang on Reply

    It can not force the file to use the specified syntax highlighter when I add the comment // shadertype=

    Here is my file named “my.tesc”

    //shadertype=glsl
    #version 440

    layout (vertices = 3) out;

    in vec4 tessPosition_CS_in[];
    in vec4 tessColor_CS_in[];

    out vec4 tessPosition_ES_in[];
    out vec4 tessColor_ES_in[];

    void main(void)
    {
    tessPosition_ES_in[gl_InvocationID] = tessPosition_CS_in[gl_InvocationID];
    tessColor_ES_in[gl_InvocationID] = tessColor_CS_in[gl_InvocationID];

    gl_TessLevelInner[0] = 1.0;
    gl_TessLevelOuter[0] = 2.0;
    gl_TessLevelOuter[1] = 5.0;
    gl_TessLevelOuter[2] = 5.0;
    }

    • Sam on Reply

      The shadertype should be specified as “// shadertype=“, i.e. with a space after the opening comment. It looks like you don’t have a space after the opening comment, so try adding one and see if that fixes it.

      • Sam on Reply

        I just realised your file has an extension of .tesc which means NShader won’t be running on it. The ‘shadertype’ override only works if NShader already recognises the file from its extension. So that explains why it’s not working for you. I’m not sure how to make it work on arbitrary files, because Visual Studio requires you to register the plugin for specific file extensions. I’ll have a think about it.

  11. Privacy? on Reply

    I would prefer it if the numbers wouldn’t have a light blue syntax highlighting. It is way too bright. Something like purple would be better

  12. claude on Reply

    Hey, I was wondering if there was a way for me to specify more extensions for shader files. I tried to add the type comment at the top of my file but it didn’t work. This would be helpful for tessellation shaders… Perhaps these a properties file i could manually edit and add the extensions in..?
    Thx.

    • Sam on Reply

      Unfortunately not without building the extension yourself at the moment. VS requires the plugin to register itself for specific file extensions. I’m not sure how to make it dynamic; I’ll have a think about it and dig through the VS extension system!

      • Eva on Reply

        Hi,Sam. So… Could you add a “.usf” file extension as HLSL file type? This is the shader file type of Unreal Engine 4. Its syntax is the same as HLSL, so I can use NShader for syntax hightlighting. When I modify the “.usf” to “.hlsl”, it works good with NShader. Please add this extension into NShader. Thank you in advance!

  13. Gabriel on Reply

    I just begin learning about shaders in Unity, and this is awesome. Thank you!

  14. Anon on Reply

    Guys, if you want to support custom extensions, you can manually edit the .vsix file.
    The .vsix file is just a zip. So I unzipped it, looked for the syntax highlighting i wanted (.glsl).
    It appears in two places.

    Copy all the relevant lines for the first occurence from glsl and just past them below it, and change the extension i.e i pasted this to use “.vs” to get glsl highlighting:

    “vs”=dword:00000020
    “DisplayName”=”#115″
    “Package”=”{dd9b8cde-96a0-4442-bf6f-083a7f43d453}”
    [$RootKey$\Editors\{3224b0db-6280-470b-b57a-d6e31b8a5856}\Extensions]

    Do the same for the next occurence, for example I copy pasted renamed this:
    [$RootKey$\Languages\File Extensions\.vs]
    @=”{e1e045da-7e8d-4da1-94cc-93e9a1c1e289}”

    When done, right click on all the source files you unzipped and click add to archive, select ZIP format, and name extension .vsix and click compress.

    Install the modifed extension and it works.

Leave a Reply to Jie

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *