CodeStudio/index.html at main · bocaletto-luca/CodeStudio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>CodeStudio – Multi-Language Web Editor</title>
  <meta name="description" content="CodeStudio: browser-based multi-language code editor with live preview, syntax highlighting, file load/save/reset, and theme toggling."/>
  <meta name="author" content="Bocaletto Luca"/>
  <meta name="robots" content="index, follow"/>
  <meta name="keywords" content="CodeStudio, code editor, syntax highlighting, live preview, Markdown, HTML, JavaScript, Python, C++, SQL, more"/>
  <link rel="canonical" href="https://bocaletto-luca.github.io/CodeStudio/index.html"/>

  <!-- Open Graph -->
  <meta property="og:title" content="CodeStudio – Multi-Language Web Editor"/>
  <meta property="og:description" content="Online code editor supporting 20+ languages with live preview and dark/light themes."/>
  <meta property="og:url" content="https://bocaletto-luca.github.io/CodeStudio/index.html"/>
  <meta property="og:site_name" content="CodeStudio"/>
  <meta property="article:author" content="https://github.com/bocaletto-luca"/>

  <!-- JSON-LD -->
  <script type="application/ld+json">
  {
    "@context":"https://schema.org",
    "@type":"WebSite",
    "name":"CodeStudio",
    "url":"https://bocaletto-luca.github.io/CodeStudio/",
    "author":{
      "@type":"Person",
      "name":"Bocaletto Luca",
      "url":"https://github.com/bocaletto-luca"
    }
  }
  </script>

  <!-- Styles -->
  <link rel="stylesheet" href="style.css"/>

  <!-- CodeMirror CSS & theme -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/lib/codemirror.min.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/theme/dracula.min.css"/>

  <!-- Preview libraries -->
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/skulpt@1.3.0/dist/skulpt.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/skulpt@1.3.0/dist/skulpt-stdlib.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/alasql@1.5.0/dist/alasql.min.js"></script>

  <!-- CodeMirror & modes -->
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/lib/codemirror.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/markdown/markdown.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/htmlmixed/htmlmixed.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/css/css.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/javascript/javascript.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/xml/xml.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/yaml/yaml.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/python/python.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/sql/sql.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/clike/clike.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/php/php.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/ruby/ruby.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/go/go.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/rust/rust.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/swift/swift.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/kotlin/kotlin.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.13/mode/shell/shell.min.js"></script>

  <!-- App logic -->
  <script src="main.js" defer></script>
</head>

<body class="light">
  <header>
    <div class="logo">CodeStudio</div>
    <select id="language">
      <optgroup label="Markup & Data">
        <option value="markdown">Markdown (.md)</option>
        <option value="html">HTML &amp; CSS (.html)</option>
        <option value="xml">XML (.xml)</option>
        <option value="json">JSON (.json)</option>
        <option value="yaml">YAML (.yaml)</option>
      </optgroup>
      <optgroup label="Scripting & Web">
        <option value="javascript">JavaScript (.js)</option>
        <option value="php">PHP (.php)</option>
        <option value="ruby">Ruby (.rb)</option>
      </optgroup>
      <optgroup label="General-Purpose">
        <option value="python">Python (.py)</option>
        <option value="java">Java (.java)</option>
        <option value="c">C (.c)</option>
        <option value="cpp">C++ (.cpp)</option>
        <option value="csharp">C# (.cs)</option>
        <option value="vb">Visual Basic (.vb)</option>
        <option value="go">Go (.go)</option>
        <option value="rust">Rust (.rs)</option>
        <option value="swift">Swift (.swift)</option>
        <option value="kotlin">Kotlin (.kt)</option>
      </optgroup>
      <optgroup label="Database & Shell">
        <option value="sql">SQL (.sql)</option>
        <option value="bash">Bash (.sh)</option>
      </optgroup>
      <optgroup label="Plain & Word">
        <option value="text">Plain Text (.txt)</option>
        <option value="doc">MS Word Doc (.doc)</option>
      </optgroup>
    </select>

    <button id="load">📂 Load</button>
    <input type="file"
           id="file-input"
           accept=".md,.markdown,.html,.htm,.xml,.json,.yaml,.yml,.js,.php,.rb,.py,.java,.c,.cpp,.cs,.vb,.go,.rs,.swift,.kt,.sql,.sh,.txt,.doc"
           style="display:none"/>

    <button id="save">💾 Save</button>
    <button id="reset">♻️ Reset</button>
    <button id="theme">🌙 Dark</button>
  </header>

  <div id="container">
    <textarea id="editor"></textarea>
    <div id="preview"></div>
  </div>

  <footer class="app-footer">
    <p>
      © 2025 Bocaletto Luca |
      <a href="https://github.com/bocaletto-luca" target="_blank" rel="noopener">GitHub: bocaletto-luca</a> |
      <a href="https://github.com/bocaletto-luca/CodeStudio" target="_blank" rel="noopener">Repository: CodeStudio</a>
    </p>
  </footer>
</body>
</html>