File: test.jsx.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 (111 lines) | stat: -rw-r--r-- 16,447 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
 
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>test.jsx</title>
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (JavaScript React (JSX)) - Theme (Breeze Light)"/>
</head><body style="background-color:#ffffff;color:#1f1c1b"><pre>
<span style="color:#898887">// JavaScript React</span>

<span style="color:#898887">/** </span><span style="color:#ca60ca;font-weight:bold">@author</span><span style="color:#898887"> Willy </span><span style="font-weight:bold">&lt;willy@wmail.com></span>
<span style="color:#898887">  * </span><span style="color:#ca60ca">@url</span><span style="color:#898887"> https://reactjs.org/ **/</span>

<span style="color:#ff5500">import</span> React <span style="color:#ff5500">from</span> <span style="color:#bf0303">'react'</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">import</span> { PhotoStory<span style="color:#ca60ca">,</span> VideoStory } <span style="color:#ff5500">from</span> <span style="color:#bf0303">'./stories'</span><span style="color:#ca60ca">;</span>

<span style="font-weight:bold">function</span> <span style="color:#644a9b">Story</span>(props) {
  <span style="font-weight:bold">const</span> SpecificStory <span style="color:#ca60ca">=</span> components[props<span style="color:#ca60ca">.</span><span style="color:#0057ae">storyType</span>]<span style="color:#ca60ca">;</span>
  <span style="font-weight:bold">return </span><span style="color:#644a9b;font-weight:bold">&lt;SpecificStory</span> <span style="color:#006e28">story</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span> props<span style="color:#ca60ca">.</span><span style="color:#0057ae">story</span> <span style="color:#0057ae">}</span> <span style="color:#006e28">attr2</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"</span><span style="color:#b08000">&amp;ref;</span><span style="color:#bf0303">"</span> <span style="color:#006e28">attr3</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"Hello\n"</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span>
} 

<span style="font-weight:bold">function</span> 
<span style="color:#644a9b;font-weight:bold">&lt;Tag</span> <span style="color:#006e28">attr1</span><span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span> <span style="font-weight:bold">&lt;tag/></span> <span style="font-weight:bold">function</span> <span style="color:#ca60ca">&lt;</span>noTag<span style="color:#ca60ca">/></span> <span style="font-weight:bold">return</span> <span style="font-weight:bold;font-style:italic">class</span> <span style="font-weight:bold">var</span> <span style="color:#b08000">0x123</span> { } <span style="color:#ca60ca">&amp;</span>noRef<span style="color:#ca60ca">;</span> <span style="color:#644a9b">hello</span>() React<span style="color:#ca60ca">.</span><span style="color:#644a9b">Component</span>() <span style="color:#0057ae">}</span> <span style="color:#006e28">attr2</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"</span><span style="color:#b08000">&amp;ref;</span><span style="color:#bf0303">"</span><span style="color:#644a9b;font-weight:bold">></span>
	/* no comment*/ function <span style="font-weight:bold">&lt;tag/></span> return class var 0x123 <span style="color:#b08000">&amp;ref;</span> hello() React.Component()
	.<span style="font-weight:bold">&lt;tag/></span> anyWord <span style="font-weight:bold">&lt;tag/></span>
	<span style="color:#0057ae">{</span> <span style="font-weight:bold">function</span> <span style="color:#ca60ca">&lt;</span>tag<span style="color:#ca60ca">></span> <span style="font-weight:bold">return</span> <span style="font-weight:bold;font-style:italic">class</span> <span style="font-weight:bold">var</span> <span style="color:#b08000">0x123</span> <span style="color:#644a9b">hello</span>() React<span style="color:#ca60ca">.</span><span style="color:#644a9b">Component</span>() <span style="color:#0057ae">}</span> 
<span style="color:#644a9b;font-weight:bold">&lt;/Tag></span>

<span style="font-weight:bold">&lt;tag1></span> <span style="font-weight:bold">&lt;/tag1></span>
<span style="font-weight:bold">&lt;tag1></span> <span style="font-weight:bold">&lt;/</span><span style="color:#bf0303;text-decoration:underline">Tag$</span><span style="font-weight:bold">></span>
<span style="color:#644a9b;font-weight:bold">&lt;Tag$></span> <span style="color:#644a9b;font-weight:bold">&lt;/tag></span>

<span style="font-weight:bold">&lt;tag</span><span style="color:#898887">/*comment*/</span><span style="color:#006e28">attr1</span><span style="color:#898887">/*comment*/</span><span style="color:#ca60ca">=</span> <span style="color:#898887">/*comment*/</span><span style="color:#bf0303">"value"</span><span style="color:#898887">/*comment*/</span><span style="color:#006e28">attr2</span> <span style="color:#898887">/*comment*/</span><span style="color:#006e28">attr3</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">'a'</span> <span style="color:#006e28">key</span><span style="color:#898887">/*comment*/</span><span style="color:#006e28">key2</span> <span style="font-weight:bold">/></span>

<span style="color:#898887">// Detect Valid tags</span>

<span style="color:#898887">/* comment */</span> <span style="font-weight:bold">&lt;tag>&lt;/tag></span>
{ <span style="color:#898887">/* comment </span>
<span style="color:#898887">	*/</span> <span style="color:#644a9b;font-weight:bold">&lt;Tag</span> <span style="color:#644a9b;font-weight:bold">/></span> 
	word <span style="color:#ca60ca">&lt;</span>noTag<span style="color:#ca60ca">/></span> <span style="color:#ca60ca">.</span> <span style="color:#ca60ca">&lt;</span>noTag<span style="color:#ca60ca">/></span> } <span style="color:#ca60ca">&lt;</span>noTag<span style="color:#ca60ca">/></span>
<span style="font-weight:bold">return </span><span style="color:#898887">/* comment</span>
<span style="color:#898887">	multiline */</span> <span style="font-weight:bold">&lt;tag/></span> <span style="color:#898887">/* comment */</span> <span style="color:#644a9b;font-weight:bold">&lt;Tag/></span>
<span style="color:#ca60ca">&amp;&amp; </span><span style="color:#898887">/*comment*/</span> <span style="color:#644a9b;font-weight:bold">&lt;Tag/></span>
<span style="color:#ca60ca">&amp;</span> <span style="color:#898887">/*comment*/</span> <span style="color:#ca60ca">&lt;</span>noTag<span style="color:#ca60ca">/></span>

  <span style="font-weight:bold">&lt;tag/></span>
{ <span style="font-weight:bold">&lt;hello></span>Hello<span style="font-weight:bold">&lt;/hello></span> }
<span style="color:#ca60ca">?</span><span style="color:#644a9b;font-weight:bold">&lt;Tag</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span>
[ <span style="font-weight:bold">&lt;tag</span> <span style="font-weight:bold">/></span>  ( <span style="font-weight:bold">&lt;tag</span> <span style="font-weight:bold">/></span> ]
<span style="color:#ca60ca">,</span><span style="color:#644a9b;font-weight:bold">&lt;Tag/></span>    <span style="color:#ca60ca">=</span><span style="color:#644a9b;font-weight:bold">&lt;Tag/></span>
<span style="color:#ca60ca">&amp;&amp;</span><span style="font-weight:bold">&lt;tag/></span>   <span style="color:#ca60ca">||</span><span style="font-weight:bold">&lt;tag/></span>
<span style="font-weight:bold">return </span><span style="font-weight:bold">&lt;tag/></span> <span style="color:#ca60ca">;</span>
<span style="color:#ff5500">default</span><span style="font-weight:bold">&lt;tag/></span> <span style="color:#ca60ca">;</span>
<span style="color:#644a9b;font-weight:bold">&lt;Tag></span> <span style="font-weight:bold">&lt;tag></span> <span style="color:#644a9b;font-weight:bold">&lt;tag$/></span> <span style="font-weight:bold">&lt;/tag></span> return <span style="color:#644a9b;font-weight:bold">&lt;/Tag></span>

anyWord<span style="color:#ca60ca">&lt;</span>noTag<span style="color:#ca60ca">></span>
anyWord<span style="color:#898887">/*comment*/</span> <span style="color:#ca60ca">&lt;</span>noTag<span style="color:#ca60ca">/></span>
<span style="color:#ca60ca">.&lt;</span>noTag<span style="color:#ca60ca">></span>
<span style="color:#ca60ca">&amp;&lt;</span>notag<span style="color:#ca60ca">></span> <span style="color:#ca60ca">|</span> <span style="color:#ca60ca">&lt;</span>noTag<span style="color:#ca60ca">/></span>
<span style="color:#ca60ca">%</span> <span style="color:#898887">/* comment*/</span> <span style="color:#ca60ca">&lt;</span>noTag<span style="color:#ca60ca">/></span>

<span style="color:#898887">// Non-ASCII tag name &amp; attribute</span>
<span style="color:#644a9b;font-weight:bold">&lt;日本語>&lt;/日本語></span><span style="color:#ca60ca">;</span>
<span style="color:#644a9b;font-weight:bold">&lt;Component</span> <span style="color:#006e28">本本:本-本</span> <span style="color:#006e28">aa本:本</span> <span style="color:#006e28">aa:aa</span> <span style="color:#644a9b;font-weight:bold">/></span>

<span style="color:#644a9b;font-weight:bold">&lt;Namespace.DeepNamespace.Component</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span>
<span style="color:#644a9b;font-weight:bold">&lt;Component</span> <span style="color:#0057ae">{</span> <span style="color:#ca60ca">...</span> x <span style="color:#0057ae">}</span> <span style="color:#006e28">y</span>
<span style="color:#ca60ca">=</span><span style="color:#0057ae">{</span><span style="color:#b08000">2</span> <span style="color:#0057ae">}</span> <span style="color:#006e28">z</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span>

<span style="font-weight:bold;font-style:italic">let</span> k1 <span style="color:#ca60ca">= </span><span style="font-weight:bold">&lt;div></span> <span style="font-weight:bold">&lt;h2></span> Hello <span style="font-weight:bold">&lt;/h2></span> <span style="font-weight:bold">&lt;h1></span> world <span style="font-weight:bold">&lt;/h1>&lt;/div></span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold;font-style:italic">let</span> k2 <span style="color:#ca60ca">= </span><span style="color:#644a9b;font-weight:bold">&lt;Button></span> <span style="font-weight:bold">&lt;h2></span> Hello <span style="font-weight:bold">&lt;/h2></span> <span style="color:#644a9b;font-weight:bold">&lt;/Button></span><span style="color:#ca60ca">;</span>

<span style="color:#898887">// Empty tags</span>
<span style="font-weight:bold">&lt;>&lt;/></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// no whitespace</span>
<span style="font-weight:bold">&lt;    >&lt;/   ></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// lots of whitespace</span>
<span style="color:#ca60ca">&lt;</span> <span style="color:#898887">/*starting wrap*/</span> <span style="color:#ca60ca">>&lt;/</span> <span style="color:#898887">/*ending wrap*/</span><span style="color:#ca60ca">>;</span> <span style="color:#898887">// comments in the tags</span>
<span style="font-weight:bold">&lt;></span>hi<span style="font-weight:bold">&lt;/></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// text inside</span>
<span style="font-weight:bold">&lt;>&lt;span></span>hi<span style="font-weight:bold">&lt;/span>&lt;div></span>bye<span style="font-weight:bold">&lt;/div>&lt;/></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// children</span>
<span style="font-weight:bold">&lt;>&lt;span></span>1<span style="font-weight:bold">&lt;/span>&lt;>&lt;span></span>2.1<span style="font-weight:bold">&lt;/span>&lt;span></span>2.2<span style="font-weight:bold">&lt;/span>&lt;/>&lt;span></span>3<span style="font-weight:bold">&lt;/span>&lt;/></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// nested fragments</span>
<span style="font-weight:bold">&lt;></span>#<span style="font-weight:bold">&lt;/></span><span style="color:#ca60ca">;</span> <span style="color:#898887">// # would cause scanning error if not in jsxtext</span>

<span style="color:#898887">// Tags after substitutions in templates</span>
<span style="color:#e31616">`aaa</span><span style="color:#3daee9">${</span><span style="font-weight:bold">&lt;tag>&lt;/tag></span><span style="color:#898887">//comment</span>
    <span style="color:#898887">/*comment*/</span><span style="color:#644a9b;font-weight:bold">&lt;A/></span><span style="color:#3daee9">}</span><span style="color:#e31616">`</span>

<span style="color:#898887">// Don't highlight tags within variable declaration</span>
<span style="font-weight:bold;font-style:italic">let</span> myIdentity<span style="color:#ca60ca">:</span> <span style="color:#ca60ca">&lt;</span>T<span style="color:#ca60ca">></span>(arg<span style="color:#ca60ca">:</span> T) <span style="font-weight:bold">=></span> T <span style="color:#ca60ca">=</span> identity<span style="color:#ca60ca">;</span>
<span style="font-weight:bold">var</span> myIdentity<span style="color:#ca60ca">:</span> <span style="color:#ca60ca">&lt;</span>U<span style="color:#ca60ca">></span>(arg<span style="color:#ca60ca">:</span> U) <span style="font-weight:bold">=></span> U <span style="color:#ca60ca">=</span> identity<span style="color:#ca60ca">;</span>
<span style="font-weight:bold">const</span> myIdentity<span style="color:#ca60ca">:</span> {&lt;T<span style="color:#ca60ca">></span>(<span style="color:#0057ae">arg</span><span style="color:#ca60ca">:</span> T)<span style="color:#ca60ca">:</span> T} <span style="color:#ca60ca">=</span> identity<span style="color:#ca60ca">;</span>

<span style="color:#898887">// Don't highlight tags within interfaces and classes</span>
<span style="font-weight:bold;font-style:italic">interface</span> GenericIdentityFn {
    <span style="color:#ca60ca">&lt;</span>T<span style="color:#ca60ca">></span>(<span style="color:#0057ae">arg</span><span style="color:#ca60ca">:</span> T)<span style="color:#ca60ca">:</span> T<span style="color:#ca60ca">;</span>
    <span style="color:#ca60ca">&lt;</span>noTag <span style="color:#ca60ca">/></span>
}
<span style="font-weight:bold;font-style:italic">class</span> Handler {
    <span style="color:#0057ae">info</span><span style="color:#ca60ca">:</span> <span style="color:#ca60ca">&lt;</span>T<span style="color:#ca60ca">></span>(<span style="color:#0057ae">arg</span><span style="color:#ca60ca">:</span> T)<span style="color:#ca60ca">:</span> T <span style="color:#ca60ca">&lt;</span>noTag <span style="color:#ca60ca">/>;</span>
    <span style="font-weight:bold">&lt;tag></span> <span style="font-weight:bold">&lt;/tag></span>
}

<span style="color:#898887">// Check character after tag name, do not highlight invalid tags</span>
<span style="color:#ca60ca">&lt;</span>noTag <span style="color:#ca60ca">?</span>
<span style="color:#ca60ca">&lt;</span>noTag  <span style="color:#ca60ca">,</span>
<span style="color:#ca60ca">&lt;</span>noTag <span style="color:#898887">/* comment */</span> <span style="color:#ca60ca">?</span>
<span style="color:#ca60ca">&lt;</span>noTag#
<span style="color:#ca60ca">&lt;</span>noTag<span style="color:#898887">/*comment*/</span>#

<span style="color:#898887">// Tagged template literals</span>
<span style="color:#644a9b">tagFunc</span><span style="color:#e31616">`</span>
<span style="color:#e31616">    Hello world!</span>
<span style="color:#e31616">    </span><span style="color:#3daee9">${</span> <span style="color:#644a9b;font-weight:bold">&lt;Tag</span> <span style="color:#644a9b;font-weight:bold">/></span><span style="color:#ca60ca">;</span> <span style="color:#b08000">22</span> <span style="color:#ca60ca">+</span> <span style="color:#bf0303">"11"</span> <span style="color:#3daee9">}</span><span style="color:#e31616">`</span><span style="color:#ca60ca">;</span>
obj<span style="color:#ca60ca">.</span><span style="color:#0057ae">something</span><span style="color:#ca60ca">.</span><span style="color:#644a9b">tagFunc</span><span style="color:#e31616">`Setting </span><span style="color:#3daee9">${</span>setting<span style="color:#3daee9">}</span><span style="color:#e31616"> is </span><span style="color:#3daee9">${</span>value<span style="color:#3daee9">}</span><span style="color:#e31616">!`</span><span style="color:#ca60ca">;</span>
</pre></body></html>