javascript:codemirror

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:codemirror [2025/04/07 07:51] – [cm.js でインストール] ともやんjavascript:codemirror [2025/04/17 13:47] (現在) – [ビルドツールを使わない方法] ともやん
行 3: 行 3:
 ソースコード: [[https://github.com/codemirror/codemirror|codemirror/CodeMirror: In-browser code editor]]\\ ソースコード: [[https://github.com/codemirror/codemirror|codemirror/CodeMirror: In-browser code editor]]\\
  
-===== CodeMirror 6 =====+====== CodeMirror 6 ======
 本家: [[https://codemirror.net/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://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]]\\ ドキュメント: [[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 のインストール ==== ==== Node.js のインストール ====
行 25: 行 98:
 remote: Total 25 (delta 0), reused 12 (delta 0), pack-reused 0 (from 0) 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. 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> </pre></html></WRAP>
 </WRAP> </WRAP>
行 285: 行 384:
 <WRAP color_term> <WRAP color_term>
 <WRAP color_command><html><pre> <WRAP color_command><html><pre>
-<b class=GRN>$</b> <b class=HIY>npm</b> run dev+<font color="#0087FF"><b>$</b></font> <font color="#26A269">npm</font> run dev
 </pre></html></WRAP> </pre></html></WRAP>
 <WRAP color_result><html><pre> <WRAP color_result><html><pre>
  
-> dev +&gt; dev 
-> node bin/cm.js devserver+&gt; node bin/cm.js devserver
  
 Starting compilation in watch mode... Starting compilation in watch mode...
-Found 0 errors. Watching for file changes. +state/src/transaction.ts(510,65): error TS2322: Type &apos;readonly T[] | NonNullable&lt;T&gt;&apos; is not assignable to type &apos;T&apos;. 
-Bundling state, view, language, commands, search, autocomplete, lint, collab, language-data, codemirror, lang-javascript, lang-java, lang-json, lang-cpp, lang-php, lang-python, lang-css, lang-html, lang-sql, lang-rust, lang-xml, lang-markdown, lang-lezer, lang-wast, lang-angular, lang-vue, theme-one-dark, merge+  &apos;T&apos; could be instantiated with an arbitrary type which could be unrelated to &apos;readonly T[] | NonNullable&lt;T&gt;&apos;. 
 + 
 +Found 1 error. Watching for file changes. 
 +Bundling state, view, language, commands, search, autocomplete, lint, collab, language-data, codemirror, lang-javascript, lang-java, lang-json, lang-cpp, lang-php, lang-python, lang-go, lang-css, lang-sass, lang-html, lang-sql, lang-rust, lang-xml, lang-markdown, lang-lezer, lang-wast, lang-angular, lang-vue, lang-liquid, lang-less, lang-yaml, theme-one-dark, merge
 Dev server listening on 8090 Dev server listening on 8090
 Bundling done. Bundling done.
行 305: 行 407:
 </WRAP> </WRAP>
  
-===== CodeMirror 5 =====+====== CodeMirror 5 ======
  
 ==== インストール ==== ==== インストール ====
  • javascript/codemirror.1743979913.txt.gz
  • 最終更新: 2025/04/07 07:51
  • by ともやん