index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>&lt;juicy-ace-editor&gt;</title>
    <link rel="stylesheet" href="http://juicy.github.io/juicy-tile-list/examples/github-markdown.css">

    <!-- Importing Web Component's Polyfill -->
    <script src="//cdn.jsdelivr.net/webcomponentsjs/0.7.10/webcomponents.min.js"></script>

    <!-- Importing Custom Elements -->
    <link rel="import" href="juicy-ace-editor.html">
	<style type="text/css" media="screen">
		html,body{
			height: 100%;
		}
	    #editor {
	        top: 0;
	        right: 0;
	        bottom: 0;
	        left: 0;
	        width: 100%;
	        height: 40%;
	    }
	    juicy-ace-editor {
	    	margin: 15px 15px;
	        width: 45%;
            min-height: 12em;
	    }
	    .markdown-body{
	    	margin: 1em auto;
	    	width: 70%;
	    }
	    .code-comparison{
	    	display: flex;
	    	justify-content: space-around ;
	    }
	    .code-comparison>section{
	    	width: 45%;
	    }
	    iframe{ float: right; }
	</style>
</head>
<body>
<article class="markdown-body">
    <iframe src="http://ghbtns.com/github-btn.html?user=juicy&amp;repo=juicy-ace-editor&amp;type=fork&amp;count=true&amp;size=medium"
allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
    <iframe src="http://ghbtns.com/github-btn.html?user=juicy&amp;repo=juicy-ace-editor&amp;type=watch&amp;count=true&amp;size=medium"
	allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
    <h1>&lt;juicy-ace-editor&gt;</h1>
    <blockquote><p>
    	Even <strong>more</strong> embeddable code editor.
		Custom Element - just one tag, and no JS needed to provide <a href="http://ace.c9.io/">Ace</a>
		- The High Performance Code Editor</p></blockquote>
    <!-- Using Custom Elements -->
    <div class="code-comparison">
    <section>
	    <p>Here you have:
			<pre>&lt;juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html"&gt;
&lt;juicy-ace-editor&gt;</pre>element.
		</p>
		<p>
			You can switch modes and themes as regular HTML attributes to
			<a href="https://github.com/ajaxorg/ace-builds/tree/master/src">
				whatever is supported by Ace
			</a>
		</p>
	</section>

    <juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html">&lt;p&gt;Here you have:
	&lt;pre&gt;&amp;lt;juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html"&amp;gt;
&amp;lt;/juicy-ace-editor&amp;gt;&lt;/pre&gt;element.
&lt;/p&gt;
&lt;p&gt;
	You can switch modes and themes as regular HTML attributes to
	&lt;a href="https://github.com/ajaxorg/ace-builds/tree/master/src"&gt;
		whatever is supported by Ace
	&lt;/a&gt;
&lt;/p&gt;
	</juicy-ace-editor>
	</div>


	<p>Ok, in fact you have seen
		<pre>&lt;juicy-ace-editor theme="ace/theme/monokai" mode="ace/mode/html"&gt;&amp;lt;p&amp;gt;Here you have:..</pre>
	</p>

	<h3>Looking for a more full-featured demo? Check out the <a href="kitchen-sink.html">kitchen sink</a>.</h3>


</article>
</body>
</html>