Ending tag not recognized

[Betanu701]

Steps to reproduce:

` <% if(foo) { %>

---

    <h3>Test Area</h3>
    <p>
      <a class="btn-sm" href="/test/testpage">Test Page</a>
    </p>
    <% } %>

`

📝 Note: Remember to link to a repository or upload a code snippet that reproduces the issue as an attachment (or a code block if it’s short) to this issue: https://help.github.com/en/articles/file-attachments-on-issues-and-pull-requests

<%# short code snippet that reproduces the issue goes here %>

Expected result:

The ending tag should be blue.

[ExE-Boss]

Does this occur on version 4.4 or latest master?

[Betanu701]

Latest master, It was happening before the update as well. I want to say this just started happening (before any of our updates). This code has been in my main program for a while and has worked fine. Perhaps it is something with the latest VSCode that messed it up. Perhaps the solution is to tell source.js to end on regex \s+(%>) something along those lines.

This is my VSCode I am running.

[andyli]

Minimal example:

<% if (true) { %> abc <% } %>

The last %> is not highlighted correctly.

My ejs extension info:

Name: EJS language support
Id: digitalbrainstem.javascript-ejs-support
Description: 2018 - EJS language support for Visual Studio Code.
Version: 0.5.0
Publisher: DigitalBrainstem
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=DigitalBrainstem.javascript-ejs-support

[ExE-Boss]

You can do:

<% if (true) { %> abc <% }
%>

Which fixes it.

---

The following is also broken:

<% if (true) { 'js code' } %>

This means that the cause is probably something in JavaScript.

[mattschuette]

But reformatting my code is not a fix for a code formatter. In fact,

<% if () { %>
<% } %>

or even just

<% if () {} %>

while not really valid, are sufficient to exhibit the problem, where

<% for () { %>
<% } %>

and

<% while () { %>
<% } %>

(or those in one line) are pretty minimal snippets that don't break the formatting. I feel like this has something to do with how if blocks are handled.

EDIT: Just realized this works:

<% if (){} %>

It really seems to need no space between the ending paren and opening brace. Again, I'd rather not work around that, but that seems to be unique to if statements.

[Betanu701]

Just published a new update. It is now "html" with javascript and ejs tags injected into it. All the above should be fixed.

[guilhermeoc97]

Still broken here. Latest version (1.1.0) and VSCode version 1.37.1

EDIT: Should probably note that it was working before, when the extension had a separate language mode.

[ExE-Boss]

Yeah, this change to injecting into HTML also broke:

<%
// Inserts a link to an in-page section, given the section name.
//
// Parameters:
//  $0  Anchor name; you may use spaces here instead of underscores -- these
//      are converted for you.
//  $1  (optional) Text to display instead of the anchor name itself.
//
// Examples:
//  {{anch("Some section's title")}}
//  {{anch("Another section name", "the information elsewhere in this article.")}}

var text = $1 || $0;
var anchor = '#' + string.replace($0, " ", "_");

%><a href="<%- anchor %>"><%- text %></a>

highlighting is completely broken from var anchor:

https://github.com/mdn/kumascript/blob/master/macros/anch.ejs

[Betanu701]

This is what I am seeing. I am not sure where the issue lies.

[Betanu701]

Edit: Never mind. I am able to reproduce this. I'm working on a fix.

@guilhermeoc97 can you provided the entire file? To me it looks like something is broken above your snippet.

[guilhermeoc97]

Sure, here it is:

<%- include("header") %>
<div class="container-fluid">
    <div class="row text-center">
        <h1 class="col">NetSpeed</h1>
    </div>
    <div class="row text-center">
        <h2 class="col">Test history</h2>
    </div>
    <div class="table-responsive">
        <table class="table table-hover table-sm">
            <thead class="thead-light text-center">
                <tr>
                    <th>ID</th>
                    <th>Date</th>
                    <th>Average download speed</th>
                    <th>Measured download speed</th>
                    <th>Average upload speed</th>
                    <th>Measured upload speed</th>
                </tr>
            </thead>
            <tbody class="text-center">
                <% rows.forEach(value => { %>
                    <tr>
                        <td><%= value.id %></td>
                        <td><%= moment(value.date).locale(locale).format("LLL") %></td>
                        <td><%= (value.avgDownload * 8).toFixed(2) %> Mbps</td>
                        <td><%= (value.download * 8).toFixed(2) %> Mbps</td>
                        <td><%= (value.avgUpload * 8).toFixed(2) %> Mbps</td>
                        <td><%= (value.upload * 8).toFixed(2) %> Mbps</td>
                    </tr>
                <% }); %>
            </tbody>
        </table>
        <a class="btn btn-primary" role="button" href="/history/all/<%= count %> %>">Início</a>
        <% if (hasMorePages) { %>
            <a class="btn btn-primary" role="button" href="/history/all/<%= count %>/<%= rows.reverse()[0].id %>">Próximo</a>
        <% } %>
    </div>
</div>
<%- include("footer") %>

[Betanu701]

Thanks! I was able to get the first 2 taken care of. I am still working on the last one.

[rmgreenstreet]

Has this been fixed yet? I'm seeing pretty much the same thing: Closing ejs %> tag is not highlighted on the first line (ignore the tooltip for 'input'). I believe it may be causing the issue down in the <script> tag below as well, where the first line declaring the function name is not highlighted, since the editor believes the original ejs line was not terminated. I'm unclear on whether this is purely a cosmetic thing within the editor itself, or if it is in turn causing an issue where the code in the <script> tag seems to not be run on the page.

<%- include("../partials/header.ejs") %>

<h1>Edit Post</h1>
<form action="/posts/<%= post._id %>?_method=put" method="post" enctype="multipart/form-data" id="postEditForm">
    <div class="form-group">
        <label for="post[title]">Title</label>
        <input type="text" name="post[title]" value="<%= post.title %>">
    </div>
    <div class="form-group">
        <label for="post[price]">Price</label>
        <input type="number" step=".01" name="post[price]" value="<%= post.price %>">
    </div>
    <div class="form-group">
        <label for="post[description">Description</label>
        <textarea name="post[description]" ><%= post.description %></textarea>
    </div>
    <div class="form-group">
        <label for="post[location">Location</label>
        <input type="text" name="post[location]" value="<%= post.location %>">
    </div>
    <% post.images.forEach(function(image,i){ %>
        <div class="editImage card" style="width:18rem;">
            <img src="<%= image.url %>" width="100px" class="card-img-bottom">
            <div class="card-body">
                <label for="image<%= i %>">
                    Delete?
                </label>
                <input type="checkbox" class="imageToDelete" id="image<%= i %>" name="imageToDelete[]" value="<%= image.publicId %>"></div>
        </div>
    <% }); %>
    <div class="form-group">
        <label for="image">Images</label>
        <input type="file" name="image" multiple="multiple" accept="images/*" id="imagesToUpload">
    </div>
    <button type="submit">
        Submit
    </button>
</form>

<script>
    function checkUploads() {
        //find post edit form
        let postEditForm = document.getElementById('postEditForm');
        //add submit listener to postEditForm
        postEditForm.addEventListener('submit', (event) => {
            //find number of images to upload
            let imagesToUpload = document.getElementById('imagesToUpload').length;
            //find number of existing images
            let existingImages = document.querySelectorAll('.imageToDelete').length;
            //ind total number of potential deletions
            let imagesToDelete = document.querySelectorAll('.imageToDelete:checked').length;
            let newTotal=existingImages-imageDeletions+imagesToUpload;
            //figure out if the form can be submitted or not
            if(newTotal > 4) {
                event.preventDefault();
                let removalAmt = newTotal -4;
                alert(`A post can have a maximum of 4 images. Please remove at least ${removalAmt} image${removalAmt === 1 ? 's' : ''}!`);
            }
        });
    }
</script>

<%- include("../partials/footer.ejs") %>

[ExE-Boss]

@rmgreenstreet That is only a display issue with the TextMate‑based grammar used by most editors and GitHub.

It has nothing to do with how EJS parses and processes the file.

---

P.S.: I’ve added syntax highlighting to your comment.

[Betanu701]

@rmgreenstreet If you want, I have some updates in the Revamp-ejs Branch. Feel free to load this into your own environment and give it a test run. This is still a work in progress, but should fix many of your issues.

[rmgreenstreet]

Thanks! I appreciate the response, and after some rubber-ducking found my actual issue. Like you say, the only thing this affects is the display within the editor. No real issue on my end :)

[Betanu701]

This has been fixed in version 1.2