<beginfold id='1'><!--</beginfold id='1'>
    SPDX-FileCopyrightText: 2024 James Zuccon
    SPDX-License-Identifier: MIT
<endfold id='1'>--></endfold id='1'>
<beginfold id='1'><!--</beginfold id='1'>
    This uses HTML syntax as a base with some customizations for handling Vue-Template-specific syntax.
    It uses the following third-party scripts.
    Script:
    - JS (default - no lang attribute)
    - Typescript (lang="ts")
    Style:
    - CSS (default - no lang attribute)
    - SASS (lang="sass")
    - SCSS (lang="scss")
    NOTE: The tests below test attributes before/after the lang="..." attribute as doing this requires pushing a new context.
          In practice, a Vue Template would generally only contain zero or one <template>, <script> or <style> blocks.
<endfold id='1'>--></endfold id='1'>

<beginfold id='1'><!--</beginfold id='1'> Template without attributes <endfold id='1'>--></endfold id='1'>
<template>
    <<beginfold id='2'>div</beginfold id='2'>>
        <beginfold id='1'><!--</beginfold id='1'> Vue event-shorthand should support "@" prefix <endfold id='1'>--></endfold id='1'>
        <p @click="test">Testing HTML</p>
        <p>{{ someVar }}</p>
        <beginfold id='1'><!--</beginfold id='1'> Important to test this as it is used at root also <endfold id='1'>--></endfold id='1'>
        <template>
            Nested template tag
        </template>
    </<endfold id='2'>div</endfold id='2'>>
</template>

<beginfold id='1'><!--</beginfold id='1'> Template with attributes <endfold id='1'>--></endfold id='1'>
<template loneAttribute attribute="value">
    <<beginfold id='2'>div</beginfold id='2'>>
        <beginfold id='1'><!--</beginfold id='1'> Vue event-shorthand should support "@" prefix <endfold id='1'>--></endfold id='1'>
        <p @click="test">Testing HTML</p>
        <p>{{ someVar }}</p>
        <beginfold id='1'><!--</beginfold id='1'> Important to test this as it is used at root also <endfold id='1'>--></endfold id='1'>
        <template>
            Nested template tag
        </template>
    </<endfold id='2'>div</endfold id='2'>>
</template>

<beginfold id='1'><!--</beginfold id='1'> Style without attributes <endfold id='1'>--></endfold id='1'>
<beginfold id='1'><!--</beginfold id='1'> This references the syntax highlighting file for CSS. <endfold id='1'>--></endfold id='1'>
<<beginfold id='3'>style</beginfold id='3'>>
	body <beginfold id='4'>{</beginfold id='4'>
		font: 100% Helvetica, sans-serif;
		color: #333;
	<endfold id='4'>}</endfold id='4'>
</<endfold id='3'>style</endfold id='3'>>

<beginfold id='1'><!--</beginfold id='1'> Style with attributes <endfold id='1'>--></endfold id='1'>
<beginfold id='1'><!--</beginfold id='1'> This references the syntax highlighting file for CSS. <endfold id='1'>--></endfold id='1'>
<<beginfold id='3'>style</beginfold id='3'> loneAttribute attribute="value">
	body <beginfold id='4'>{</beginfold id='4'>
		font: 100% Helvetica, sans-serif;
		color: #333;
	<endfold id='4'>}</endfold id='4'>
</<endfold id='3'>style</endfold id='3'>>

<beginfold id='1'><!--</beginfold id='1'> Style lang="sass" without attributes <endfold id='1'>--></endfold id='1'>
<beginfold id='1'><!--</beginfold id='1'> This references the syntax highlighting file for SASS. <endfold id='1'>--></endfold id='1'>
<<beginfold id='3'>style</beginfold id='3'> lang="sass">
<indentfold>	// single-line comment to make sure it's SASS and not CSS
</indentfold>	$font-stack: Helvetica, sans-serif
	$primary-color: #333

	body
		font: 100% $font-stack
		color: $primary-color
</<endfold id='3'>style</endfold id='3'>>

<beginfold id='1'><!--</beginfold id='1'> Style lang="sass" with attributes <endfold id='1'>--></endfold id='1'>
<beginfold id='1'><!--</beginfold id='1'> This references the syntax highlighting file for SASS. <endfold id='1'>--></endfold id='1'>
<<beginfold id='3'>style</beginfold id='3'> beforeLangLoneAttribute beforeLangAttribute="asd" lang="sass" afterLangLoneAttribute afterLangAttribute="asd">
<indentfold>	// single-line comment to make sure it's SASS and not CSS
</indentfold>	$font-stack: Helvetica, sans-serif
	$primary-color: #333

	body
		font: 100% $font-stack
		color: $primary-color
</<endfold id='3'>style</endfold id='3'>>

<beginfold id='1'><!--</beginfold id='1'> Style lang="scss" without attributes <endfold id='1'>--></endfold id='1'>
<beginfold id='1'><!--</beginfold id='1'> This references the syntax highlighting file for SCSS. <endfold id='1'>--></endfold id='1'>
<<beginfold id='3'>style</beginfold id='3'> lang="scss">
	// single-line comment to make sure it's SCSS and not CSS
	$font-stack: Helvetica, sans-serif
	$primary-color: #333

	body <beginfold id='5'>{</beginfold id='5'>
		font: 100% $font-stack;
		color: $primary-color;
    <endfold id='5'>}</endfold id='5'>
</<endfold id='3'>style</endfold id='3'>>

<beginfold id='1'><!--</beginfold id='1'> Style lang="scss" with attributes <endfold id='1'>--></endfold id='1'>
<beginfold id='1'><!--</beginfold id='1'> This references the syntax highlighting file for SCSS. <endfold id='1'>--></endfold id='1'>
<<beginfold id='3'>style</beginfold id='3'> beforeLangLoneAttribute beforeLangAttribute="asd" lang="scss" afterLangLoneAttribute afterLangAttribute="asd">
	// single-line comment to make sure it's SCSS and not CSS
	$font-stack: Helvetica, sans-serif
	$primary-color: #333

	body <beginfold id='5'>{</beginfold id='5'>
		font: 100% $font-stack;
		color: $primary-color;
    <endfold id='5'>}</endfold id='5'>
</<endfold id='3'>style</endfold id='3'>>

<beginfold id='1'><!--</beginfold id='1'> Script without attributes <endfold id='1'>--></endfold id='1'>
<beginfold id='1'><!--</beginfold id='1'> This references the syntax highlighting file for Javascript. <endfold id='1'>--></endfold id='1'>
<<beginfold id='6'>script</beginfold id='6'>>
// Single-line comment
const a = 'abc';
</<endfold id='6'>script</endfold id='6'>>

<beginfold id='1'><!--</beginfold id='1'> Script with attributes <endfold id='1'>--></endfold id='1'>
<beginfold id='1'><!--</beginfold id='1'> This references the syntax highlighting file for Javascript. <endfold id='1'>--></endfold id='1'>
<<beginfold id='6'>script</beginfold id='6'> loneAttribute attribute="value">
// Single-line comment
const a = 'abc';
</<endfold id='6'>script</endfold id='6'>>

<beginfold id='1'><!--</beginfold id='1'> Script lang="ts" without attributes <endfold id='1'>--></endfold id='1'>
<beginfold id='1'><!--</beginfold id='1'> This references the syntax highlighting file for Typescript. <endfold id='1'>--></endfold id='1'>
<<beginfold id='6'>script</beginfold id='6'> lang="ts">
// Single-line comment
const a = 'abc';

// Typescript
interface SomeInterface <beginfold id='7'>{</beginfold id='7'>
    value: string;
<endfold id='7'>}</endfold id='7'>
</<endfold id='6'>script</endfold id='6'>>

<beginfold id='1'><!--</beginfold id='1'> Script lang="ts" with attributes <endfold id='1'>--></endfold id='1'>
<beginfold id='1'><!--</beginfold id='1'> This references the syntax highlighting file for Typescript. <endfold id='1'>--></endfold id='1'>
<<beginfold id='6'>script</beginfold id='6'> beforeLangLoneAttribute beforeLangAttribute="asd" lang="ts" afterLangLoneAttribute afterLangAttribute="asd">
// Single-line comment
const a = 'abc';

// Typescript
interface SomeInterface <beginfold id='7'>{</beginfold id='7'>
    value: string;
<endfold id='7'>}</endfold id='7'>
</<endfold id='6'>script</endfold id='6'>>
