codemirror/demo/index.html at e3faa765eb97daac70cc8a4b3c2ed65b79757b36 · catppuccin/codemirror · 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
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Catppuccin for CodeMirror</title>
    <link href="./main.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>
      Catppuccin for
      <a href="https://codemirror.net/">CodeMirror<sup>v6</sup></a>
    </h1>
    <form class="window">
      <div class="titlebar">
        <div>
          <div class="dot red"></div>
          <div class="dot amber"></div>
          <div class="dot green"></div>
        </div>
        <label for="flavor">Flavor:</label>
        <select id="flavor-select">
          <option value="mocha">🌿 Mocha</option>
          <option value="macchiato">🌺 Macchiato</option>
          <option value="frappe">🪴 Frappé</option>
          <option value="latte">🌻 Latte</option>
        </select>
        <label for="language">Language:</label>
        <select id="language-select">
          <option value="cpp.cpp">C++</option>
          <option value="cs.cs">C#</option>
          <option value="css.css">CSS</option>
          <option value="go.go">Go</option>
          <option value="html.html">HTML</option>
          <option value="java.java">Java</option>
          <option value="javascript.js">JavaScript</option>
          <option value="json.json">JSON</option>
          <option value="jsx.jsx">JSX</option>
          <option value="markdown.md">Markdown</option>
          <option value="nix.nix">Nix</option>
          <option value="php.php">PHP</option>
          <option value="python.py">Python</option>
          <option value="rust.rs">Rust</option>
          <option value="sql.sql">SQL</option>
          <option value="tsx.tsx">TSX</option>
          <option selected="selected" value="typescript.ts">TypeScript</option>
          <option value="yaml.yaml">YAML</option>
        </select>
      </div>
      <div id="code" name="code"></div>
    </form>
  </body>
  <script type="importmap">
    {
      "imports": {
        "codemirror": "https://esm.sh/codemirror@6.0",
        "@codemirror/view": "https://esm.sh/@codemirror/view@6",
        "@codemirror/state": "https://esm.sh/@codemirror/state@6",
        "@codemirror/language": "https://esm.sh/@codemirror/language@6",
        "@lezer/highlight": "https://esm.sh/@lezer/highlight",
        "@catppuccin/palette": "https://esm.sh/@catppuccin/palette@1.7.1",
        "@catppuccin/codemirror": "./index.js",

        "@codemirror/lang-javascript": "https://esm.sh/@codemirror/lang-javascript@6",
        "@codemirror/lang-css": "https://esm.sh/@codemirror/lang-css@6",
        "@codemirror/lang-html": "https://esm.sh/@codemirror/lang-html@6",
        "@codemirror/lang-json": "https://esm.sh/@codemirror/lang-json@6",
        "@codemirror/lang-markdown": "https://esm.sh/@codemirror/lang-markdown@6",
        "@codemirror/lang-python": "https://esm.sh/@codemirror/lang-python@6",
        "@codemirror/lang-rust": "https://esm.sh/@codemirror/lang-rust@6",
        "@codemirror/lang-cpp": "https://esm.sh/@codemirror/lang-cpp@6",
        "@codemirror/lang-java": "https://esm.sh/@codemirror/lang-java@6",
        "@codemirror/lang-php": "https://esm.sh/@codemirror/lang-php@6",
        "@codemirror/lang-sql": "https://esm.sh/@codemirror/lang-sql@6",
        "@codemirror/lang-go": "https://esm.sh/@codemirror/lang-go@6",
        "@codemirror/lang-yaml": "https://esm.sh/@codemirror/lang-yaml@6",

        "@replit/codemirror-lang-csharp": "https://esm.sh/@replit/codemirror-lang-csharp@6",
        "@replit/codemirror-lang-nix": "https://esm.sh/@replit/codemirror-lang-nix@6"
      }
    }
  </script>
  <script src="./main.js" type="module"></script>
</html>