<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>This is a title with <a> or <!-- comment --> has normal text</title>
    <<beginfold id='1'>style</beginfold id='1'>>
    <beginfold id='2'>/*</beginfold id='2'> comment <endfold id='2'>*/</endfold id='2'>
    #xyz <beginfold id='3'>{</beginfold id='3'> color: red; <endfold id='3'>}</endfold id='3'>
    h1 <beginfold id='3'>{</beginfold id='3'> font: "Comic Sans"; <endfold id='3'>}</endfold id='3'>
    </<endfold id='1'>style</endfold id='1'>>
  </head>
  <body class="ui main">
    <p *ngFor="let name of names">Hello, {{ name }}!</p>
  </body>

  <beginfold id='4'><!--</beginfold id='4'> JavaScript code <endfold id='4'>--></endfold id='4'>
  <<beginfold id='5'>script</beginfold id='5'>>
    document.body.appendChild(document.createTextNode('Hello World!')); // comment
  </<endfold id='5'>script</endfold id='5'>>

  <beginfold id='4'><!--</beginfold id='4'> TypeScript code <endfold id='4'>--></endfold id='4'>
  <<beginfold id='5'>script</beginfold id='5'> type="text/typescript">
    class Student <beginfold id='6'>{</beginfold id='6'>
        fullName: string;
        constructor(public firstName: string, public middleInitial: string, public lastName: string) <beginfold id='6'>{</beginfold id='6'>
            this.fullName = firstName + " " + middleInitial + " " + lastName;
        <endfold id='6'>}</endfold id='6'>
    <endfold id='6'>}</endfold id='6'>
    let a: null = null;
    let b: number = 12_3;
  </<endfold id='5'>script</endfold id='5'>>

  <beginfold id='4'><!--</beginfold id='4'> JSX code <endfold id='4'>--></endfold id='4'>
  <<beginfold id='5'>script</beginfold id='5'> src="https://unpkg.com/babel-standalone@6/babel.min.js"></<endfold id='5'>script</endfold id='5'>>
  <<beginfold id='5'>script</beginfold id='5'> type="text/babel">
    ReactDOM.render(
      <beginfold id='7'><h1</beginfold id='7'>>Hello, world!</h1<endfold id='7'>></endfold id='7'>,
      document.getElementById('root')
    );
    function Story(props) <beginfold id='8'>{</beginfold id='8'>
      const SpecificStory = components<beginfold id='9'>[</beginfold id='9'>props.storyType<endfold id='9'>]</endfold id='9'>;
      return <beginfold id='10'><SpecificStory</beginfold id='10'> story=<beginfold id='11'>{</beginfold id='11'> props.story <endfold id='11'>}</endfold id='11'> attr2="&ref;" attr3="Hello\n" <endfold id='10'>/></endfold id='10'>;
    <endfold id='8'>}</endfold id='8'>
  </<endfold id='5'>script</endfold id='5'>>

  <beginfold id='4'><!--</beginfold id='4'> Mustache/Handlebars <endfold id='4'>--></endfold id='4'>
  <<beginfold id='5'>script</beginfold id='5'> type="x-tmpl-mustache">
    <beginfold id='12'>{{#movie</beginfold id='12'>}}
        <beginfold id='13'><div</beginfold id='13'>>
            <h1>{{title}}</h1>
            <img src="{{poster}}" alt="{{title}}"/>
        <endfold id='13'></div</endfold id='13'>>
        <beginfold id='13'><div</beginfold id='13'>>
            Rating - {{ratings.critics_rating}}
        <endfold id='13'></div</endfold id='13'>>
    <endfold id='12'>{{/movie}}</endfold id='12'>
    <beginfold id='12'>{{^movie</beginfold id='12'>}}
        <beginfold id='13'><div</beginfold id='13'>>
            Movie Does Not Exist :(
        <endfold id='13'></div</endfold id='13'>>
    <endfold id='12'>{{/movie}}</endfold id='12'>
    <beginfold id='14'>{{!</beginfold id='14'> comment <endfold id='14'>}}</endfold id='14'>
  </<endfold id='5'>script</endfold id='5'>>

  <beginfold id='4'><!--</beginfold id='4'> HTML template <endfold id='4'>--></endfold id='4'>
  <<beginfold id='5'>script</beginfold id='5'> type="text/html">
    <li><a href="link">Hello</a></li>
  </<endfold id='5'>script</endfold id='5'>>

  <beginfold id='4'><!--</beginfold id='4'> Close the block correctly after "?" in the JavaScript highlighter <endfold id='4'>--></endfold id='4'>
  <<beginfold id='5'>script</beginfold id='5'>>
    ?
  </<endfold id='5'>script</endfold id='5'>>

</html>
<beginfold id='4'><!--</beginfold id='4'>

HTML Syntax Highlight Sample File (Standard)

- Follow HTML5 standard.
- Contain some valid, but not recommended syntax.
- Can be rendered by modern web browsers.

@author Guo Yunhe guoyunhebrave@gmail.com
@date   2016-09-17

<endfold id='4'>--></endfold id='4'>

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>HTML Syntax Highlight Sample File (Standard)</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<<beginfold id='5'>script</beginfold id='5'> src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></<endfold id='5'>script</endfold id='5'>>
</head>

<body>

<beginfold id='4'><!--</beginfold id='4'> HTML5 defined elements <endfold id='4'>--></endfold id='4'>

<<beginfold id='15'>div</beginfold id='15'>>
    This is a div. <span>This is a span</span>
    <<beginfold id='15'>div</beginfold id='15'>>
        This is a div.
    </<endfold id='15'>div</endfold id='15'>>
</<endfold id='15'>div</endfold id='15'>>

<p>
    This is a paragraph. <em></em>
</p>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<a href="http://www.w3schools.com">This is a link</a>

<br>

<img src="http://placehold.it/200x150" alt="This is an image" width="200" height="150">

<hr>

<<beginfold id='16'>ul</beginfold id='16'>>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</<endfold id='16'>ul</endfold id='16'>>

<<beginfold id='17'>ol</beginfold id='17'>>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</<endfold id='17'>ol</endfold id='17'>>

<<beginfold id='18'>table</beginfold id='18'>>
    <tr>
        <th>Table head</th>
        <th>Table head</th>
        <th>Table head</th>
    </tr>
    <tr>
        <td>Table head</td>
        <td>Table head</td>
        <td>Table head</td>
    </tr>
</<endfold id='18'>table</endfold id='18'>>

<form>
    <input type="email" name="author"/>
    <input type="text" name="message"/>
    <button type="button">Send</button>
</form>

<<beginfold id='19'>main</beginfold id='19'>>
    <<beginfold id='20'>header</beginfold id='20'>>This is a header.</<endfold id='20'>header</endfold id='20'>>

    <<beginfold id='21'>nav</beginfold id='21'>>This is a nav.</<endfold id='21'>nav</endfold id='21'>>

    <<beginfold id='22'>article</beginfold id='22'>>
        <h2>This is an article.</h2>
        <p>This is an article.</p>
    </<endfold id='22'>article</endfold id='22'>>

    <<beginfold id='23'>aside</beginfold id='23'>>
        <h2>This is an aside.</h2>
    </<endfold id='23'>aside</endfold id='23'>>

    <<beginfold id='24'>footer</beginfold id='24'>></<endfold id='24'>footer</endfold id='24'>>

</<endfold id='19'>main</endfold id='19'>>

<beginfold id='4'><!--</beginfold id='4'> CDATA only in <math> and <svg> <endfold id='4'>--></endfold id='4'>

<![CDATA[x<y]]<endfold id='4'>></endfold id='4'> <beginfold id='4'><!--</beginfold id='4'> no CDATA, is a comment <endfold id='4'>--></endfold id='4'>
<<beginfold id='25'>math</beginfold id='25'>>
 <ms><beginfold id='26'><![CDATA[</beginfold id='26'>x<y<endfold id='26'>]]></endfold id='26'></ms> <beginfold id='4'><!--</beginfold id='4'> CDATA <endfold id='4'>--></endfold id='4'>
</<endfold id='25'>math</endfold id='25'>>

<beginfold id='4'><!--</beginfold id='4'><endfold id='4'>></endfold id='4'> no commment --> bla
<beginfold id='4'><!--</beginfold id='4'><endfold id='4'>-></endfold id='4'> no commment --> bla
<beginfold id='4'><!--</beginfold id='4'><endfold id='4'>--></endfold id='4'>  bla
<beginfold id='4'><!--</beginfold id='4'> commment <endfold id='4'>--></endfold id='4'> bla
<!ENTITY bad commment<endfold id='4'>></endfold id='4'> bla
<? bad commment ?<endfold id='4'>></endfold id='4'> bla

<beginfold id='4'><!--</beginfold id='4'> entity <endfold id='4'>--></endfold id='4'>
&notit; <beginfold id='4'><!--</beginfold id='4'> 'notit' is not valid <endfold id='4'>--></endfold id='4'>
&notit <beginfold id='4'><!--</beginfold id='4'> 'not' is entity with optional semicolon <endfold id='4'>--></endfold id='4'>
&lt;

<beginfold id='4'><!--</beginfold id='4'> Custom elements <endfold id='4'>--></endfold id='4'>

<booklist>
    <book>
        <booktitle>Just For Fun: The Story of an Accidental Revolutionary</booktitle>
        <author>Linus Torvalds</author>
        <description
            class="featured" title="Click to read full text...">
            A humorous autobiography of Linus Torvalds, the creator of the Linux
            kernel, co-written with David Diamond. The book primarily theorizes
            the Law of Linus that all evolution contributed by humanity starts
            for survival, sustains socially and entertains at last. As well as
            this the book explains Torvalds' view of himself, the free software
            movement and the development of Linux.</description>
    </book>
</booklist>

<large-space/>

<beginfold id='4'><!--</beginfold id='4'> Ends for single tag elements <endfold id='4'>--></endfold id='4'>
<br>
<br/>
<br />
<br></br>

<beginfold id='4'><!--</beginfold id='4'> Uppercase elements <endfold id='4'>--></endfold id='4'>

<<beginfold id='15'>DIV</beginfold id='15'>>
    THIS IS A DIV.
    <P>THIS IS A PARAGRAPH.</P>
    <H2>THIS IS A HEADING.</H2>
</<endfold id='15'>DIV</endfold id='15'>>

<beginfold id='4'><!--</beginfold id='4'> Arrtibutes <endfold id='4'>--></endfold id='4'>

<a href="#" style="background-color:rgba(0,0,0,0.3)" title="Click me">Magic button</a>

<img src="http://placehold.it/200x150" alt="This is an image" width="200"
     height="150" title="This is an image">

<beginfold id='4'><!--</beginfold id='4'> Attribute without value <endfold id='4'>--></endfold id='4'>

<select>
    <option selected>GNU/Linux</option>
    <option>BSD</option>
    <option>Windows</option>
    <option>macOS</option>
</select>

<beginfold id='4'><!--</beginfold id='4'> Attribute without quotes <endfold id='4'>--></endfold id='4'>

<<beginfold id='15'>div</beginfold id='15'> id=name class=a-sweet-block data-counter=175>This is a div.</<endfold id='15'>div</endfold id='15'>>

<input value=abc&amp;def/>

</body>

</html>
