test/grammar-css.html

<!doctype html>
<html>
    <head>
        
        <meta charset="utf-8">
        
        <script src="ace/ace.js" type="text/javascript" data-ace-base="ace" charset="utf-8"></script>
        <script src="../build/ace_grammar.js"></script>
        <script src="grammars/css.js"></script>
        <script src="demo.js"></script>
        
        <style type="text/css">
            body {
                position: relative;
            }

            #editor { 
                margin: 0;
                position: relative;
                width: 100%;
                height: 100%;
                min-width:500px;
                min-height:500px;
            }
        </style>
        
        <title>ACE: Dynamic CSS Grammar Demo</title>
    </head>
    <body>
        
        <h3>ACE (v.<span id="editor-version">0</span>) Grammar (v.<span id="grammar-version">0</span>): Dynamic CSS Grammar</h3>

<pre id="editor"></pre>
<textarea id="code" style="display:none">/* Some example CSS */

@import url("something.css");

body {
  margin: 0; 
  padding: 3em 6em; 
  font-family: tahoma, arial, sans-serif;
  color: #000;
}

#navigation a {
  font-weight: bold;
  text-decoration: none !important;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.7em;
}

h1:before, h2:before {
  content: "::";
}

code {
  font-family: courier, monospace;
  font-size: 80%;
  color: #418A8A;
}</textarea>
        <p></p>

        <script>
        // <![CDATA[
        ace_grammar_demo("editor", document.getElementById("code").value, [
            {language : "css", grammar : css_grammar}
        ]);
        // ]]>
        </script>
    </body>
</html>