# @fazelstudio/codemirror-lang-astro 中文文档

规范地址：https://npmcn.com/package/%40fazelstudio/codemirror-lang-astro/

版本：0\.2\.0
npm 元数据更新时间：2026-08-20T15:13:11.960Z
中文译文更新时间：2026-11-14T12:19:32.939Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fazelstudio/codemirror-lang-astro
原文对照：https://npmcn.com/package/%40fazelstudio/codemirror-lang-astro/?lang=original
项目主页：https://github.com/fazelllyyy/codemirror-lang-astro#readme
源码仓库：https://github.com/fazelllyyy/codemirror-lang-astro

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：58.3 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：8 个
- 首次发布：2026-08-20T15:13:11.435Z
- 最新版本发布：2026-08-20T15:13:11.733Z
- 近 30 天下载量：2787（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 1 个）

## 中文简介

CodeMirror 代码编辑器的 Astro 语言支持

## 安装

```sh
npm install @fazelstudio/codemirror-lang-astro
```

也可以使用：`pnpm add @fazelstudio/codemirror-lang-astro`、`yarn add @fazelstudio/codemirror-lang-astro`、`bun add @fazelstudio/codemirror-lang-astro`

## README

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

[![NPM version](https://img.shields.io/npm/v/@fazelstudio/codemirror-lang-astro.svg)](https://www.npmjs.com/package/@fazelstudio/codemirror-lang-astro) [![License](https://img.shields.io/npm/l/@fazelstudio/codemirror-lang-astro.svg)](https://github.com/fazelllyyy/codemirror-lang-astro/blob/main/LICENSE)

阿斯特罗( Astro ) (`.astro`) 语言支持 [代码 6](https://codemirror.net/) 代码编辑器.

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

## 安装

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

## 快速启动

```ts
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扩展. 不必分别相加.

## 包含什么

| 特性 | 说明 |
| --- | --- |
| **前题解析** | `--- ... ---` 区域解析为类型脚本 |
| **表达式解析** | `{ ... }` 标值为JSX/TSX |
| **脚本解析** | `<script>` 解析为 JavaScript/ TypeScript( 尊重) `lang` 属性) |
| **样式解析** | `<style>` 解析为 CSS |
| **突出部分** | PascalCase 标签 (`<Layout>`突出显示为 `typeName` |
| **代码折叠** | HTML 元素、注释和前题的折叠范围 |
| **括号匹配** | 匹配 `<tag>` 编号 : `</tag>` 双对 |
| **缩进** | HTML 元素的自动缩进 |

## API 密码

### `astro(config?) → LanguageSupport`

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

```ts
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`

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

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

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

### `mixedParser: Parser`

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

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

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

### `AstroConfig`

配置接口 `astro()` 函数.

```ts
interface AstroConfig {
  extraExtensions?: Extension[]
}
```

## 配置示例

### 与 `basicSetup` (推荐初学者

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

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

### 自定义设置( 完全控制)

```ts
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,
})
```

### 有自定义扩展名

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

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

## 依赖关系

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

| 软件包 | 版本 |
| --- | --- |
| `@codemirror/lang-javascript` | `^6.0.0` |
| `@codemirror/lang-css` | `^6.0.0` |
| `@codemirror/language` | `^6.0.0` |
| `@lezer/common` | `^1.0.0` |
| `@lezer/highlight` | `^1.0.0` |
| `@lezer/html` | `^1.0.0` |

## 已知的限制

-   **Astro指令** (单位:千美元)`client:load`, (中文(简体) ), `set:html`, (中文(简体) ), `is:inline`等)作为通用 HTML 属性被突出显示。 计划为今后发布指令指定语法节点.
    
-   **表达式嵌入** 超过两个级别(例如:. `{cond && <A>{b && <B />}</A>}`) 读取时可能无法解决内在突出符号 `resolveInner` 从外树上——JSX上线被正确挂起,编辑器正确地突出内容,但程序上线树查询必须说明上线上线的深度.
    

## 捐款

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

```bash
# 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
```

## 许可证

麻省理工学院 [祖尔法兹利(法泽利)](https://github.com/fazelllyyy)

## 常见问题

### @fazelstudio/codemirror-lang-astro 是什么？

CodeMirror 代码编辑器的 Astro 语言支持

### 如何安装 @fazelstudio/codemirror-lang-astro？

在项目目录运行 npm install @fazelstudio/codemirror-lang-astro，或使用 pnpm add / yarn add / bun add。

### @fazelstudio/codemirror-lang-astro 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fazelstudio/codemirror-lang-astro 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fazelstudio/codemirror-lang-astro 可以商用吗？

@fazelstudio/codemirror-lang-astro 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fazelstudio/codemirror-lang-astro 的下载量有多少？

根据 npm 官方下载统计，@fazelstudio/codemirror-lang-astro 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,787 次，日均约 93 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fazelstudio/codemirror-lang-astro 还在维护吗？

最新版本 0\.2\.0 发布于 2026/08/20（2 个月前）；至今共发布 1 个版本，其中过去 12 个月发布了 1 个；首次发布于 2026/08/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。