差分

このページの2つのバージョン間の差分を表示します。

--- javascript:codemirror [2025/04/07 07:54] – [CodeMirror 6 のデモを実行して動作確認] ともやん
+++ javascript:codemirror [2025/04/17 13:47] (現在) – [ビルドツールを使わない方法] ともやん
@@ 行 3: / 行 3: @@
 ソースコード: [[https://github.com/codemirror/codemirror|codemirror/CodeMirror: In-browser code editor]]\\
-===== CodeMirror 6 =====
+====== CodeMirror 6 ======
 本家: [[https://codemirror.net/6/|CodeMirror 6]]\\
 ソースコード: [[https://github.com/codemirror/codemirror.next|codemirror/codemirror.next: The next generation of the CodeMirror in-browser editor]]\\
 ドキュメント: [[https://codemirror.net/6/docs/ref/|CodeMirror 6 Reference Manual]]\\
+===== ビルドツールを使わない方法 =====
+<html>
+<div id="editor"></div>
+<script type="importmap">
+  {
+    "imports": {
+      "codemirror": "https://esm.sh/codemirror",
+      "view": "https://esm.sh/@codemirror/view@^6.36.5",
+      "state": "https://esm.sh/@codemirror/state@^6.5.2",
+      "commands": "https://esm.sh/@codemirror/commands@^6.8.1",
+      "language": "https://esm.sh/@codemirror/language@^6.11.0"
+    }
+  }
+</script>
+<script type="module">
+  import { javascript } from 'https://esm.sh/@codemirror/lang-javascript'
+  import { basicSetup } from 'https://esm.sh/codemirror@6.0.1'
+  import { EditorView, keymap } from 'https://esm.sh/@codemirror/view@^6.36.5'
+  import { defaultKeymap } from 'https://esm.sh/@codemirror/commands@^6.8.1'
+  //import { solarizedDark } from 'https://esm.sh/cm6-theme-solarized-dark'
+  import { monokai } from 'https://esm.sh/@fsegurai/codemirror-theme-monokai'
+  let myView = new EditorView({
+    doc: `<div id="editor"></div>
+<script type="module">
+  import { javascript } from 'https://esm.sh/@codemirror/lang-javascript'
+  import { basicSetup } from 'https://esm.sh/codemirror@6.0.1'
+  import { EditorView, keymap } from 'https://esm.sh/@codemirror/view@^6.36.5'
+  import { defaultKeymap } from 'https://esm.sh/@codemirror/commands@^6.8.1'
+  //import { solarizedDark } from 'https://esm.sh/cm6-theme-solarized-dark'
+  import { monokai } from 'https://esm.sh/@fsegurai/codemirror-theme-monokai'
+  let myView = new EditorView({
+    doc: 'code',
+    extensions: [keymap.of(defaultKeymap)],
+    parent: document.getElementById("editor"),
+    extensions: [
+      basicSetup,
+      javascript({typescript: true}),
+      monokai,
+      EditorView.theme({
+        '.cm-scroller': {
+          fontFamily: 'HackGen Console NF',
+        }
+      })
+    ],
+  })
+</scr`+`ipt>`,
+    extensions: [keymap.of(defaultKeymap)],
+    parent: document.getElementById("editor"),
+    extensions: [
+      basicSetup,
+      javascript({typescript: true}),
+      monokai,
+      EditorView.theme({
+        '.cm-scroller': {
+          fontFamily: 'HackGen Console NF',
+        }
+      })
+    ],
+  })
+</script>
+</html>
+===== CodeMirirter 6 のテーマ...🤔 =====
+[[git>fsegurai/codemirror-themes|fsegurai/codemirror-themes: Themes for CodeMirror 6]]\\
+[[git>craftzdog/cm6-themes|craftzdog/cm6-themes: Themes for CodeMirror 6]]\\
+===== CodeMirror 6 開発版(dev)のインストール方法 =====
 ==== Node.js のインストール ====
@@ 行 25: / 行 98: @@
 remote: Total 25 (delta 0), reused 12 (delta 0), pack-reused 0 (from 0)
 Receiving objects: 100% (25/25), 11.13 KiB | 178.00 KiB/s, done.
+</pre></html></WRAP>
+</WRAP>
+==== cm.js の使用方法 ====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">node</font> <u style="text-decoration-style:solid">bin/cm.js</u> <font color="#A347BA">--help</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Usage:
+  cm install [--ssh]      Clone and symlink the packages, install deps, build
+  cm packages             Emit a list of all pkg names
+  cm status               Output git status, when interesting, for packages
+  cm build                Build the bundle files
+  cm clean                Delete files created by the build
+  cm devserver [--source-map]
+                          Start a dev server on port 8090
+  cm release &lt;package&gt; [--edit] [--version &lt;version&gt;]
+                          Create commits to tag a release
+  cm build-readme &lt;pkg&gt;   Regenerate the readme file for a non-core package
+  cm commit &lt;args&gt;        Run git commit in all packages that have changes
+  cm push                 Run git push in packages that have new commits
+  cm run &lt;command&gt;        Run the given command in each of the package dirs
+  cm test [--no-browser]  Run the test suite of all the packages
+  cm grep &lt;pattern&gt;       Grep through the source code for all packages
+  cm --help
 </pre></html></WRAP>
 </WRAP>
@@ 行 308: / 行 407: @@
 </WRAP>
-===== CodeMirror 5 =====
+====== CodeMirror 5 ======
 ==== インストール ====