fzu-product/utils/notebook/codemirror.theme.js

// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.

/**
 * 本文件为 Jupyter lab 源码。
 * 用于设置 codemirror 相关的主题，提供了 codemirror 以及 jupyter 两种主题。其中 jupyter 为默认主题
 *
 * 源码TS版：https://github.com/jupyterlab/jupyterlab/blob/master/packages/codemirror/src/editortheme.ts
 */

import {
  defaultHighlightStyle,
  HighlightStyle,
  syntaxHighlighting,
} from "@codemirror/language";
import { EditorView } from "@codemirror/view";
import { tags as t } from "@lezer/highlight";
export const jupyterEditorTheme = EditorView.theme({
  /**
   * CodeMirror themes are handling the background/color in this way. This works
   * fine for CodeMirror editors outside the notebook, but the notebook styles
   * these things differently.
   */
  "&": {
    background: "var(--jp-layout-color0)",
    color: "var(--jp-content-font-color1)",
  },
  /* In the notebook, we want this styling to be handled by its container */
  ".jp-CodeConsole &, .jp-Notebook &": {
    background: "transparent",
  },
  ".cm-content": {
    caretColor: "var(--jp-editor-cursor-color)",
  },
  ".cm-cursor, .cm-dropCursor": {
    borderLeft:
      "var(--jp-code-cursor-width0) solid var(--jp-editor-cursor-color)",
  },
  ".cm-selectionBackground, .cm-content ::selection": {
    backgroundColor: "var(--jp-editor-selected-background)",
  },
  "&.cm-focused .cm-selectionBackground": {
    backgroundColor: "var(--jp-editor-selected-focused-background)",
  },
  ".cm-gutters": {
    borderRight: "1px solid var(--jp-border-color2)",
    backgroundColor: "var(--jp-layout-color2)",
  },
  ".cm-gutter, .cm-activeLine": {
    backgroundColor: "var(--jp-layout-color2)",
  },
  ".cm-searchMatch": {
    backgroundColor: "var(--jp-search-unselected-match-background-color)",
    color: "var(--jp-search-unselected-match-color)",
  },
  ".cm-searchMatch.cm-searchMatch-selected": {
    backgroundColor:
      "var(--jp-search-selected-match-background-color) !important",
    color: "var(--jp-search-selected-match-color) !important",
  },
});
// The list of available tags for syntax highlighting is available at
// https://lezer.codemirror.net/docs/ref/#highlight.tags
export const jupyterHighlightStyle = HighlightStyle.define([
  // Order matters - a rule will override the previous ones; important for example for in headings styles.
  { tag: t.meta, color: "var(--jp-mirror-editor-meta-color)" },
  { tag: t.heading, color: "var(--jp-mirror-editor-header-color)" },
  {
    tag: [t.heading1, t.heading2, t.heading3, t.heading4],
    color: "var(--jp-mirror-editor-header-color)",
    fontWeight: "bold",
  },
  {
    tag: t.keyword,
    color: "var(--jp-mirror-editor-keyword-color)",
    fontWeight: "bold",
  },
  { tag: t.atom, color: "var(--jp-mirror-editor-atom-color)" },
  { tag: t.number, color: "var(--jp-mirror-editor-number-color)" },
  {
    tag: [t.definition(t.name), t.function(t.definition(t.variableName))],
    color: "var(--jp-mirror-editor-def-color)",
  },
  { tag: t.variableName, color: "var(--jp-mirror-editor-variable-color)" },
  {
    tag: [t.special(t.variableName), t.self],
    color: "var(--jp-mirror-editor-variable-2-color)",
  },
  { tag: t.punctuation, color: "var(--jp-mirror-editor-punctuation-color)" },
  { tag: t.propertyName, color: "var(--jp-mirror-editor-property-color)" },
  {
    tag: t.operator,
    color: "var(--jp-mirror-editor-operator-color)",
    fontWeight: "bold",
  },
  {
    tag: t.comment,
    color: "var(--jp-mirror-editor-comment-color)",
    fontStyle: "italic",
  },
  { tag: t.string, color: "var(--jp-mirror-editor-string-color)" },
  {
    tag: [t.labelName, t.monospace, t.special(t.string)],
    color: "var(--jp-mirror-editor-string-2-color)",
  },
  { tag: t.bracket, color: "var(--jp-mirror-editor-bracket-color)" },
  { tag: t.tagName, color: "var(--jp-mirror-editor-tag-color)" },
  { tag: t.attributeName, color: "var(--jp-mirror-editor-attribute-color)" },
  { tag: t.quote, color: "var(--jp-mirror-editor-quote-color)" },
  {
    tag: t.link,
    color: "var(--jp-mirror-editor-link-color)",
    textDecoration: "underline",
  },
  { tag: [t.separator, t.derefOperator, t.paren], color: "" },
  { tag: t.strong, fontWeight: "bold" },
  { tag: t.emphasis, fontStyle: "italic" },
  { tag: t.strikethrough, textDecoration: "line-through" },
]);
/**
 * JupyterLab CodeMirror 6 theme
 */
export const jupyterTheme = [
  jupyterEditorTheme,
  syntaxHighlighting(jupyterHighlightStyle),
];
/**
 * A namespace to handle CodeMirror 6 theme
 *
 * @alpha
 */
export var Theme;
(function (Theme) {
  /**
   * CodeMirror 6 themes
   */
  const themeMap = new Map([
    [
      "codemirror",
      [EditorView.baseTheme({}), syntaxHighlighting(defaultHighlightStyle)],
    ],
    ["jupyter", jupyterTheme],
  ]);
  /**
   * Get the default CodeMirror 6 theme for JupyterLab
   *
   * @alpha
   * @returns Default theme
   */
  function defaultTheme() {
    return themeMap.get("jupyter");
  }
  Theme.defaultTheme = defaultTheme;
  /**
   * Register a new theme.
   *
   * @alpha
   * @param name Theme name
   * @param theme Codemirror 6 theme extension
   */
  function registerTheme(name, theme) {
    themeMap.set(name, theme);
  }
  Theme.registerTheme = registerTheme;
  /**
   * Get a theme.
   *
   * #### Notes
   * It falls back to the default theme
   *
   * @alpha
   * @param name Theme name
   * @returns Theme extension
   */
  function getTheme(name) {
    let ext = themeMap.get(name);
    return ext !== null && ext !== void 0 ? ext : this.defaultTheme();
  }
  Theme.getTheme = getTheme;
})(Theme || (Theme = {}));