In this function, syntax highlighting for constants only works correctly at a specific scroll level.

[mybearworld]

The following code:

<script setup lang="ts">












const loadingMore = ref(false);
const loadMore = async () => {
  if (loadingMore.value) {
    return;
  }
  loadingMore.value = true;
  const page =
    newPostsAmount.value < 1
      ? 1
      : Math.floor(newPostsAmount.value / POSTS_PER_REQUESTS) + 1;
  const postsToRemove =
    newPostsAmount.value <= -25
      ? 0
      : newPostsAmount.value < 0
        ? POSTS_PER_REQUESTS + (newPostsAmount.value % POSTS_PER_REQUESTS)
        : newPostsAmount.value % POSTS_PER_REQUESTS;
  const response = await getResponseFromAPIRequest(
    requestURL + `&page=${page}`,
    {
      auth: true,
      schema: postsSchema,
    },
  );
  if ("status" in response) {
    await dialogStore.alert(t("loadMoreFail", { status: response.status }));
    return;
  }
  const newPosts = response.autoget.slice(postsToRemove);
  posts.value.push(...newPosts);
  newPostsAmount.value += newPosts.length;
  loadingMore.value = false;
  stopShowingLoadMore.value = response.pages === page;
};
</script>

<template>{{}}</template>

Looks like this when not scrolled:

But like this when scrolled:

More new lines require more scrolling to get the constants to appear correctly.

I've tried removing several statements, and they all caused this not to happen, and to always highlight the constants properly (assuming the mustaches are present, #3934).

[johnsoncodehk]

Thanks for such a good reproductions!