<Comment>/*</Comment><br/>
<Comment> * CSS Syntax Highlight Sample File (Complex)</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * This file contains complex CSS syntax that can test unexpected situations.</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * @author  Guo Yunhe guoyunhebrave@gmail.com</Comment><br/>
<Comment> * @date    2016-09-16</Comment><br/>
<Comment> */</Comment><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>/* Comments with special content */</Comment><br/>
<dsNormal></dsNormal><br/>
<Comment>/*</Comment><br/>
<Comment> * .class-selector #id "string" 'comment' // comment {} [] ()  /* comment</Comment><br/>
<Comment> * </Comment><Alert Level 2>TODO</Alert Level 2><Comment> </Comment><Alert Level 2>BUG</Alert Level 2><Comment> DEBUG</Comment><br/>
<Comment> * body {</Comment><br/>
<Comment> *    margin: 0 !important;</Comment><br/>
<Comment> * }</Comment><br/>
<Comment> */</Comment><br/>
<dsNormal></dsNormal><br/>
<Comment>/* Comments in special positions */</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>header</Normal Text><Comment>/* comment here */</Comment><Selector Class>.active</Selector Class><Normal Text> </Normal Text><Comment>/* comment here */</Comment><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Comment>/* comment here */</Comment><Normal Text> </Normal Text><Property>color</Property><Normal Text> : </Normal Text><Comment>/* comment here */</Comment><Normal Text> </Normal Text><Value>blue</Value><Comment>/* comment here */</Comment><Normal Text>;</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: Arial </Normal Text><Comment>/* comment here */</Comment><Normal Text>,</Normal Text><br/>
<Normal Text>        </Normal Text><String>"Droid Sans"</String><Normal Text>, </Normal Text><Comment>/* comment here */</Comment><br/>
<Normal Text>        </Normal Text><Value>sans-serif</Value><Comment>/* comment here */</Comment><Normal Text>;</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Comment>/* comment here */</Comment><Normal Text> and (</Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Value>300px</Value><Normal Text> </Normal Text><Comment>/* comment here */</Comment><Normal Text>) </Normal Text><Comment>/* comment here */</Comment><Normal Text> {</Normal Text><Comment>/* comment here */</Comment><Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>/* Strings with special content */</Comment><br/>
<dsNormal></dsNormal><br/>
<At Rule>@import</At Rule><Normal Text> url(</Normal Text><String>"{} $variable /* comment */"</String><Normal Text>);</Normal Text><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>/* Without extra breaklines and spaces */</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>pre</Normal Text><Selector Class>.primary</Selector Class><Selector Pseudo>:hover</Selector Pseudo><Selector Class>.large</Selector Class><Selector Pseudo>:nth-child</Selector Pseudo><Normal Text>(2n-1){</Normal Text><Property>font-size</Property><Normal Text>:</Normal Text><Value>17px</Value><Normal Text>;</Normal Text><Property>font-family</Property><Normal Text>:</Normal Text><String>"Noto Sans"</String><Normal Text>;</Normal Text><Property>-webkit-box-shadow</Property><Normal Text>:</Normal Text><Value>1px</Value><Normal Text> </Normal Text><Value>1px</Value><Normal Text> </Normal Text><Value>3px</Value><Normal Text> </Normal Text><Function>rgba</Function><Normal Text>(</Normal Text><Value>0</Value><Normal Text>,</Normal Text><Value>0</Value><Normal Text>,</Normal Text><Value>0</Value><Normal Text>,</Normal Text><Value>0.3</Value><Normal Text>)}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>/* With unnecessary breaklines and spaces */</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>blockquote </Normal Text><Selector Class>.ref</Selector Class><br/>
<Normal Text>    {</Normal Text><br/>
<Normal Text>             </Normal Text><Property>flex</Property><Normal Text> : </Normal Text><Value>0</Value><Normal Text> </Normal Text><Value>1</Value><Normal Text> </Normal Text><Value>30%</Value><Normal Text>;</Normal Text><br/>
<Normal Text>        </Normal Text><Property>flex-wrap</Property><Normal Text> : wrap;</Normal Text><br/>
<Normal Text>    }</Normal Text><br/>
<dsNormal></dsNormal><br/>
<At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> and (</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Normal Text>) {</Normal Text><br/>
<Normal Text>  </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Value>500px</Value><Normal Text>; } }</Normal Text><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>/* Special selectors: HTML5 allows user defined tags */</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>header {</Normal Text><br/>
<Normal Text>    flex {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Value>300px</Value><Normal Text>;</Normal Text><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
