150 lines
7.3 KiB
Plaintext
150 lines
7.3 KiB
Plaintext
<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'>>
|