File: test.vue.dark.html

package info (click to toggle)
kf6-syntax-highlighting 6.18.0-1
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid
  • size: 49,060 kB
  • sloc: xml: 203,100; cpp: 12,878; python: 3,055; sh: 965; perl: 814; ruby: 494; pascal: 393; javascript: 161; php: 150; jsp: 132; lisp: 131; haskell: 124; ada: 119; ansic: 107; makefile: 96; f90: 94; ml: 85; cobol: 81; yacc: 71; csh: 62; exp: 61; erlang: 54; sql: 51; java: 47; sed: 45; objc: 37; tcl: 36; awk: 31; asm: 30; fortran: 18; cs: 10
file content (156 lines) | stat: -rw-r--r-- 16,527 bytes parent folder | download | duplicates (2) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
<!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">&lt;!--</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">&lt;!--</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 &lt;template>, &lt;script> or &lt;style> blocks.</span>
<span style="color:#7a7c7d">--></span>

<span style="color:#7a7c7d">&lt;!-- Template without attributes --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
    <span style="color:#2980b9">&lt;</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
        <span style="color:#7a7c7d">&lt;!-- Vue event-shorthand should support "@" prefix --></span>
        <span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
        <span style="color:#2980b9">&lt;</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>{{ someVar }}<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
        <span style="color:#7a7c7d">&lt;!-- Important to test this as it is used at root also --></span>
        <span style="color:#2980b9">&lt;</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
            Nested template tag
        <span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
    <span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>

<span style="color:#7a7c7d">&lt;!-- Template with attributes --></span>
<span style="color:#2980b9">&lt;</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">&lt;</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
        <span style="color:#7a7c7d">&lt;!-- Vue event-shorthand should support "@" prefix --></span>
        <span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
        <span style="color:#2980b9">&lt;</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>{{ someVar }}<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
        <span style="color:#7a7c7d">&lt;!-- Important to test this as it is used at root also --></span>
        <span style="color:#2980b9">&lt;</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
            Nested template tag
        <span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>
    <span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">template</span><span style="color:#2980b9">></span>

<span style="color:#7a7c7d">&lt;!-- Style without attributes --></span>
<span style="color:#7a7c7d">&lt;!-- This references the syntax highlighting file for CSS. --></span>
<span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>

<span style="color:#7a7c7d">&lt;!-- Style with attributes --></span>
<span style="color:#7a7c7d">&lt;!-- This references the syntax highlighting file for CSS. --></span>
<span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>

<span style="color:#7a7c7d">&lt;!-- Style lang="sass" without attributes --></span>
<span style="color:#7a7c7d">&lt;!-- This references the syntax highlighting file for SASS. --></span>
<span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>

<span style="color:#7a7c7d">&lt;!-- Style lang="sass" with attributes --></span>
<span style="color:#7a7c7d">&lt;!-- This references the syntax highlighting file for SASS. --></span>
<span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>

<span style="color:#7a7c7d">&lt;!-- Style lang="scss" without attributes --></span>
<span style="color:#7a7c7d">&lt;!-- This references the syntax highlighting file for SCSS. --></span>
<span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>

<span style="color:#7a7c7d">&lt;!-- Style lang="scss" with attributes --></span>
<span style="color:#7a7c7d">&lt;!-- This references the syntax highlighting file for SCSS. --></span>
<span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>

<span style="color:#7a7c7d">&lt;!-- Script without attributes --></span>
<span style="color:#7a7c7d">&lt;!-- This references the syntax highlighting file for Javascript. --></span>
<span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>

<span style="color:#7a7c7d">&lt;!-- Script with attributes --></span>
<span style="color:#7a7c7d">&lt;!-- This references the syntax highlighting file for Javascript. --></span>
<span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>

<span style="color:#7a7c7d">&lt;!-- Script lang="ts" without attributes --></span>
<span style="color:#7a7c7d">&lt;!-- This references the syntax highlighting file for Typescript. --></span>
<span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>

<span style="color:#7a7c7d">&lt;!-- Script lang="ts" with attributes --></span>
<span style="color:#7a7c7d">&lt;!-- This references the syntax highlighting file for Typescript. --></span>
<span style="color:#2980b9">&lt;</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">&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
</pre></body></html>