Im letzten Beitrag habe ich CodeMirror v6 mit einer Reaktionskomponente versehen. Es sah jedoch immer noch wie eine Ebene aus, <textarea>wenn es wie ein Code-Editor aussehen sollte.

Das Basis-Setup von CodeMirror enthält Erweiterungen im Wert eines Lebensmittelgeschäfts, um mit dem vollwertigen Code-Editor zu beginnen. Ich habe ein viel bescheideneres Ziel, also habe ich die beiden Erweiterungen ausgewählt, von denen ich dachte, dass sie auf meinen Anwendungsfall anwendbar sind:

• @ Codemirror / Highlight
• @ codemirror / matchbrackets

npm i \
@codemirror/highlight \
@codemirror/matchbrackets \
@codemirror/lang-javascript

import { javascript } from "@codemirror/lang-javascript";
import { defaultHighlightStyle } from "@codemirror/highlight";
import { bracketMatching } from "@codemirror/matchbrackets";

export const extensions = [
  bracketMatching(),
  defaultHighlightStyle.fallback,
  javascript(),
];

import { extensions } from "./extensions";
/* ... */
const state = EditorState.create({
  doc: "console.log('hello there')",
  extensions,
});
/* ... */

Verknüpfung mit der Material-Benutzeroberfläche

Eine einheitliche Farbpalette für die Site und den Code-Editor zu haben, scheint eine vernünftige Voraussetzung zu sein. Das Thema der Material-Benutzeroberfläche enthält viele Farben, aus denen ich auswählen kann .

Mit CodeMirror 6 können Sie den Hervorhebungsstil auf einfache Weise ändern.

import {tags, HighlightStyle} from "@codemirror/highlight"

const myHighlightStyle = HighlightStyle.define([
  {tag: tags.keyword, color: "#fc6"},
  {tag: tags.comment, color: "#f5d", fontStyle: "italic"}
])

/* Note: In this case using a `Map` was not the best choice */
const tagColorMap = new Map<Tag, Omit<TagStyle, "tag">>([
  [tags.angleBracket, { color: theme.palette.primary.light }],
  /* ... */
])

Ich muss das tagColorMapin das Array von TagStyleObjekten konvertieren , das HighlightStyle.definebenötigt wird.

const specs = Array.from(tagColorMap.entries()).map(([tag, style]) => ({
  tag,
  ...style,
}))
export const highlightStyle = HighlightStyle.define(specs)

import { highlightStyle } from "./highlight-style";
/* ... */
export const extensions = [
  highlightStyle,
  /* ... */
];

      

Ich bemerkte, dass lange Schlangen die Ausgabebox vom Bildschirm drückten. Um den Zeilenumbruch zu aktivieren, EditorView.linewrappingmuss der hinzugefügt werden extensions.

Ursprünglich dachte ich, dass die Nummerierung der Dachrinnen nicht gut aussehen würde, aber ich habe es mir anders überlegt. Alles was benötigt wird ist die @codemirror/gutterBibliothek.

// ~/components/editor/extensions.ts
import { EditorView } from "@codemirror/view";
import { lineNumbers } from "@codemirror/gutter";
/* ... */
export const extensions = [
  EditorView.lineWrapping
  lineNumbers(),
  /* ... */
];

Wenn Sie EditorView.themedas zweite Objekt verwenden und auf setzen { dark: true }, wird die Kompatibilität mit dunklen Themen aktiviert. Am auffälligsten ist, dass die Rinnennummern und der Cursor heller werden.

// ~/components/editor/extensions.ts
/* ... */
export const extensions = [
  EditorView.theme({}, { dark: true });
  /* ... */
];

TL; DR

CodeMirror v6 wurde mithilfe von CodeMirror-Erweiterungen und dem Designobjekt der Material-Benutzeroberfläche ein benutzerdefiniertes Styling hinzugefügt.

Ursprünglich aus: