<Comment><!--</Comment><br/>
<Comment>    </Comment><SPDX Tag>SPDX-FileCopyrightText:</SPDX Tag><Comment> 2024 James Zuccon</Comment><br/>
<Comment>    </Comment><SPDX Tag>SPDX-License-Identifier:</SPDX Tag><SPDX Value> </SPDX Value><SPDX License>MIT</SPDX License><br/>
<Comment>--></Comment><br/>
<Comment><!--</Comment><br/>
<Comment>    This uses HTML syntax as a base with some customizations for handling Vue-Template-specific syntax.</Comment><br/>
<Comment>    It uses the following third-party scripts.</Comment><br/>
<Comment>    Script:</Comment><br/>
<Comment>    - JS (default - no lang attribute)</Comment><br/>
<Comment>    - Typescript (lang="ts")</Comment><br/>
<Comment>    Style:</Comment><br/>
<Comment>    - CSS (default - no lang attribute)</Comment><br/>
<Comment>    - SASS (lang="sass")</Comment><br/>
<Comment>    - SCSS (lang="scss")</Comment><br/>
<Comment>    </Comment><Alert Level 3>NOTE</Alert Level 3><Comment>: The tests below test attributes before/after the lang="..." attribute as doing this requires pushing a new context.</Comment><br/>
<Comment>          In practice, a Vue Template would generally only contain zero or one <template>, <script> or <style> blocks.</Comment><br/>
<Comment>--></Comment><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Template without attributes --></Comment><br/>
<Element Symbols><</Element Symbols><Element>template</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>    </Normal Text><Element Symbols><</Element Symbols><Element>div</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>        </Normal Text><Comment><!-- Vue event-shorthand should support "@" prefix --></Comment><br/>
<Normal Text>        </Normal Text><Element Symbols><</Element Symbols><Element>p</Element><Attribute> @click</Attribute><Attribute Separator>=</Attribute Separator><Value>"test"</Value><Element Symbols>></Element Symbols><Normal Text>Testing HTML</Normal Text><Element Symbols></</Element Symbols><Element>p</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>        </Normal Text><Element Symbols><</Element Symbols><Element>p</Element><Element Symbols>></Element Symbols><Normal Text>{{ someVar }}</Normal Text><Element Symbols></</Element Symbols><Element>p</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>        </Normal Text><Comment><!-- Important to test this as it is used at root also --></Comment><br/>
<Normal Text>        </Normal Text><Element Symbols><</Element Symbols><Element>template</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>            Nested template tag</Normal Text><br/>
<Normal Text>        </Normal Text><Element Symbols></</Element Symbols><Element>template</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>    </Normal Text><Element Symbols></</Element Symbols><Element>div</Element><Element Symbols>></Element Symbols><br/>
<Element Symbols></</Element Symbols><Element>template</Element><Element Symbols>></Element Symbols><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Template with attributes --></Comment><br/>
<Element Symbols><</Element Symbols><Element>template</Element><Attribute> loneAttribute attribute</Attribute><Attribute Separator>=</Attribute Separator><Value>"value"</Value><Element Symbols>></Element Symbols><br/>
<Normal Text>    </Normal Text><Element Symbols><</Element Symbols><Element>div</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>        </Normal Text><Comment><!-- Vue event-shorthand should support "@" prefix --></Comment><br/>
<Normal Text>        </Normal Text><Element Symbols><</Element Symbols><Element>p</Element><Attribute> @click</Attribute><Attribute Separator>=</Attribute Separator><Value>"test"</Value><Element Symbols>></Element Symbols><Normal Text>Testing HTML</Normal Text><Element Symbols></</Element Symbols><Element>p</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>        </Normal Text><Element Symbols><</Element Symbols><Element>p</Element><Element Symbols>></Element Symbols><Normal Text>{{ someVar }}</Normal Text><Element Symbols></</Element Symbols><Element>p</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>        </Normal Text><Comment><!-- Important to test this as it is used at root also --></Comment><br/>
<Normal Text>        </Normal Text><Element Symbols><</Element Symbols><Element>template</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>            Nested template tag</Normal Text><br/>
<Normal Text>        </Normal Text><Element Symbols></</Element Symbols><Element>template</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>    </Normal Text><Element Symbols></</Element Symbols><Element>div</Element><Element Symbols>></Element Symbols><br/>
<Element Symbols></</Element Symbols><Element>template</Element><Element Symbols>></Element Symbols><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Style without attributes --></Comment><br/>
<Comment><!-- This references the syntax highlighting file for CSS. --></Comment><br/>
<Element Symbols><</Element Symbols><Element>style</Element><Element Symbols>></Element Symbols><br/>
<Normal Text>	</Normal Text><Selector Tag>body</Selector Tag><Normal Text> </Normal Text><Block Symbol>{</Block Symbol><br/>
<Normal Text>		</Normal Text><Property>font</Property><Property Separator>:</Property Separator><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><Normal Text> Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>		</Normal Text><Property>color</Property><Property Separator>:</Property Separator><Normal Text> </Normal Text><Color>#333</Color><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>	</Normal Text><Block Symbol>}</Block Symbol><br/>
<Element Symbols></</Element Symbols><Element>style</Element><Element Symbols>></Element Symbols><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Style with attributes --></Comment><br/>
<Comment><!-- This references the syntax highlighting file for CSS. --></Comment><br/>
<Element Symbols><</Element Symbols><Element>style</Element><Attribute> loneAttribute attribute</Attribute><Attribute Separator>=</Attribute Separator><Value>"value"</Value><Element Symbols>></Element Symbols><br/>
<Normal Text>	</Normal Text><Selector Tag>body</Selector Tag><Normal Text> </Normal Text><Block Symbol>{</Block Symbol><br/>
<Normal Text>		</Normal Text><Property>font</Property><Property Separator>:</Property Separator><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><Normal Text> Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>		</Normal Text><Property>color</Property><Property Separator>:</Property Separator><Normal Text> </Normal Text><Color>#333</Color><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>	</Normal Text><Block Symbol>}</Block Symbol><br/>
<Element Symbols></</Element Symbols><Element>style</Element><Element Symbols>></Element Symbols><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Style lang="sass" without attributes --></Comment><br/>
<Comment><!-- This references the syntax highlighting file for SASS. --></Comment><br/>
<Element Symbols><</Element Symbols><Element>style</Element><Attribute> lang=</Attribute><Value>"sass"</Value><Element Symbols>></Element Symbols><br/>
<Normal Text>	</Normal Text><Comment>// single-line comment to make sure it's SASS and not CSS</Comment><br/>
<Normal Text>	</Normal Text><Variable>$font-stack</Variable><Normal Text>: Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
<Normal Text>	</Normal Text><Variable>$primary-color</Variable><Normal Text>: </Normal Text><Color>#333</Color><br/>
<Normal Text></Normal Text><br/>
<Normal Text>	body</Normal Text><br/>
<Normal Text>		</Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Normal Text> </Normal Text><Variable>$font-stack</Variable><br/>
<Normal Text>		</Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$primary-color</Variable><br/>
<Element Symbols></</Element Symbols><Element>style</Element><Element Symbols>></Element Symbols><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Style lang="sass" with attributes --></Comment><br/>
<Comment><!-- This references the syntax highlighting file for SASS. --></Comment><br/>
<Element Symbols><</Element Symbols><Element>style</Element><Attribute> beforeLangLoneAttribute beforeLangAttribute</Attribute><Attribute Separator>=</Attribute Separator><Value>"asd"</Value><Attribute> lang=</Attribute><Value>"sass"</Value><Attribute> afterLangLoneAttribute afterLangAttribute</Attribute><Attribute Separator>=</Attribute Separator><Value>"asd"</Value><Element Symbols>></Element Symbols><br/>
<Normal Text>	</Normal Text><Comment>// single-line comment to make sure it's SASS and not CSS</Comment><br/>
<Normal Text>	</Normal Text><Variable>$font-stack</Variable><Normal Text>: Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
<Normal Text>	</Normal Text><Variable>$primary-color</Variable><Normal Text>: </Normal Text><Color>#333</Color><br/>
<Normal Text></Normal Text><br/>
<Normal Text>	body</Normal Text><br/>
<Normal Text>		</Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Normal Text> </Normal Text><Variable>$font-stack</Variable><br/>
<Normal Text>		</Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$primary-color</Variable><br/>
<Element Symbols></</Element Symbols><Element>style</Element><Element Symbols>></Element Symbols><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Style lang="scss" without attributes --></Comment><br/>
<Comment><!-- This references the syntax highlighting file for SCSS. --></Comment><br/>
<Element Symbols><</Element Symbols><Element>style</Element><Attribute> lang=</Attribute><Value>"scss"</Value><Element Symbols>></Element Symbols><br/>
<Normal Text>	</Normal Text><Comment>// single-line comment to make sure it's SCSS and not CSS</Comment><br/>
<Normal Text>	</Normal Text><Variable>$font-stack</Variable><Property Separator>:</Property Separator><Normal Text> Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
<Normal Text>	</Normal Text><Variable>$primary-color</Variable><Normal Text>: </Normal Text><Color>#333</Color><br/>
<Normal Text></Normal Text><br/>
<Normal Text>	body </Normal Text><Block Symbol>{</Block Symbol><br/>
<Normal Text>		</Normal Text><Property>font</Property><Property Separator>:</Property Separator><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><Normal Text> </Normal Text><Variable>$font-stack</Variable><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>		</Normal Text><Property>color</Property><Property Separator>:</Property Separator><Normal Text> </Normal Text><Variable>$primary-color</Variable><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Block Symbol>}</Block Symbol><br/>
<Element Symbols></</Element Symbols><Element>style</Element><Element Symbols>></Element Symbols><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Style lang="scss" with attributes --></Comment><br/>
<Comment><!-- This references the syntax highlighting file for SCSS. --></Comment><br/>
<Element Symbols><</Element Symbols><Element>style</Element><Attribute> beforeLangLoneAttribute beforeLangAttribute</Attribute><Attribute Separator>=</Attribute Separator><Value>"asd"</Value><Attribute> lang=</Attribute><Value>"scss"</Value><Attribute> afterLangLoneAttribute afterLangAttribute</Attribute><Attribute Separator>=</Attribute Separator><Value>"asd"</Value><Element Symbols>></Element Symbols><br/>
<Normal Text>	</Normal Text><Comment>// single-line comment to make sure it's SCSS and not CSS</Comment><br/>
<Normal Text>	</Normal Text><Variable>$font-stack</Variable><Property Separator>:</Property Separator><Normal Text> Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
<Normal Text>	</Normal Text><Variable>$primary-color</Variable><Normal Text>: </Normal Text><Color>#333</Color><br/>
<Normal Text></Normal Text><br/>
<Normal Text>	body </Normal Text><Block Symbol>{</Block Symbol><br/>
<Normal Text>		</Normal Text><Property>font</Property><Property Separator>:</Property Separator><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><Normal Text> </Normal Text><Variable>$font-stack</Variable><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>		</Normal Text><Property>color</Property><Property Separator>:</Property Separator><Normal Text> </Normal Text><Variable>$primary-color</Variable><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Block Symbol>}</Block Symbol><br/>
<Element Symbols></</Element Symbols><Element>style</Element><Element Symbols>></Element Symbols><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Script without attributes --></Comment><br/>
<Comment><!-- This references the syntax highlighting file for Javascript. --></Comment><br/>
<Element Symbols><</Element Symbols><Element>script</Element><Element Symbols>></Element Symbols><br/>
<Comment>// Single-line comment</Comment><br/>
<Keyword>const</Keyword><Normal Text> a </Normal Text><Symbol>=</Symbol><Normal Text> </Normal Text><String>'abc'</String><Symbol>;</Symbol><br/>
<Element Symbols></</Element Symbols><Element>script</Element><Element Symbols>></Element Symbols><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Script with attributes --></Comment><br/>
<Comment><!-- This references the syntax highlighting file for Javascript. --></Comment><br/>
<Element Symbols><</Element Symbols><Element>script</Element><Attribute> loneAttribute attribute</Attribute><Attribute Separator>=</Attribute Separator><Value>"value"</Value><Element Symbols>></Element Symbols><br/>
<Comment>// Single-line comment</Comment><br/>
<Keyword>const</Keyword><Normal Text> a </Normal Text><Symbol>=</Symbol><Normal Text> </Normal Text><String>'abc'</String><Symbol>;</Symbol><br/>
<Element Symbols></</Element Symbols><Element>script</Element><Element Symbols>></Element Symbols><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Script lang="ts" without attributes --></Comment><br/>
<Comment><!-- This references the syntax highlighting file for Typescript. --></Comment><br/>
<Element Symbols><</Element Symbols><Element>script</Element><Attribute> lang=</Attribute><Value>"ts"</Value><Element Symbols>></Element Symbols><br/>
<Comment>// Single-line comment</Comment><br/>
<Keyword>const</Keyword><Normal Text> </Normal Text><Normal Text>a </Normal Text><Symbol>=</Symbol><Normal Text> </Normal Text><String>'abc'</String><Symbol>;</Symbol><br/>
<Normal Text></Normal Text><br/>
<Comment>// Typescript</Comment><br/>
<Reserved>interface</Reserved><Normal Text> </Normal Text><Normal Text>SomeInterface </Normal Text><Normal Text>{</Normal Text><br/>
<Normal Text>    </Normal Text><Parameter>value</Parameter><Symbol>:</Symbol><Normal Text> </Normal Text><Types>string</Types><Symbol>;</Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Element Symbols></</Element Symbols><Element>script</Element><Element Symbols>></Element Symbols><br/>
<Normal Text></Normal Text><br/>
<Comment><!-- Script lang="ts" with attributes --></Comment><br/>
<Comment><!-- This references the syntax highlighting file for Typescript. --></Comment><br/>
<Element Symbols><</Element Symbols><Element>script</Element><Attribute> beforeLangLoneAttribute beforeLangAttribute</Attribute><Attribute Separator>=</Attribute Separator><Value>"asd"</Value><Attribute> lang=</Attribute><Value>"ts"</Value><Attribute> afterLangLoneAttribute afterLangAttribute</Attribute><Attribute Separator>=</Attribute Separator><Value>"asd"</Value><Element Symbols>></Element Symbols><br/>
<Comment>// Single-line comment</Comment><br/>
<Keyword>const</Keyword><Normal Text> </Normal Text><Normal Text>a </Normal Text><Symbol>=</Symbol><Normal Text> </Normal Text><String>'abc'</String><Symbol>;</Symbol><br/>
<Normal Text></Normal Text><br/>
<Comment>// Typescript</Comment><br/>
<Reserved>interface</Reserved><Normal Text> </Normal Text><Normal Text>SomeInterface </Normal Text><Normal Text>{</Normal Text><br/>
<Normal Text>    </Normal Text><Parameter>value</Parameter><Symbol>:</Symbol><Normal Text> </Normal Text><Types>string</Types><Symbol>;</Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Element Symbols></</Element Symbols><Element>script</Element><Element Symbols>></Element Symbols><br/>
