150 lines
4.1 KiB
Vue
150 lines
4.1 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: 2024 James Zuccon
|
|
SPDX-License-Identifier: MIT
|
|
-->
|
|
<!--
|
|
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.
|
|
-->
|
|
|
|
<!-- Template without attributes -->
|
|
<template>
|
|
<div>
|
|
<!-- Vue event-shorthand should support "@" prefix -->
|
|
<p @click="test">Testing HTML</p>
|
|
<p>{{ someVar }}</p>
|
|
<!-- Important to test this as it is used at root also -->
|
|
<template>
|
|
Nested template tag
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Template with attributes -->
|
|
<template loneAttribute attribute="value">
|
|
<div>
|
|
<!-- Vue event-shorthand should support "@" prefix -->
|
|
<p @click="test">Testing HTML</p>
|
|
<p>{{ someVar }}</p>
|
|
<!-- Important to test this as it is used at root also -->
|
|
<template>
|
|
Nested template tag
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Style without attributes -->
|
|
<!-- This references the syntax highlighting file for CSS. -->
|
|
<style>
|
|
body {
|
|
font: 100% Helvetica, sans-serif;
|
|
color: #333;
|
|
}
|
|
</style>
|
|
|
|
<!-- Style with attributes -->
|
|
<!-- This references the syntax highlighting file for CSS. -->
|
|
<style loneAttribute attribute="value">
|
|
body {
|
|
font: 100% Helvetica, sans-serif;
|
|
color: #333;
|
|
}
|
|
</style>
|
|
|
|
<!-- Style lang="sass" without attributes -->
|
|
<!-- This references the syntax highlighting file for SASS. -->
|
|
<style lang="sass">
|
|
// single-line comment to make sure it's SASS and not CSS
|
|
$font-stack: Helvetica, sans-serif
|
|
$primary-color: #333
|
|
|
|
body
|
|
font: 100% $font-stack
|
|
color: $primary-color
|
|
</style>
|
|
|
|
<!-- Style lang="sass" with attributes -->
|
|
<!-- This references the syntax highlighting file for SASS. -->
|
|
<style beforeLangLoneAttribute beforeLangAttribute="asd" lang="sass" afterLangLoneAttribute afterLangAttribute="asd">
|
|
// single-line comment to make sure it's SASS and not CSS
|
|
$font-stack: Helvetica, sans-serif
|
|
$primary-color: #333
|
|
|
|
body
|
|
font: 100% $font-stack
|
|
color: $primary-color
|
|
</style>
|
|
|
|
<!-- Style lang="scss" without attributes -->
|
|
<!-- This references the syntax highlighting file for SCSS. -->
|
|
<style lang="scss">
|
|
// single-line comment to make sure it's SCSS and not CSS
|
|
$font-stack: Helvetica, sans-serif
|
|
$primary-color: #333
|
|
|
|
body {
|
|
font: 100% $font-stack;
|
|
color: $primary-color;
|
|
}
|
|
</style>
|
|
|
|
<!-- Style lang="scss" with attributes -->
|
|
<!-- This references the syntax highlighting file for SCSS. -->
|
|
<style 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 {
|
|
font: 100% $font-stack;
|
|
color: $primary-color;
|
|
}
|
|
</style>
|
|
|
|
<!-- Script without attributes -->
|
|
<!-- This references the syntax highlighting file for Javascript. -->
|
|
<script>
|
|
// Single-line comment
|
|
const a = 'abc';
|
|
</script>
|
|
|
|
<!-- Script with attributes -->
|
|
<!-- This references the syntax highlighting file for Javascript. -->
|
|
<script loneAttribute attribute="value">
|
|
// Single-line comment
|
|
const a = 'abc';
|
|
</script>
|
|
|
|
<!-- Script lang="ts" without attributes -->
|
|
<!-- This references the syntax highlighting file for Typescript. -->
|
|
<script lang="ts">
|
|
// Single-line comment
|
|
const a = 'abc';
|
|
|
|
// Typescript
|
|
interface SomeInterface {
|
|
value: string;
|
|
}
|
|
</script>
|
|
|
|
<!-- Script lang="ts" with attributes -->
|
|
<!-- This references the syntax highlighting file for Typescript. -->
|
|
<script beforeLangLoneAttribute beforeLangAttribute="asd" lang="ts" afterLangLoneAttribute afterLangAttribute="asd">
|
|
// Single-line comment
|
|
const a = 'abc';
|
|
|
|
// Typescript
|
|
interface SomeInterface {
|
|
value: string;
|
|
}
|
|
</script>
|