241 lines
9.4 KiB
Plaintext
241 lines
9.4 KiB
Plaintext
<beginfold id='1'><!DOCTYPE</beginfold id='1'> HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"<endfold id='1'>></endfold id='1'>
|
|
<html>
|
|
<head>
|
|
<title>This is a title</title>
|
|
<<beginfold id='2'>style</beginfold id='2'>>
|
|
<beginfold id='3'>/*</beginfold id='3'> comment <endfold id='3'>*/</endfold id='3'>
|
|
#xyz <beginfold id='4'>{</beginfold id='4'> color: red; <endfold id='4'>}</endfold id='4'>
|
|
h1 <beginfold id='4'>{</beginfold id='4'> font: "Comic Sans"; <endfold id='4'>}</endfold id='4'>
|
|
</<endfold id='2'>style</endfold id='2'>>
|
|
</head>
|
|
<body class="ui main">
|
|
<p *ngFor="let name of names">Hello, {{ name }}!</p>
|
|
</body>
|
|
|
|
<beginfold id='5'><!--</beginfold id='5'> JavaScript code <endfold id='5'>--></endfold id='5'>
|
|
<<beginfold id='6'>script</beginfold id='6'>>
|
|
document.body.appendChild(document.createTextNode('Hello World!')); // comment
|
|
</<endfold id='6'>script</endfold id='6'>>
|
|
|
|
<beginfold id='5'><!--</beginfold id='5'> TypeScript code <endfold id='5'>--></endfold id='5'>
|
|
<<beginfold id='6'>script</beginfold id='6'> type="text/typescript">
|
|
class Student <beginfold id='7'>{</beginfold id='7'>
|
|
fullName: string;
|
|
constructor(public firstName: string, public middleInitial: string, public lastName: string) <beginfold id='7'>{</beginfold id='7'>
|
|
this.fullName = firstName + " " + middleInitial + " " + lastName;
|
|
<endfold id='7'>}</endfold id='7'>
|
|
<endfold id='7'>}</endfold id='7'>
|
|
let a: null = null;
|
|
let b: number = 12_3;
|
|
</<endfold id='6'>script</endfold id='6'>>
|
|
|
|
<beginfold id='5'><!--</beginfold id='5'> JSX code <endfold id='5'>--></endfold id='5'>
|
|
<<beginfold id='6'>script</beginfold id='6'> src="https://unpkg.com/babel-standalone@6/babel.min.js"></<endfold id='6'>script</endfold id='6'>>
|
|
<<beginfold id='6'>script</beginfold id='6'> type="text/babel">
|
|
ReactDOM.render(
|
|
<beginfold id='8'><h1</beginfold id='8'>>Hello, world!</h1<endfold id='8'>></endfold id='8'>,
|
|
document.getElementById('root')
|
|
);
|
|
function Story(props) <beginfold id='9'>{</beginfold id='9'>
|
|
const SpecificStory = components<beginfold id='10'>[</beginfold id='10'>props.storyType<endfold id='10'>]</endfold id='10'>;
|
|
return <beginfold id='11'><SpecificStory</beginfold id='11'> story=<beginfold id='12'>{</beginfold id='12'> props.story <endfold id='12'>}</endfold id='12'> attr2="&ref;" attr3="Hello\n" <endfold id='11'>/></endfold id='11'>;
|
|
<endfold id='9'>}</endfold id='9'>
|
|
</<endfold id='6'>script</endfold id='6'>>
|
|
|
|
<beginfold id='5'><!--</beginfold id='5'> Mustache/Handlebars <endfold id='5'>--></endfold id='5'>
|
|
<<beginfold id='6'>script</beginfold id='6'> type="x-tmpl-mustache">
|
|
<beginfold id='13'>{{#movie</beginfold id='13'>}}
|
|
<beginfold id='14'><div</beginfold id='14'>>
|
|
<h1>{{title}}</h1>
|
|
<img src="{{poster}}" alt="{{title}}"/>
|
|
<endfold id='14'></div</endfold id='14'>>
|
|
<beginfold id='14'><div</beginfold id='14'>>
|
|
Rating - {{ratings.critics_rating}}
|
|
<endfold id='14'></div</endfold id='14'>>
|
|
<endfold id='13'>{{/movie}}</endfold id='13'>
|
|
<beginfold id='13'>{{^movie</beginfold id='13'>}}
|
|
<beginfold id='14'><div</beginfold id='14'>>
|
|
Movie Does Not Exist :(
|
|
<endfold id='14'></div</endfold id='14'>>
|
|
<endfold id='13'>{{/movie}}</endfold id='13'>
|
|
<beginfold id='15'>{{!</beginfold id='15'> comment <endfold id='15'>}}</endfold id='15'>
|
|
</<endfold id='6'>script</endfold id='6'>>
|
|
|
|
<beginfold id='5'><!--</beginfold id='5'> HTML template <endfold id='5'>--></endfold id='5'>
|
|
<<beginfold id='6'>script</beginfold id='6'> type="text/html">
|
|
<li><a href="link">Hello</a></li>
|
|
</<endfold id='6'>script</endfold id='6'>>
|
|
|
|
<beginfold id='5'><!--</beginfold id='5'> Close the block correctly after "?" in the JavaScript highlighter <endfold id='5'>--></endfold id='5'>
|
|
<<beginfold id='6'>script</beginfold id='6'>>
|
|
?
|
|
</<endfold id='6'>script</endfold id='6'>>
|
|
|
|
</html>
|
|
<beginfold id='5'><!--</beginfold id='5'>
|
|
|
|
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='5'>--></endfold id='5'>
|
|
|
|
<beginfold id='1'><!DOCTYPE</beginfold id='1'> html<endfold id='1'>></endfold id='1'>
|
|
|
|
<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='6'>script</beginfold id='6'> src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></<endfold id='6'>script</endfold id='6'>>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<beginfold id='5'><!--</beginfold id='5'> HTML5 defined elements <endfold id='5'>--></endfold id='5'>
|
|
|
|
<<beginfold id='16'>div</beginfold id='16'>>
|
|
This is a div. <span>This is a span</span>
|
|
<<beginfold id='16'>div</beginfold id='16'>>
|
|
This is a div.
|
|
</<endfold id='16'>div</endfold id='16'>>
|
|
</<endfold id='16'>div</endfold id='16'>>
|
|
|
|
<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='17'>ul</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'>ul</endfold id='17'>>
|
|
|
|
<<beginfold id='18'>ol</beginfold id='18'>>
|
|
<li>List item</li>
|
|
<li>List item</li>
|
|
<li>List item</li>
|
|
<li>List item</li>
|
|
<li>List item</li>
|
|
</<endfold id='18'>ol</endfold id='18'>>
|
|
|
|
<<beginfold id='19'>table</beginfold id='19'>>
|
|
<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='19'>table</endfold id='19'>>
|
|
|
|
<form>
|
|
<input type="email" name="author"/>
|
|
<input type="text" name="message"/>
|
|
<button type="button">Send</button>
|
|
</form>
|
|
|
|
<<beginfold id='20'>main</beginfold id='20'>>
|
|
<<beginfold id='21'>header</beginfold id='21'>>This is a header.</<endfold id='21'>header</endfold id='21'>>
|
|
|
|
<<beginfold id='22'>nav</beginfold id='22'>>This is a nav.</<endfold id='22'>nav</endfold id='22'>>
|
|
|
|
<<beginfold id='23'>article</beginfold id='23'>>
|
|
<h2>This is an article.</h2>
|
|
<p>This is an article.</p>
|
|
</<endfold id='23'>article</endfold id='23'>>
|
|
|
|
<<beginfold id='24'>aside</beginfold id='24'>>
|
|
<h2>This is an aside.</h2>
|
|
</<endfold id='24'>aside</endfold id='24'>>
|
|
|
|
<<beginfold id='25'>footer</beginfold id='25'>></<endfold id='25'>footer</endfold id='25'>>
|
|
|
|
</<endfold id='20'>main</endfold id='20'>>
|
|
|
|
<beginfold id='5'><!--</beginfold id='5'> Custom elements <endfold id='5'>--></endfold id='5'>
|
|
|
|
<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='5'><!--</beginfold id='5'> Ends for single tag elements <endfold id='5'>--></endfold id='5'>
|
|
<br>
|
|
<br/>
|
|
<br />
|
|
<br></br>
|
|
|
|
<beginfold id='5'><!--</beginfold id='5'> Uppercase elements <endfold id='5'>--></endfold id='5'>
|
|
|
|
<<beginfold id='16'>DIV</beginfold id='16'>>
|
|
THIS IS A DIV.
|
|
<P>THIS IS A PARAGRAPH.</P>
|
|
<H2>THIS IS A HEADING.</H2>
|
|
</<endfold id='16'>DIV</endfold id='16'>>
|
|
|
|
<beginfold id='5'><!--</beginfold id='5'> Arrtibutes <endfold id='5'>--></endfold id='5'>
|
|
|
|
<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='5'><!--</beginfold id='5'> Attribute without value <endfold id='5'>--></endfold id='5'>
|
|
|
|
<select>
|
|
<option selected>GNU/Linux</option>
|
|
<option>BSD</option>
|
|
<option>Windows</option>
|
|
<option>macOS</option>
|
|
</select>
|
|
|
|
<beginfold id='5'><!--</beginfold id='5'> Attribute without quotes <endfold id='5'>--></endfold id='5'>
|
|
|
|
<<beginfold id='16'>div</beginfold id='16'> id=name class=a-sweet-block data-counter=175>This is a div.</<endfold id='16'>div</endfold id='16'>>
|
|
|
|
<input value=abc&def/>
|
|
|
|
</body>
|
|
|
|
</html>
|