Hugging Face's logo

Spaces:
fast72
/
code
Sleeping

App Files Community
fast72 commited on
Commit
5a93321
·
verified ·
1 Parent(s): 7acf60e

Update public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +85 -33
public/index.html CHANGED
@@ -3,40 +3,92 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Code Editor</title>
7
- <link rel="stylesheet" href="styles.css">
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/codemirror.min.css">
9
-
10
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/codemirror.min.js"></script>
11
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/addon/edit/closebrackets.js"></script>
12
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/addon/lint/lint.js"></script>
13
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/addon/selection/active-line.js"></script>
14
-
15
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/mode/javascript/javascript.js"></script>
16
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/mode/python/python.js"></script>
17
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/mode/htmlmixed/htmlmixed.js"></script>
18
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/mode/css/css.js"></script>
19
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/mode/xml/xml.js"></script>
20
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/mode/php/php.js"></script>
21
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/mode/clike/clike.js"></script>
22
- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.12/mode/sql/sql.js"></script>
23
  </head>
24
  <body>
25
- <div class="editor-container">
26
- <select id="language">
27
- <option value="javascript">JavaScript</option>
28
- <option value="python">Python</option>
29
- <option value="htmlmixed">HTML</option>
30
- <option value="css">CSS</option>
31
- <option value="xml">XML</option>
32
- <option value="php">PHP</option>
33
- <option value="clike">C / C++ / Java</option>
34
- <option value="sql">SQL</option>
35
- </select>
36
- <button onclick="downloadFile()">Download</button>
37
- <label><input type="checkbox" id="wrapCode"> Wrap Code</label>
38
- <textarea id="code">console.log("Hello, World!");</textarea>
39
- </div>
40
- <script src="script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  </body>
42
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeMirror 6 - Multi Language Editor</title>
7
+ <style>
8
+ body { font-family: Arial, sans-serif; margin: 20px; }
9
+ #editor { height: 500px; border: 1px solid #ddd; }
10
+ select, button, label { margin: 5px; padding: 8px; font-size: 16px; }
11
+ </style>
 
 
 
 
 
 
 
 
 
 
 
12
  </head>
13
  <body>
14
+ <h2>CodeMirror 6 Editor</h2>
15
+ <select id="language">
16
+ <option value="javascript">JavaScript</option>
17
+ <option value="python">Python</option>
18
+ <option value="html">HTML</option>
19
+ <option value="css">CSS</option>
20
+ <option value="php">PHP</option>
21
+ <option value="java">Java</option>
22
+ <option value="cpp">C++</option>
23
+ <option value="c">C</option>
24
+ <option value="sql">SQL</option>
25
+ <option value="xml">XML</option>
26
+ <option value="rust">Rust</option>
27
+ <option value="go">Go</option>
28
+ </select>
29
+ <button onclick="downloadFile()">Download</button>
30
+ <label><input type="checkbox" id="wrapCode"> Wrap Code</label>
31
+ <div id="editor"></div>
32
+
33
+ <script type="module">
34
+ import { basicSetup } from "https://cdn.skypack.dev/@codemirror/basic-setup";
35
+ import { EditorView, keymap } from "https://cdn.skypack.dev/@codemirror/view";
36
+ import { EditorState } from "https://cdn.skypack.dev/@codemirror/state";
37
+ import { indentWithTab } from "https://cdn.skypack.dev/@codemirror/commands";
38
+ import { javascript } from "https://cdn.skypack.dev/@codemirror/lang-javascript";
39
+ import { python } from "https://cdn.skypack.dev/@codemirror/lang-python";
40
+ import { html } from "https://cdn.skypack.dev/@codemirror/lang-html";
41
+ import { css } from "https://cdn.skypack.dev/@codemirror/lang-css";
42
+ import { php } from "https://cdn.skypack.dev/@codemirror/lang-php";
43
+ import { java } from "https://cdn.skypack.dev/@codemirror/lang-java";
44
+ import { cpp } from "https://cdn.skypack.dev/@codemirror/lang-cpp";
45
+ import { c } from "https://cdn.skypack.dev/@codemirror/lang-c";
46
+ import { sql } from "https://cdn.skypack.dev/@codemirror/lang-sql";
47
+ import { xml } from "https://cdn.skypack.dev/@codemirror/lang-xml";
48
+ import { rust } from "https://cdn.skypack.dev/@codemirror/lang-rust";
49
+ import { go } from "https://cdn.skypack.dev/@codemirror/lang-go";
50
+
51
+ const languageModes = {
52
+ javascript, python, html, css, php, java, cpp, c, sql, xml, rust, go
53
+ };
54
+
55
+ let editor;
56
+ function createEditor(language = "javascript") {
57
+ if (editor) editor.destroy();
58
+
59
+ const startState = EditorState.create({
60
+ doc: "// Start coding...",
61
+ extensions: [
62
+ basicSetup,
63
+ keymap.of([indentWithTab]),
64
+ languageModes[language]()
65
+ ]
66
+ });
67
+
68
+ editor = new EditorView({
69
+ state: startState,
70
+ parent: document.getElementById("editor")
71
+ });
72
+ }
73
+
74
+ document.getElementById("language").addEventListener("change", function() {
75
+ createEditor(this.value);
76
+ });
77
+
78
+ document.getElementById("wrapCode").addEventListener("change", function() {
79
+ editor.dispatch({ effects: EditorView.lineWrapping.of(this.checked) });
80
+ });
81
+
82
+ function downloadFile() {
83
+ const content = editor.state.doc.toString();
84
+ const blob = new Blob([content], { type: "text/plain" });
85
+ const a = document.createElement("a");
86
+ a.href = URL.createObjectURL(blob);
87
+ a.download = "code.txt";
88
+ a.click();
89
+ }
90
+
91
+ createEditor();
92
+ </script>
93
  </body>
94
  </html>