112 lines
16 KiB
HTML
112 lines
16 KiB
HTML
<!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 Dark)"/>
|
|
</head><body style="background-color:#232629;color:#cfcfc2"><pre>
|
|
<span style="color:#7a7c7d">// JavaScript React</span>
|
|
|
|
<span style="color:#7a7c7d">/** </span><span style="color:#3f8058;font-weight:bold">@author</span><span style="color:#7a7c7d"> Willy </span><span style="font-weight:bold"><willy@wmail.com></span>
|
|
<span style="color:#7a7c7d"> * </span><span style="color:#3f8058">@url</span><span style="color:#7a7c7d"> https://reactjs.org/ **/</span>
|
|
|
|
<span style="color:#27ae60">import</span> React <span style="color:#27ae60">from</span> <span style="color:#f44f4f">'react'</span><span style="color:#3f8058">;</span>
|
|
<span style="color:#27ae60">import</span> { PhotoStory<span style="color:#3f8058">,</span> VideoStory } <span style="color:#27ae60">from</span> <span style="color:#f44f4f">'./stories'</span><span style="color:#3f8058">;</span>
|
|
|
|
<span style="font-weight:bold">function</span> <span style="color:#8e44ad">Story</span>(props) {
|
|
<span style="font-weight:bold">const</span> SpecificStory <span style="color:#3f8058">=</span> components[props<span style="color:#3f8058">.</span><span style="color:#2980b9">storyType</span>]<span style="color:#3f8058">;</span>
|
|
<span style="color:#fdbc4b;font-weight:bold">return </span><span style="color:#8e44ad;font-weight:bold"><SpecificStory</span> <span style="color:#27ae60">story</span><span style="color:#3f8058">=</span><span style="color:#27aeae">{</span> props<span style="color:#3f8058">.</span><span style="color:#2980b9">story</span> <span style="color:#27aeae">}</span> <span style="color:#27ae60">attr2</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"</span><span style="color:#f67400">&ref;</span><span style="color:#f44f4f">"</span> <span style="color:#27ae60">attr3</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"Hello\n"</span> <span style="color:#8e44ad;font-weight:bold">/></span><span style="color:#3f8058">;</span>
|
|
}
|
|
|
|
<span style="font-weight:bold">function</span>
|
|
<span style="color:#8e44ad;font-weight:bold"><Tag</span> <span style="color:#27ae60">attr1</span><span style="color:#3f8058">=</span><span style="color:#27aeae">{</span> <span style="font-weight:bold"><tag/></span> <span style="font-weight:bold">function</span> <span style="color:#3f8058"><</span>noTag<span style="color:#3f8058">/></span> <span style="color:#fdbc4b;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:#f67400">0x123</span> { } <span style="color:#3f8058">&</span>noRef<span style="color:#3f8058">;</span> <span style="color:#8e44ad">hello</span>() React<span style="color:#3f8058">.</span><span style="color:#8e44ad">Component</span>() <span style="color:#27aeae">}</span> <span style="color:#27ae60">attr2</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"</span><span style="color:#f67400">&ref;</span><span style="color:#f44f4f">"</span><span style="color:#8e44ad;font-weight:bold">></span>
|
|
/* no comment*/ function <span style="font-weight:bold"><tag/></span> return class var 0x123 <span style="color:#f67400">&ref;</span> hello() React.Component()
|
|
.<span style="font-weight:bold"><tag/></span> anyWord <span style="font-weight:bold"><tag/></span>
|
|
<span style="color:#27aeae">{</span> <span style="font-weight:bold">function</span> <span style="color:#3f8058"><</span>tag<span style="color:#3f8058">></span> <span style="color:#fdbc4b;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:#f67400">0x123</span> <span style="color:#8e44ad">hello</span>() React<span style="color:#3f8058">.</span><span style="color:#8e44ad">Component</span>() <span style="color:#27aeae">}</span>
|
|
<span style="color:#8e44ad;font-weight:bold"></Tag></span>
|
|
|
|
<span style="font-weight:bold"><tag1></span> <span style="font-weight:bold"></tag1></span>
|
|
<span style="font-weight:bold"><tag1></span> <span style="font-weight:bold"></</span><span style="color:#da4453;text-decoration:underline">Tag$</span><span style="font-weight:bold">></span>
|
|
<span style="color:#8e44ad;font-weight:bold"><Tag$></span> <span style="color:#8e44ad;font-weight:bold"></tag></span>
|
|
|
|
<span style="font-weight:bold"><tag</span><span style="color:#7a7c7d">/*comment*/</span><span style="color:#27ae60">attr1</span><span style="color:#7a7c7d">/*comment*/</span><span style="color:#3f8058">=</span> <span style="color:#7a7c7d">/*comment*/</span><span style="color:#f44f4f">"value"</span><span style="color:#7a7c7d">/*comment*/</span><span style="color:#27ae60">attr2</span> <span style="color:#7a7c7d">/*comment*/</span><span style="color:#27ae60">attr3</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">'a'</span> <span style="color:#27ae60">key</span><span style="color:#7a7c7d">/*comment*/</span><span style="color:#27ae60">key2</span> <span style="font-weight:bold">/></span>
|
|
|
|
<span style="color:#7a7c7d">// Detect Valid tags</span>
|
|
|
|
<span style="color:#7a7c7d">/* comment */</span> <span style="font-weight:bold"><tag></tag></span>
|
|
{ <span style="color:#7a7c7d">/* comment </span>
|
|
<span style="color:#7a7c7d"> */</span> <span style="color:#8e44ad;font-weight:bold"><Tag</span> <span style="color:#8e44ad;font-weight:bold">/></span>
|
|
word <span style="color:#3f8058"><</span>noTag<span style="color:#3f8058">/></span> <span style="color:#3f8058">.</span> <span style="color:#3f8058"><</span>noTag<span style="color:#3f8058">/></span> } <span style="color:#3f8058"><</span>noTag<span style="color:#3f8058">/></span>
|
|
<span style="color:#fdbc4b;font-weight:bold">return </span><span style="color:#7a7c7d">/* comment</span>
|
|
<span style="color:#7a7c7d"> multiline */</span> <span style="font-weight:bold"><tag/></span> <span style="color:#7a7c7d">/* comment */</span> <span style="color:#8e44ad;font-weight:bold"><Tag/></span>
|
|
<span style="color:#3f8058">&& </span><span style="color:#7a7c7d">/*comment*/</span> <span style="color:#8e44ad;font-weight:bold"><Tag/></span>
|
|
<span style="color:#3f8058">&</span> <span style="color:#7a7c7d">/*comment*/</span> <span style="color:#3f8058"><</span>noTag<span style="color:#3f8058">/></span>
|
|
|
|
<span style="font-weight:bold"><tag/></span>
|
|
{ <span style="font-weight:bold"><hello></span>Hello<span style="font-weight:bold"></hello></span> }
|
|
<span style="color:#3f8058">?</span><span style="color:#8e44ad;font-weight:bold"><Tag</span> <span style="color:#8e44ad;font-weight:bold">/></span><span style="color:#3f8058">;</span>
|
|
[ <span style="font-weight:bold"><tag</span> <span style="font-weight:bold">/></span> ( <span style="font-weight:bold"><tag</span> <span style="font-weight:bold">/></span> ]
|
|
<span style="color:#3f8058">,</span><span style="color:#8e44ad;font-weight:bold"><Tag/></span> <span style="color:#3f8058">=</span><span style="color:#8e44ad;font-weight:bold"><Tag/></span>
|
|
<span style="color:#3f8058">&&</span><span style="font-weight:bold"><tag/></span> <span style="color:#3f8058">||</span><span style="font-weight:bold"><tag/></span>
|
|
<span style="color:#fdbc4b;font-weight:bold">return </span><span style="font-weight:bold"><tag/></span> <span style="color:#3f8058">;</span>
|
|
<span style="color:#27ae60">default</span><span style="font-weight:bold"><tag/></span> <span style="color:#3f8058">;</span>
|
|
<span style="color:#8e44ad;font-weight:bold"><Tag></span> <span style="font-weight:bold"><tag></span> <span style="color:#8e44ad;font-weight:bold"><tag$/></span> <span style="font-weight:bold"></tag></span> return <span style="color:#8e44ad;font-weight:bold"></Tag></span>
|
|
|
|
anyWord<span style="color:#3f8058"><</span>noTag<span style="color:#3f8058">></span>
|
|
anyWord<span style="color:#7a7c7d">/*comment*/</span> <span style="color:#3f8058"><</span>noTag<span style="color:#3f8058">/></span>
|
|
<span style="color:#3f8058">.<</span>noTag<span style="color:#3f8058">></span>
|
|
<span style="color:#3f8058">&<</span>notag<span style="color:#3f8058">></span> <span style="color:#3f8058">|</span> <span style="color:#3f8058"><</span>noTag<span style="color:#3f8058">/></span>
|
|
<span style="color:#3f8058">%</span> <span style="color:#7a7c7d">/* comment*/</span> <span style="color:#3f8058"><</span>noTag<span style="color:#3f8058">/></span>
|
|
|
|
<span style="color:#7a7c7d">// Non-ASCII tag name & attribute</span>
|
|
<span style="color:#8e44ad;font-weight:bold"><日本語></日本語></span><span style="color:#3f8058">;</span>
|
|
<span style="color:#8e44ad;font-weight:bold"><Component</span> <span style="color:#27ae60">本本:本-本</span> <span style="color:#27ae60">aa本:本</span> <span style="color:#27ae60">aa:aa</span> <span style="color:#8e44ad;font-weight:bold">/></span>
|
|
|
|
<span style="color:#8e44ad;font-weight:bold"><Namespace.DeepNamespace.Component</span> <span style="color:#8e44ad;font-weight:bold">/></span><span style="color:#3f8058">;</span>
|
|
<span style="color:#8e44ad;font-weight:bold"><Component</span> <span style="color:#27aeae">{</span> <span style="color:#3f8058">...</span> x <span style="color:#27aeae">}</span> <span style="color:#27ae60">y</span>
|
|
<span style="color:#3f8058">=</span><span style="color:#27aeae">{</span><span style="color:#f67400">2</span> <span style="color:#27aeae">}</span> <span style="color:#27ae60">z</span> <span style="color:#8e44ad;font-weight:bold">/></span><span style="color:#3f8058">;</span>
|
|
|
|
<span style="font-weight:bold;font-style:italic">let</span> k1 <span style="color:#3f8058">= </span><span style="font-weight:bold"><div></span> <span style="font-weight:bold"><h2></span> Hello <span style="font-weight:bold"></h2></span> <span style="font-weight:bold"><h1></span> world <span style="font-weight:bold"></h1></div></span><span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> k2 <span style="color:#3f8058">= </span><span style="color:#8e44ad;font-weight:bold"><Button></span> <span style="font-weight:bold"><h2></span> Hello <span style="font-weight:bold"></h2></span> <span style="color:#8e44ad;font-weight:bold"></Button></span><span style="color:#3f8058">;</span>
|
|
|
|
<span style="color:#7a7c7d">// Empty tags</span>
|
|
<span style="font-weight:bold"><></></span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// no whitespace</span>
|
|
<span style="font-weight:bold">< ></ ></span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// lots of whitespace</span>
|
|
<span style="color:#3f8058"><</span> <span style="color:#7a7c7d">/*starting wrap*/</span> <span style="color:#3f8058">></</span> <span style="color:#7a7c7d">/*ending wrap*/</span><span style="color:#3f8058">>;</span> <span style="color:#7a7c7d">// comments in the tags</span>
|
|
<span style="font-weight:bold"><></span>hi<span style="font-weight:bold"></></span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// text inside</span>
|
|
<span style="font-weight:bold"><><span></span>hi<span style="font-weight:bold"></span><div></span>bye<span style="font-weight:bold"></div></></span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// children</span>
|
|
<span style="font-weight:bold"><><span></span>1<span style="font-weight:bold"></span><><span></span>2.1<span style="font-weight:bold"></span><span></span>2.2<span style="font-weight:bold"></span></><span></span>3<span style="font-weight:bold"></span></></span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// nested fragments</span>
|
|
<span style="font-weight:bold"><></span>#<span style="font-weight:bold"></></span><span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// # would cause scanning error if not in jsxtext</span>
|
|
|
|
<span style="color:#7a7c7d">// Tags after substitutions in templates</span>
|
|
<span style="color:#da4453">`aaa</span><span style="color:#3daee9">${</span><span style="font-weight:bold"><tag></tag></span><span style="color:#7a7c7d">//comment</span>
|
|
<span style="color:#7a7c7d">/*comment*/</span><span style="color:#8e44ad;font-weight:bold"><A/></span><span style="color:#3daee9">}</span><span style="color:#da4453">`</span>
|
|
|
|
<span style="color:#7a7c7d">// Don't highlight tags within variable declaration</span>
|
|
<span style="font-weight:bold;font-style:italic">let</span> myIdentity<span style="color:#3f8058">:</span> <span style="color:#3f8058"><</span>T<span style="color:#3f8058">></span>(arg<span style="color:#3f8058">:</span> T) <span style="font-weight:bold">=></span> T <span style="color:#3f8058">=</span> identity<span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">var</span> myIdentity<span style="color:#3f8058">:</span> <span style="color:#3f8058"><</span>U<span style="color:#3f8058">></span>(arg<span style="color:#3f8058">:</span> U) <span style="font-weight:bold">=></span> U <span style="color:#3f8058">=</span> identity<span style="color:#3f8058">;</span>
|
|
<span style="font-weight:bold">const</span> myIdentity<span style="color:#3f8058">:</span> {<T<span style="color:#3f8058">></span>(<span style="color:#2980b9">arg</span><span style="color:#3f8058">:</span> T)<span style="color:#3f8058">:</span> T} <span style="color:#3f8058">=</span> identity<span style="color:#3f8058">;</span>
|
|
|
|
<span style="color:#7a7c7d">// Don't highlight tags within interfaces and classes</span>
|
|
<span style="font-weight:bold;font-style:italic">interface</span> GenericIdentityFn {
|
|
<span style="color:#3f8058"><</span>T<span style="color:#3f8058">></span>(<span style="color:#2980b9">arg</span><span style="color:#3f8058">:</span> T)<span style="color:#3f8058">:</span> T<span style="color:#3f8058">;</span>
|
|
<span style="color:#3f8058"><</span>noTag <span style="color:#3f8058">/></span>
|
|
}
|
|
<span style="font-weight:bold;font-style:italic">class</span> Handler {
|
|
<span style="color:#2980b9">info</span><span style="color:#3f8058">:</span> <span style="color:#3f8058"><</span>T<span style="color:#3f8058">></span>(<span style="color:#2980b9">arg</span><span style="color:#3f8058">:</span> T)<span style="color:#3f8058">:</span> T <span style="color:#3f8058"><</span>noTag <span style="color:#3f8058">/>;</span>
|
|
<span style="font-weight:bold"><tag></span> <span style="font-weight:bold"></tag></span>
|
|
}
|
|
|
|
<span style="color:#7a7c7d">// Check character after tag name, do not highlight invalid tags</span>
|
|
<span style="color:#3f8058"><</span>noTag <span style="color:#3f8058">?</span>
|
|
<span style="color:#3f8058"><</span>noTag <span style="color:#3f8058">,</span>
|
|
<span style="color:#3f8058"><</span>noTag <span style="color:#7a7c7d">/* comment */</span> <span style="color:#3f8058">?</span>
|
|
<span style="color:#3f8058"><</span>noTag#
|
|
<span style="color:#3f8058"><</span>noTag<span style="color:#7a7c7d">/*comment*/</span>#
|
|
|
|
<span style="color:#7a7c7d">// Tagged template literals</span>
|
|
<span style="color:#8e44ad">tagFunc</span><span style="color:#da4453">`</span>
|
|
<span style="color:#da4453"> Hello world!</span>
|
|
<span style="color:#da4453"> </span><span style="color:#3daee9">${</span> <span style="color:#8e44ad;font-weight:bold"><Tag</span> <span style="color:#8e44ad;font-weight:bold">/></span><span style="color:#3f8058">;</span> <span style="color:#f67400">22</span> <span style="color:#3f8058">+</span> <span style="color:#f44f4f">"11"</span> <span style="color:#3daee9">}</span><span style="color:#da4453">`</span><span style="color:#3f8058">;</span>
|
|
obj<span style="color:#3f8058">.</span><span style="color:#2980b9">something</span><span style="color:#3f8058">.</span><span style="color:#8e44ad">tagFunc</span><span style="color:#da4453">`Setting </span><span style="color:#3daee9">${</span>setting<span style="color:#3daee9">}</span><span style="color:#da4453"> is </span><span style="color:#3daee9">${</span>value<span style="color:#3daee9">}</span><span style="color:#da4453">!`</span><span style="color:#3f8058">;</span>
|
|
</pre></body></html>
|