157 lines
16 KiB
HTML
157 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<title>test.vue</title>
|
|
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (Vue) - Theme (Breeze Light)"/>
|
|
</head><body style="background-color:#ffffff;color:#1f1c1b"><pre>
|
|
<span style="color:#898887"><!--</span>
|
|
<span style="color:#898887"> </span><span style="color:#ca60ca;font-style:italic">SPDX-FileCopyrightText:</span><span style="color:#898887"> 2024 James Zuccon</span>
|
|
<span style="color:#898887"> </span><span style="color:#ca60ca;font-style:italic">SPDX-License-Identifier:</span><span style="color:#ca60ca;font-style:italic"> </span><span style="color:#ca60ca;font-style:italic">MIT</span>
|
|
<span style="color:#898887">--></span>
|
|
<span style="color:#898887"><!--</span>
|
|
<span style="color:#898887"> This uses HTML syntax as a base with some customizations for handling Vue-Template-specific syntax.</span>
|
|
<span style="color:#898887"> It uses the following third-party scripts.</span>
|
|
<span style="color:#898887"> Script:</span>
|
|
<span style="color:#898887"> - JS (default - no lang attribute)</span>
|
|
<span style="color:#898887"> - Typescript (lang="ts")</span>
|
|
<span style="color:#898887"> Style:</span>
|
|
<span style="color:#898887"> - CSS (default - no lang attribute)</span>
|
|
<span style="color:#898887"> - SASS (lang="sass")</span>
|
|
<span style="color:#898887"> - SCSS (lang="scss")</span>
|
|
<span style="color:#898887"> </span><span style="color:#81ca2d;background-color:#f7e6e6;font-weight:bold">NOTE</span><span style="color:#898887">: The tests below test attributes before/after the lang="..." attribute as doing this requires pushing a new context.</span>
|
|
<span style="color:#898887"> In practice, a Vue Template would generally only contain zero or one <template>, <script> or <style> blocks.</span>
|
|
<span style="color:#898887">--></span>
|
|
|
|
<span style="color:#898887"><!-- Template without attributes --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">template</span><span style="color:#0057ae">></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">div</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887"><!-- Vue event-shorthand should support "@" prefix --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">p</span><span style="color:#006e28"> @click</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"test"</span><span style="color:#0057ae">></span>Testing HTML<span style="color:#0057ae"></</span><span style="font-weight:bold">p</span><span style="color:#0057ae">></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">p</span><span style="color:#0057ae">></span>{{ someVar }}<span style="color:#0057ae"></</span><span style="font-weight:bold">p</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887"><!-- Important to test this as it is used at root also --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">template</span><span style="color:#0057ae">></span>
|
|
Nested template tag
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">template</span><span style="color:#0057ae">></span>
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">div</span><span style="color:#0057ae">></span>
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">template</span><span style="color:#0057ae">></span>
|
|
|
|
<span style="color:#898887"><!-- Template with attributes --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">template</span><span style="color:#006e28"> loneAttribute attribute</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"value"</span><span style="color:#0057ae">></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">div</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887"><!-- Vue event-shorthand should support "@" prefix --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">p</span><span style="color:#006e28"> @click</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"test"</span><span style="color:#0057ae">></span>Testing HTML<span style="color:#0057ae"></</span><span style="font-weight:bold">p</span><span style="color:#0057ae">></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">p</span><span style="color:#0057ae">></span>{{ someVar }}<span style="color:#0057ae"></</span><span style="font-weight:bold">p</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887"><!-- Important to test this as it is used at root also --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">template</span><span style="color:#0057ae">></span>
|
|
Nested template tag
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">template</span><span style="color:#0057ae">></span>
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">div</span><span style="color:#0057ae">></span>
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">template</span><span style="color:#0057ae">></span>
|
|
|
|
<span style="color:#898887"><!-- Style without attributes --></span>
|
|
<span style="color:#898887"><!-- This references the syntax highlighting file for CSS. --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">style</span><span style="color:#0057ae">></span>
|
|
body {
|
|
<span style="font-weight:bold">font</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span> Helvetica<span style="color:#ca60ca">,</span> <span style="color:#b08000">sans-serif</span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#333</span><span style="color:#ca60ca">;</span>
|
|
}
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">style</span><span style="color:#0057ae">></span>
|
|
|
|
<span style="color:#898887"><!-- Style with attributes --></span>
|
|
<span style="color:#898887"><!-- This references the syntax highlighting file for CSS. --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">style</span><span style="color:#006e28"> loneAttribute attribute</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"value"</span><span style="color:#0057ae">></span>
|
|
body {
|
|
<span style="font-weight:bold">font</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span> Helvetica<span style="color:#ca60ca">,</span> <span style="color:#b08000">sans-serif</span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#333</span><span style="color:#ca60ca">;</span>
|
|
}
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">style</span><span style="color:#0057ae">></span>
|
|
|
|
<span style="color:#898887"><!-- Style lang="sass" without attributes --></span>
|
|
<span style="color:#898887"><!-- This references the syntax highlighting file for SASS. --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">style</span><span style="color:#006e28"> lang=</span><span style="color:#bf0303">"sass"</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887">// single-line comment to make sure it's SASS and not CSS</span>
|
|
<span style="color:#0057ae">$font-stack</span>: Helvetica<span style="color:#ca60ca">,</span> <span style="color:#b08000">sans-serif</span>
|
|
<span style="color:#0057ae">$primary-color</span>: <span style="color:#aa5500">#333</span>
|
|
|
|
body
|
|
<span style="font-weight:bold">font</span>: <span style="color:#b08000">100</span><span style="color:#0057ae">%</span> <span style="color:#0057ae">$font-stack</span>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#0057ae">$primary-color</span>
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">style</span><span style="color:#0057ae">></span>
|
|
|
|
<span style="color:#898887"><!-- Style lang="sass" with attributes --></span>
|
|
<span style="color:#898887"><!-- This references the syntax highlighting file for SASS. --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">style</span><span style="color:#006e28"> beforeLangLoneAttribute beforeLangAttribute</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"asd"</span><span style="color:#006e28"> lang=</span><span style="color:#bf0303">"sass"</span><span style="color:#006e28"> afterLangLoneAttribute afterLangAttribute</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"asd"</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887">// single-line comment to make sure it's SASS and not CSS</span>
|
|
<span style="color:#0057ae">$font-stack</span>: Helvetica<span style="color:#ca60ca">,</span> <span style="color:#b08000">sans-serif</span>
|
|
<span style="color:#0057ae">$primary-color</span>: <span style="color:#aa5500">#333</span>
|
|
|
|
body
|
|
<span style="font-weight:bold">font</span>: <span style="color:#b08000">100</span><span style="color:#0057ae">%</span> <span style="color:#0057ae">$font-stack</span>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#0057ae">$primary-color</span>
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">style</span><span style="color:#0057ae">></span>
|
|
|
|
<span style="color:#898887"><!-- Style lang="scss" without attributes --></span>
|
|
<span style="color:#898887"><!-- This references the syntax highlighting file for SCSS. --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">style</span><span style="color:#006e28"> lang=</span><span style="color:#bf0303">"scss"</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887">// single-line comment to make sure it's SCSS and not CSS</span>
|
|
<span style="color:#0057ae">$font-stack</span><span style="color:#924c9d">:</span> Helvetica<span style="color:#ca60ca">,</span> <span style="color:#b08000">sans-serif</span>
|
|
<span style="color:#0057ae">$primary-color</span>: <span style="color:#aa5500">#333</span>
|
|
|
|
body {
|
|
<span style="font-weight:bold">font</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span> <span style="color:#0057ae">$font-stack</span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$primary-color</span><span style="color:#ca60ca">;</span>
|
|
}
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">style</span><span style="color:#0057ae">></span>
|
|
|
|
<span style="color:#898887"><!-- Style lang="scss" with attributes --></span>
|
|
<span style="color:#898887"><!-- This references the syntax highlighting file for SCSS. --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">style</span><span style="color:#006e28"> beforeLangLoneAttribute beforeLangAttribute</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"asd"</span><span style="color:#006e28"> lang=</span><span style="color:#bf0303">"scss"</span><span style="color:#006e28"> afterLangLoneAttribute afterLangAttribute</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"asd"</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887">// single-line comment to make sure it's SCSS and not CSS</span>
|
|
<span style="color:#0057ae">$font-stack</span><span style="color:#924c9d">:</span> Helvetica<span style="color:#ca60ca">,</span> <span style="color:#b08000">sans-serif</span>
|
|
<span style="color:#0057ae">$primary-color</span>: <span style="color:#aa5500">#333</span>
|
|
|
|
body {
|
|
<span style="font-weight:bold">font</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span> <span style="color:#0057ae">$font-stack</span><span style="color:#ca60ca">;</span>
|
|
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$primary-color</span><span style="color:#ca60ca">;</span>
|
|
}
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">style</span><span style="color:#0057ae">></span>
|
|
|
|
<span style="color:#898887"><!-- Script without attributes --></span>
|
|
<span style="color:#898887"><!-- This references the syntax highlighting file for Javascript. --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">script</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887">// Single-line comment</span>
|
|
<span style="font-weight:bold">const</span> a <span style="color:#ca60ca">=</span> <span style="color:#bf0303">'abc'</span><span style="color:#ca60ca">;</span>
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">script</span><span style="color:#0057ae">></span>
|
|
|
|
<span style="color:#898887"><!-- Script with attributes --></span>
|
|
<span style="color:#898887"><!-- This references the syntax highlighting file for Javascript. --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">script</span><span style="color:#006e28"> loneAttribute attribute</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"value"</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887">// Single-line comment</span>
|
|
<span style="font-weight:bold">const</span> a <span style="color:#ca60ca">=</span> <span style="color:#bf0303">'abc'</span><span style="color:#ca60ca">;</span>
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">script</span><span style="color:#0057ae">></span>
|
|
|
|
<span style="color:#898887"><!-- Script lang="ts" without attributes --></span>
|
|
<span style="color:#898887"><!-- This references the syntax highlighting file for Typescript. --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">script</span><span style="color:#006e28"> lang=</span><span style="color:#bf0303">"ts"</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887">// Single-line comment</span>
|
|
<span style="font-weight:bold">const</span> a <span style="color:#ca60ca">=</span> <span style="color:#bf0303">'abc'</span><span style="color:#ca60ca">;</span>
|
|
|
|
<span style="color:#898887">// Typescript</span>
|
|
<span style="font-weight:bold;font-style:italic">interface</span> SomeInterface {
|
|
value<span style="color:#ca60ca">:</span> <span style="color:#0057ae">string</span><span style="color:#ca60ca">;</span>
|
|
}
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">script</span><span style="color:#0057ae">></span>
|
|
|
|
<span style="color:#898887"><!-- Script lang="ts" with attributes --></span>
|
|
<span style="color:#898887"><!-- This references the syntax highlighting file for Typescript. --></span>
|
|
<span style="color:#0057ae"><</span><span style="font-weight:bold">script</span><span style="color:#006e28"> beforeLangLoneAttribute beforeLangAttribute</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"asd"</span><span style="color:#006e28"> lang=</span><span style="color:#bf0303">"ts"</span><span style="color:#006e28"> afterLangLoneAttribute afterLangAttribute</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"asd"</span><span style="color:#0057ae">></span>
|
|
<span style="color:#898887">// Single-line comment</span>
|
|
<span style="font-weight:bold">const</span> a <span style="color:#ca60ca">=</span> <span style="color:#bf0303">'abc'</span><span style="color:#ca60ca">;</span>
|
|
|
|
<span style="color:#898887">// Typescript</span>
|
|
<span style="font-weight:bold;font-style:italic">interface</span> SomeInterface {
|
|
value<span style="color:#ca60ca">:</span> <span style="color:#0057ae">string</span><span style="color:#ca60ca">;</span>
|
|
}
|
|
<span style="color:#0057ae"></</span><span style="font-weight:bold">script</span><span style="color:#0057ae">></span>
|
|
</pre></body></html>
|