Search code examples
jqueryvisual-studio-codecoldfusionsyntax-highlighting

How do I utilize both Coldfusion and Jquery Syntax highlighting in VScode?

I'm trying to code in Coldfusion and jQuery in VScode with the Coldfusion, Adobe Coldfusion Builder, and jQuery Code Snippets extensions. I'm trying to get the syntax highlighting to play nice with each other. The issue arises when I call any id element at the head section for jquery. Since it uses a single hash symbol the extension throws an invalid token error and highlights the rest of the code as a comment.

Here's an example:

<cfoutput>
<!DOCTYPE html>
 <html lang="en">
  <head>
    
    <!-- bunch of coldfusion code -->
    
    <script <!-- jQuery CDN here --> > </script>
    <script>
</cfoutput>

        $(document).ready(function(){
            $("#submitButton").click(function(){ <!-- token error here everything below is highlighted brown-->

            alert("Hello World!");

            });
        });

    </script>
<cfoutput>
 </head>
 <body>

    <cfset buttonMessage = 'Click me!'>
    <button button type="button" id='submitButton'> #buttonMessage# </button>

 </body>
</cfoutput>

Is there any way to continue proper syntax highlighting after the token error? Instead of squeezing all my jQuery scripts up at the top before any CFoutput tags?

Tried turning off coldfusion extensions. That just turned off all my syntax highlighting. Seems like the only way is to put all jQuery scripts nefore any cfoutput tags.

Solution

  • Took me awhile but I figured it out. Wrapping the jQuery code AS WELL as the jQuery CDN source with cfoutput closing and opening tags solved the problem for me.

    <cfoutput>
 <head>

    <!-- bunch of coldfusion code -->

    </cfoutput>
    
    <script <!-- jQuery CDN here --> > </script>
    
    <cfoutput>

     <!--- bunch of coldfusion code -->

    </cfoutput>
    <script>

     <!-- jQuery code here -->

    </script>
    <cfoutput>
 </head>
 <body>
 </body>
</cfoutput>