Hugging Face's logo

Spaces:
fast72
/
code
Sleeping

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

Update public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +49 -64
public/index.html CHANGED
@@ -3,92 +3,77 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeMirror 5 - Multi Language Editor</title>
7
+ <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
8
+ <script src="https://codemirror.net/codemirror.js"></script>
9
+ <script src="https://codemirror.net/addon/edit/closebrackets.js"></script>
10
+ <script src="https://codemirror.net/addon/selection/active-line.js"></script>
11
+ <script src="https://codemirror.net/addon/lint/lint.js"></script>
12
+
13
+ <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
14
+ <script src="https://codemirror.net/mode/python/python.js"></script>
15
+ <script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
16
+ <script src="https://codemirror.net/mode/css/css.js"></script>
17
+ <script src="https://codemirror.net/mode/xml/xml.js"></script>
18
+ <script src="https://codemirror.net/mode/php/php.js"></script>
19
+ <script src="https://codemirror.net/mode/clike/clike.js"></script>
20
+ <script src="https://codemirror.net/mode/sql/sql.js"></script>
21
+
22
  <style>
23
  body { font-family: Arial, sans-serif; margin: 20px; }
24
+ #editor-container { width: 100%; max-width: 800px; margin: auto; }
25
  #editor { height: 500px; border: 1px solid #ddd; }
26
  select, button, label { margin: 5px; padding: 8px; font-size: 16px; }
27
  </style>
28
  </head>
29
  <body>
30
+ <div id="editor-container">
31
+ <h2>CodeMirror 5 Editor</h2>
32
+ <select id="language">
33
+ <option value="javascript">JavaScript</option>
34
+ <option value="python">Python</option>
35
+ <option value="htmlmixed">HTML</option>
36
+ <option value="css">CSS</option>
37
+ <option value="php">PHP</option>
38
+ <option value="clike">C / C++ / Java</option>
39
+ <option value="sql">SQL</option>
40
+ <option value="xml">XML</option>
41
+ </select>
42
+ <button onclick="downloadFile()">Download</button>
43
+ <label><input type="checkbox" id="wrapCode"> Wrap Code</label>
44
+ <textarea id="code">// Start coding...</textarea>
45
+ <div id="editor"></div>
46
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
 
48
+ <script>
49
+ let editor = CodeMirror(document.getElementById("editor"), {
50
+ value: "// Start coding...\nconsole.log('Hello, CodeMirror 5!');",
51
+ lineNumbers: true,
52
+ mode: "javascript",
53
+ theme: "default",
54
+ matchBrackets: true,
55
+ autoCloseBrackets: true,
56
+ styleActiveLine: true,
57
+ indentUnit: 4,
58
+ tabSize: 4
59
+ });
 
 
60
 
61
  document.getElementById("language").addEventListener("change", function() {
62
+ editor.setOption("mode", this.value);
63
  });
64
 
65
  document.getElementById("wrapCode").addEventListener("change", function() {
66
+ editor.setOption("lineWrapping", this.checked);
67
  });
68
 
69
  function downloadFile() {
70
+ const content = editor.getValue();
71
  const blob = new Blob([content], { type: "text/plain" });
72
  const a = document.createElement("a");
73
  a.href = URL.createObjectURL(blob);
74
  a.download = "code.txt";
75
  a.click();
76
  }
 
 
77
  </script>
78
  </body>
79
  </html>