|
|
@@ -0,0 +1,67 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
|
+ <link rel="stylesheet" data-name="vs/editor/editor.main" href="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.css">
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<h2>Monaco Editor HTML test page</h2>
|
|
|
+<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // Loading basic-languages to get the html language definition
|
|
|
+ // Loading monaco-typescript to get javascript coloring
|
|
|
+ var require = {
|
|
|
+ paths: {
|
|
|
+ 'vs/basic-languages': '../node_modules/monaco-languages/release',
|
|
|
+ 'vs/language/typescript': '../node_modules/monaco-typescript/release',
|
|
|
+ 'vs/language/html': '../release/dev',
|
|
|
+ 'vs': '../node_modules/monaco-editor-core/dev/vs'
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<script src="../node_modules/monaco-editor-core/dev/vs/loader.js"></script>
|
|
|
+<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.nls.js"></script>
|
|
|
+<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script>
|
|
|
+
|
|
|
+<script>
|
|
|
+ require([
|
|
|
+ 'vs/basic-languages/src/monaco.contribution',
|
|
|
+ 'vs/language/typescript/src/monaco.contribution',
|
|
|
+ 'vs/language/html/monaco.contribution'
|
|
|
+ ], function() {
|
|
|
+ var editor = monaco.editor.create(document.getElementById('container'), {
|
|
|
+ value: [
|
|
|
+ '<!DOCTYPE HTML>',
|
|
|
+ '<!--',
|
|
|
+ ' Comments are overrated',
|
|
|
+ '-->',
|
|
|
+ '<html>',
|
|
|
+ '<head>',
|
|
|
+ ' <title>HTML Sample</title>',
|
|
|
+ ' <meta http-equiv="X-UA-Compatible" content="IE=edge">',
|
|
|
+ ' <style type="text/css">',
|
|
|
+ ' h1 {',
|
|
|
+ ' color: #CCA3A3;',
|
|
|
+ ' }',
|
|
|
+ ' </style>',
|
|
|
+ ' <script type="text/javascript">',
|
|
|
+ ' window.alert("I am a sample...");',
|
|
|
+ ' var x = 3;',
|
|
|
+ ' </'+'script>',
|
|
|
+ '</head>',
|
|
|
+ '<body>',
|
|
|
+ ' <h1>Heading No.1</h1>',
|
|
|
+ ' <input disabled type="button" value="Click me" />',
|
|
|
+ '</body>',
|
|
|
+ '</html>'
|
|
|
+ ].join('\n'),
|
|
|
+ language: 'html'
|
|
|
+ });
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
Alex Dima