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 Dark)"/>
|
|
</head><body style="background-color:#232629;color:#cfcfc2"><pre>
|
|
<span style="color:#7a7c7d"><!--</span>
|
|
<span style="color:#7a7c7d"> </span><span style="color:#3f8058;font-style:italic">SPDX-FileCopyrightText:</span><span style="color:#7a7c7d"> 2024 James Zuccon</span>
|
|
<span style="color:#7a7c7d"> </span><span style="color:#3f8058;font-style:italic">SPDX-License-Identifier:</span><span style="color:#3f8058;font-style:italic"> </span><span style="color:#3f8058;font-style:italic">MIT</span>
|
|
<span style="color:#7a7c7d">--></span>
|
|
<span style="color:#7a7c7d"><!--</span>
|
|
<span style="color:#7a7c7d"> This uses HTML syntax as a base with some customizations for handling Vue-Template-specific syntax.</span>
|
|
<span style="color:#7a7c7d"> It uses the following third-party scripts.</span>
|
|
<span style="color:#7a7c7d"> Script:</span>
|
|
<span style="color:#7a7c7d"> - JS (default - no lang attribute)</span>
|
|
<span style="color:#7a7c7d"> - Typescript (lang="ts")</span>
|
|
<span style="color:#7a7c7d"> Style:</span>
|
|
<span style="color:#7a7c7d"> - CSS (default - no lang attribute)</span>
|
|
<span style="color:#7a7c7d"> - SASS (lang="sass")</span>
|
|
<span style="color:#7a7c7d"> - SCSS (lang="scss")</span>
|
|
<span style="color:#7a7c7d"> </span><span style="color:#81ca2d;background-color:#4d1f24;font-weight:bold">NOTE</span><span style="color:#7a7c7d">: The tests below test attributes before/after the lang="..." attribute as doing this requires pushing a new context.</span>
|
|
<span style="color:#7a7c7d"> In practice, a Vue Template would generally only contain zero or one <template>, <script> or <style> blocks.</span>
|
|
<span style="color:#7a7c7d">--></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Template without attributes --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d"><!-- Vue event-shorthand should support "@" prefix --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">p</span><span style="color:#27ae60"> @click</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"test"</span><span style="color:#2980b9">></span>Testing HTML<span style="color:#2980b9"></</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>{{ someVar }}<span style="color:#2980b9"></</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d"><!-- Important to test this as it is used at root also --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
|
|
Nested template tag
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Template with attributes --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">template</span><span style="color:#27ae60"> loneAttribute attribute</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"value"</span><span style="color:#2980b9">></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d"><!-- Vue event-shorthand should support "@" prefix --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">p</span><span style="color:#27ae60"> @click</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"test"</span><span style="color:#2980b9">></span>Testing HTML<span style="color:#2980b9"></</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>{{ someVar }}<span style="color:#2980b9"></</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d"><!-- Important to test this as it is used at root also --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
|
|
Nested template tag
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Style without attributes --></span>
|
|
<span style="color:#7a7c7d"><!-- This references the syntax highlighting file for CSS. --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>
|
|
body {
|
|
<span style="font-weight:bold">font</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span> Helvetica<span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#333</span><span style="color:#3f8058">;</span>
|
|
}
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Style with attributes --></span>
|
|
<span style="color:#7a7c7d"><!-- This references the syntax highlighting file for CSS. --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">style</span><span style="color:#27ae60"> loneAttribute attribute</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"value"</span><span style="color:#2980b9">></span>
|
|
body {
|
|
<span style="font-weight:bold">font</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span> Helvetica<span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">#333</span><span style="color:#3f8058">;</span>
|
|
}
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Style lang="sass" without attributes --></span>
|
|
<span style="color:#7a7c7d"><!-- This references the syntax highlighting file for SASS. --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">style</span><span style="color:#27ae60"> lang=</span><span style="color:#f44f4f">"sass"</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d">// single-line comment to make sure it's SASS and not CSS</span>
|
|
<span style="color:#27aeae">$font-stack</span>: Helvetica<span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span>
|
|
<span style="color:#27aeae">$primary-color</span>: <span style="color:#27aeae;font-weight:bold">#333</span>
|
|
|
|
body
|
|
<span style="font-weight:bold">font</span>: <span style="color:#f67400">100</span><span style="color:#2980b9">%</span> <span style="color:#27aeae">$font-stack</span>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">$primary-color</span>
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Style lang="sass" with attributes --></span>
|
|
<span style="color:#7a7c7d"><!-- This references the syntax highlighting file for SASS. --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">style</span><span style="color:#27ae60"> beforeLangLoneAttribute beforeLangAttribute</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"asd"</span><span style="color:#27ae60"> lang=</span><span style="color:#f44f4f">"sass"</span><span style="color:#27ae60"> afterLangLoneAttribute afterLangAttribute</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"asd"</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d">// single-line comment to make sure it's SASS and not CSS</span>
|
|
<span style="color:#27aeae">$font-stack</span>: Helvetica<span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span>
|
|
<span style="color:#27aeae">$primary-color</span>: <span style="color:#27aeae;font-weight:bold">#333</span>
|
|
|
|
body
|
|
<span style="font-weight:bold">font</span>: <span style="color:#f67400">100</span><span style="color:#2980b9">%</span> <span style="color:#27aeae">$font-stack</span>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">$primary-color</span>
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Style lang="scss" without attributes --></span>
|
|
<span style="color:#7a7c7d"><!-- This references the syntax highlighting file for SCSS. --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">style</span><span style="color:#27ae60"> lang=</span><span style="color:#f44f4f">"scss"</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d">// single-line comment to make sure it's SCSS and not CSS</span>
|
|
<span style="color:#27aeae">$font-stack</span><span style="color:#3daee9">:</span> Helvetica<span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span>
|
|
<span style="color:#27aeae">$primary-color</span>: <span style="color:#27aeae;font-weight:bold">#333</span>
|
|
|
|
body {
|
|
<span style="font-weight:bold">font</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span> <span style="color:#27aeae">$font-stack</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$primary-color</span><span style="color:#3f8058">;</span>
|
|
}
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Style lang="scss" with attributes --></span>
|
|
<span style="color:#7a7c7d"><!-- This references the syntax highlighting file for SCSS. --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">style</span><span style="color:#27ae60"> beforeLangLoneAttribute beforeLangAttribute</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"asd"</span><span style="color:#27ae60"> lang=</span><span style="color:#f44f4f">"scss"</span><span style="color:#27ae60"> afterLangLoneAttribute afterLangAttribute</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"asd"</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d">// single-line comment to make sure it's SCSS and not CSS</span>
|
|
<span style="color:#27aeae">$font-stack</span><span style="color:#3daee9">:</span> Helvetica<span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span>
|
|
<span style="color:#27aeae">$primary-color</span>: <span style="color:#27aeae;font-weight:bold">#333</span>
|
|
|
|
body {
|
|
<span style="font-weight:bold">font</span><span style="color:#3daee9">:</span> <span style="color:#f67400">100</span><span style="color:#2980b9">%</span> <span style="color:#27aeae">$font-stack</span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae">$primary-color</span><span style="color:#3f8058">;</span>
|
|
}
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Script without attributes --></span>
|
|
<span style="color:#7a7c7d"><!-- This references the syntax highlighting file for Javascript. --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d">// Single-line comment</span>
|
|
<span style="font-weight:bold">const</span> a <span style="color:#3f8058">=</span> <span style="color:#f44f4f">'abc'</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Script with attributes --></span>
|
|
<span style="color:#7a7c7d"><!-- This references the syntax highlighting file for Javascript. --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">script</span><span style="color:#27ae60"> loneAttribute attribute</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"value"</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d">// Single-line comment</span>
|
|
<span style="font-weight:bold">const</span> a <span style="color:#3f8058">=</span> <span style="color:#f44f4f">'abc'</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Script lang="ts" without attributes --></span>
|
|
<span style="color:#7a7c7d"><!-- This references the syntax highlighting file for Typescript. --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">script</span><span style="color:#27ae60"> lang=</span><span style="color:#f44f4f">"ts"</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d">// Single-line comment</span>
|
|
<span style="font-weight:bold">const</span> a <span style="color:#3f8058">=</span> <span style="color:#f44f4f">'abc'</span><span style="color:#3f8058">;</span>
|
|
|
|
<span style="color:#7a7c7d">// Typescript</span>
|
|
<span style="font-weight:bold;font-style:italic">interface</span> SomeInterface {
|
|
value<span style="color:#3f8058">:</span> <span style="color:#2980b9">string</span><span style="color:#3f8058">;</span>
|
|
}
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
|
|
|
|
<span style="color:#7a7c7d"><!-- Script lang="ts" with attributes --></span>
|
|
<span style="color:#7a7c7d"><!-- This references the syntax highlighting file for Typescript. --></span>
|
|
<span style="color:#2980b9"><</span><span style="font-weight:bold">script</span><span style="color:#27ae60"> beforeLangLoneAttribute beforeLangAttribute</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"asd"</span><span style="color:#27ae60"> lang=</span><span style="color:#f44f4f">"ts"</span><span style="color:#27ae60"> afterLangLoneAttribute afterLangAttribute</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"asd"</span><span style="color:#2980b9">></span>
|
|
<span style="color:#7a7c7d">// Single-line comment</span>
|
|
<span style="font-weight:bold">const</span> a <span style="color:#3f8058">=</span> <span style="color:#f44f4f">'abc'</span><span style="color:#3f8058">;</span>
|
|
|
|
<span style="color:#7a7c7d">// Typescript</span>
|
|
<span style="font-weight:bold;font-style:italic">interface</span> SomeInterface {
|
|
value<span style="color:#3f8058">:</span> <span style="color:#2980b9">string</span><span style="color:#3f8058">;</span>
|
|
}
|
|
<span style="color:#2980b9"></</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
|
|
</pre></body></html>
|