86 lines
1.8 KiB
HTML
86 lines
1.8 KiB
HTML
|
<!--
|
||
|
|
@license
|
||
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||
|
|
Code distributed by Google as part of the polymer project is also
|
||
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||
|
|
-->
|
||
|
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>prettify-element Demo</title>
|
||
|
|
|
||
|
|
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||
|
|
<link rel="import" href="prettify-element.html">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body unresolved>
|
||
|
|
|
||
|
|
<p>Highlight from text value:</p>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<prettify-element text='<!DOCTYPE html>
|
||
|
|
<title>Title</title>
|
||
|
|
|
||
|
|
<style>body {width: 500px;}</style>
|
||
|
|
|
||
|
|
<script type="application/javascript">
|
||
|
|
function $init() {return true;}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<p checked class="title" id="title">Title</p>
|
||
|
|
<!-- here goes the rest of the page -->
|
||
|
|
</body>'>
|
||
|
|
</prettify-element>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<p>Highlight text content:</p>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<prettify-element>
|
||
|
|
# hello world
|
||
|
|
|
||
|
|
you can write text [with links](http://example.com) inline or [link references][1].
|
||
|
|
|
||
|
|
* one _thing_ has *em*phasis
|
||
|
|
* two __things__ are **bold**
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
hello world
|
||
|
|
===========
|
||
|
|
|
||
|
|
<this_is inline="xml"></this_is>
|
||
|
|
|
||
|
|
> markdown is so cool
|
||
|
|
|
||
|
|
so are code segments
|
||
|
|
|
||
|
|
1. one thing (yeah!)
|
||
|
|
2. two thing `i can write code`, and `more` wipee!
|
||
|
|
|
||
|
|
[1]: http://example.com
|
||
|
|
</prettify-element>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<p>Highlight using template:</p>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<prettify-element>
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<p>HTML is inert in <template></template>, we can use it to highlight
|
||
|
|
<strong>a subset</strong> of HTML directly without escaping.</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</prettify-element>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|