@fazelstudio/codemirror-lang-astro (英语)

阿斯特罗( Astro ) (.astro) 语言支持 代码 6 代码编辑器.

为嵌入式TypeScript,JSX,和CSS提供语法高亮,代码折叠,括号相配,和混合语言解析.

安装

npm install @fazelstudio/codemirror-lang-astro
# or
bun add @fazelstudio/codemirror-lang-astro
# or
yarn add @fazelstudio/codemirror-lang-astro

快速启动

import { EditorView, basicSetup } from "codemirror"
import { astro } from "@fazelstudio/codemirror-lang-astro"

const editor = new EditorView({
  parent: document.body,
  doc: `---
const title = "Hello"
---
<h1>{title}</h1>`,
  extensions: [
    basicSetup,  // includes foldGutter, lineNumbers, syntaxHighlighting, etc.
    astro(),
  ],
})

说明: basicSetup 从 codemirror 软件包已经包含 foldGutter(), (中文(简体) ), lineNumbers(), (中文(简体) ), syntaxHighlighting(defaultHighlightStyle),以及其他UI扩展. 不必分别相加.

包含什么

API 密码

astro(config?) → LanguageSupport

主入关. 回返a LanguageSupport 正在准备使用 CodeMirror .

import { astro } from "@fazelstudio/codemirror-lang-astro"

// Simple — just pass it to extensions
const extensions = [astro()]

// With custom extensions
const extensions = [
  astro({
    extraExtensions: [
      myCustomHighlightStyle,
      myCustomExtension,
    ],
  }),
]

astroLanguage: Language

生语言例. 高级配置需要直接访问语言时使用此功能.

import { astroLanguage } from "@fazelstudio/codemirror-lang-astro"

// Access language data
const commentTokens = astroLanguage.data.of().commentTokens

mixedParser: Parser

基本混合分析器。 导出为自定义树查询等高级用例或突出显示样式.

import { mixedParser } from "@fazelstudio/codemirror-lang-astro"

// Parse a document and inspect the tree
const tree = mixedParser.parse(sourceCode)

AstroConfig

配置接口 astro() 函数.

interface AstroConfig {
  extraExtensions?: Extension[]
}

配置示例

与 basicSetup (推荐初学者

import { EditorView, basicSetup } from "codemirror"
import { astro } from "@fazelstudio/codemirror-lang-astro"

new EditorView({
  extensions: [basicSetup, astro()],
  parent: document.body,
})

自定义设置( 完全控制)

import { EditorView } from "@codemirror/view"
import { EditorState } from "@codemirror/state"
import {
  lineNumbers,
  highlightActiveLineGutter,
  highlightSpecialChars,
  drawSelection,
  dropCursor,
  rectangularSelection,
  crosshairCursor,
  highlightActiveLine,
} from "@codemirror/view"
import {
  foldGutter,
  foldKeymap,
  indentOnInput,
  bracketMatching,
  syntaxHighlighting,
  defaultHighlightStyle,
  indentUnit,
} from "@codemirror/language"
import { history, historyKeymap, defaultKeymap } from "@codemirror/commands"
import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete"
import { astro } from "@fazelstudio/codemirror-lang-astro"

const myExtensions = [
  lineNumbers(),
  highlightActiveLineGutter(),
  highlightSpecialChars(),
  history(),
  foldGutter(),
  drawSelection(),
  dropCursor(),
  EditorState.allowMultipleSelections.of(true),
  indentOnInput(),
  bracketMatching(),
  closeBrackets(),
  rectangularSelection(),
  crosshairCursor(),
  highlightActiveLine(),
  indentUnit.of("  "),
  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
  keymap.of([
    ...closeBracketsKeymap,
    ...defaultKeymap,
    ...historyKeymap,
    ...foldKeymap,
  ]),
  astro(),
]

new EditorView({
  state: EditorState.create({
    doc: "Your Astro code here",
    extensions: myExtensions,
  }),
  parent: document.body,
})

有自定义扩展名

import { astro } from "@fazelstudio/codemirror-lang-astro"
import { myCustomExtension } from "./my-extension"

const extensions = [
  astro({
    extraExtensions: [
      myCustomExtension,
      // any other CodeMirror extension
    ],
  }),
]

依赖关系

此软件包需要以下对等依赖性( 通常已经安装了 CodeMiror):

已知的限制

• Astro指令 (单位:千美元)client:load, (中文(简体) ), set:html, (中文(简体) ), is:inline等)作为通用 HTML 属性被突出显示。 计划为今后发布指令指定语法节点.

• 表达式嵌入 超过两个级别(例如:. {cond && <A>{b && <B />}</A>}) 读取时可能无法解决内在突出符号 resolveInner 从外树上——JSX上线被正确挂起,编辑器正确地突出内容,但程序上线树查询必须说明上线上线的深度.

捐款

欢迎捐款! 请随意提交拉力请求.

# Clone the repo
git clone https://github.com/fazelllyyy/codemirror-lang-astro.git

# Install dependencies
bun install

# Run tests
bun run test

# Build
bun run build

许可证

麻省理工学院 祖尔法兹利(法泽利)