`?` mark in the Vue typescript file breaks syntax highlighting

[Morasiu]

Check that file File.vue

See the example below.

<template>
  <div class="choose-game">
    <div
      class="choose-game__user-game"
      v-for="userGame in userGamesDetails"
      :key="userGame.id"
    >
      <GameBox :game-logo-uri="userGame.gameLogoUrl" @click="onSelectGame(userGame.id)" :is-active="selectedGame?.id === userGame.id">
        <template #info>
          <div class="content">
            <div class="content__line">
              <p>{{ userGame.name }}</p>
            </div>
            <div class="content__line">
              <span class="content__line__label">Account:</span>
              <span>{{ userGame.accountName }}</span>
            </div>
            <div v-show="userGame.serverName" class="content__line">
              <span class="content__line__label">Server:</span>
              <span>{{ userGame.serverName }}</span>
            </div>
          </div>
        </template>
      </GameBox>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { UserGame, GameCompetitive } from '@/domains/user/services/profile/types';
import { getUserGames, getGamesCompetitive } from '@/domains/user/services/profile/api';
import GameBox from '@/domains/user/components/molecules/GameBox.vue';
export default defineComponent({
  name: 'ChooseGame',
  components: {
    GameBox,
  },
  emits: ['onSelectGame'],
  async setup(_, context) {
    const userGames = ref<UserGame[]>((await getUserGames()).data);
    const games = ref<GameCompetitive[]>((await getGamesCompetitive()).data);
    const selectedGame = ref<UserGame | undefined>();
    const getGameDetails = (gameId: string): GameCompetitive => {
      return games.value.find((game: GameCompetitive) => [game.id](http://game.id/) === gameId) as GameCompetitive;
    };
    const userGamesDetails = computed(() => {
      return userGames.value.map((userGame: UserGame) => {
        const gameDetails = getGameDetails(userGame.gameId);
        return {
          id: userGame.id,
          gameId: userGame.gameId,
          name: gameDetails.name,
          serverName: userGame.serverName,
          accountName: userGame.accountName,
          gameLogoUrl: userGame.imageGameLogoUri,
        };
      });
    });
    const onSelectGame = (userGameId: string) => {
      selectedGame.value = userGames.value.find((userGame: UserGame) => userGame.id === userGameId) as UserGame;
      context.emit('onSelectGame', selectedGame.value);
    };
    return {
      userGamesDetails,
      onSelectGame,
      selectedGame,
    };
  },
});
</script>
<style lang="scss" scoped>
@import '/src/assets/scss/_variables.scss';
.choose-game {
  display: flex;
  flex-wrap: wrap;
  &__user-game {
    padding: 0.5rem;
    &__actions {
      display: flex;
      flex: auto;
      flex-direction: column;
      justify-content: space-between;
      min-height: 5rem;
    }
  }
}
.content {
  &__line {
    display: flex;
    font-size: $font-size;
    &__label {
      font-weight: bold;
      margin-right: 0.3rem;
    }
  }
}
</style>

[xiaoxin-sky]

this pr(#18 ) has fixed the highlight problem. Also, you can use the repo directly.

[Morasiu]

Are you sure? I can still see that above I think