javascript:codemirror

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:codemirror [2025/04/07 08:01] – [cm.js で開発環境をインストール] ともやんjavascript:codemirror [2025/04/17 13:47] (現在) – [ビルドツールを使わない方法] ともやん
行 7: 行 7:
 ソースコード: [[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)のインストール方法 ===== ===== CodeMirror 6 開発版(dev)のインストール方法 =====
  • javascript/codemirror.1743980469.txt.gz
  • 最終更新: 2025/04/07 08:01
  • by ともやん