@fuzdev/fuz code (中文(简体) )

typeScript、Svelte、Markdown 和更多QQ的语法样式器

代码.fuz.dev

fuz_code 是语法样式器: 它将源代码变为 HTML 符号 CSS 类或区域 CSS 自定义突出显示 API。 。 。 . 它起源于一个叉子 棱镜 以 莉娅·维鲁 并自此被重写: 每种语言都有一个可以扫描的语法,而不 正则表达式和发报符作为平流在打入的数组中,用于高性能. 平平的象征流是一个想法 从 弹出, (中文(简体) ), 来文人: 双脚 (fuz code的特有替代品).

Twinkleplop是更广泛的项目:它汇编了声明语法,覆盖更多 以及船舶主题、说明和减值整合. fuz code 范围更窄,每个小字都写作普通代码 组合语言,以及一些 Svelte 组件.

特征 :

• 一个小的,明确的API—— stylize(code, lang) 返回 HTML,请返回, lex(code, lang) 返回平面符号流
• 两种输出: HTML 与 .token_* 区域 CSS 自定义高亮 API (实验(中文(简体) )
• 词典和样式没有依赖关系
• lexers 接受任何输入, 包括不完整的代码中间编辑, 并在线性时间内运行
• 内建语言 名单如下:,可以通过写出出一个出自

可选融合:

• 丝绒 支持:
  • (单位:千美元) 斯维尔特语汇法
  • Svelte 组件 : Code 使 HTML; 实验 CodeHighlight 财务报告和审定财务报表 CodeTextarea 使用 CSS 自定义突出显示 API
  • (单位:千美元) 构建时间预处理器 之前放弃静态 Code 内容
• 页:1 默认主题 用途 furz css (中文(简体) ) 适应颜色的变量 到用户的 color-scheme — 不包含 fuz css, 导入 主题( v).css

比较 志纪, fuz code 是 1 到 2 对运行时间使用速度更快, 几何平均值约为 60x 语文 语法 - 高亮语句 (单位:千美元)还原))),该词也 涵盖棱镜和 双脚. fuz code 运行一个 按语文而不是按 Oniguruma regexp 引擎 那个 TextMate语法需要. 史基瞄准建设时间的使用,支持的要多得多 语言和主题.

使用量

npm i -D @fuzdev/fuz_code

<script lang="ts">
    import Code from '@fuzdev/fuz_code/Code.svelte';
</script>

<!-- defaults to Svelte -->
<Code content={svelte_code} />
<!-- select a lang -->
<Code content={ts_code} lang="ts" />

import { syntax_styler_global } from '@fuzdev/fuz_code/syntax_styler_global.ts';

// Generate HTML with syntax styling
const html = syntax_styler_global.stylize(code, 'ts');

// Get the flat event stream for custom processing
const lexed = syntax_styler_global.lex(code, 'ts');

主题为CSS文件并使用任何框架.

与斯维尔特基特:

// +layout.svelte
import '@fuzdev/fuz_code/theme.css';

这个 默认主题 取决于 furz css (中文(简体) ) 页:1 颜色方案 认识. 见 fuz cs 使用文件 为设置.

如果您没有使用fuz css,请导入 theme_variables.css 并行 theme.css数字 :

// Without fuz_css:
import '@fuzdev/fuz_code/theme.css';
import '@fuzdev/fuz_code/theme_variables.css';

模块

• @fuzdev/fuz code/syntax styler global.ts (中文(简体) ) - 说吧 所有内置语言的预配置实例
• @fuzdev/fuz code/ syntax styler.ts - 说吧 页:1 SyntaxStyler 类( 注册您自己的入册)
• @fuzdev/fuz code/lexer.ts - 说吧 语法下方 : Lexer、 符号类型、 扫描助手、 HTML 渲染
• @fuzdev/fuz code/them.css - 说吧 依赖的默认主题 furz css (中文(简体) )
• @fuzdev/fuz code/them 可变.css - 说吧 非fuz cs用户的 CSS 变量
• @fuzdev/fuz code/Code. svelte (英语) - 说吧 用于 HTML 生成语法样式的 Svelte 组件
• @fuzdev/fuz code/svelte preprocess fuz code.ts (中文(简体) ) - 说吧 静态构建时预处理器 Code 内容

见 src/lib 用于全套模块.

语文

默认注册于 syntax_styler_global数字 :

• markup (单位:千美元)html, (中文(简体) ), svg, (中文(简体) ), mathml(中文(简体) )
• xml (单位:千美元)rss, (中文(简体) ), atom, (中文(简体) ), ssml(中文(简体) )
• svelte
• md (单位:千美元)markdown(中文(简体) )
• ts (单位:千美元)typescript, (中文(简体) ), js, (中文(简体) ), javascript ——JS是一个综合子集)
• css
• json 接受评论(JSONC)
• sh (单位:千美元)bash, (中文(简体) ), shell - POSIX/Bash家庭)
• rust (单位:千美元)rs(中文(简体) )

通过写入添加语言 SyntaxLang 税法和登记 add_lang - 见现有的 lexer_*.ts 模块.

文档

• 代码.fuz.dev/docs - 说吧 使用量, (中文(简体) ), 样本, (中文(简体) ), 文本区域, (中文(简体) ), 基准,以及 API 密码
• 克劳德·姆德 - 建筑和发展准则
• 高科技 高科技 - Fuz 堆栈共享编码惯例
• 样本文件 财务报告和审定财务报表 测试

欢迎提出问题.

实验突出显示支持

用于支持 CSS 自定义突出显示 API, (中文(简体) ), fuz code 提供了一个可以使用本地浏览器突出显示的实验组件 作为HTML生成的替代.

浏览器支持有限,API不能应用布局-影响样式- 粗体,斜体,字体大小——所以使用它们的主题会产生不同的效果. 标准 密码 丝绒 使用 HTML 生成组件 建议大多数情况下使用.

<script lang="ts">
    import CodeHighlight from '@fuzdev/fuz_code/CodeHighlight.svelte';
</script>

<!-- auto-detect and use CSS Highlight API when available -->
<CodeHighlight content={code} mode="auto" />
<!-- force HTML mode -->
<CodeHighlight content={code} mode="html" />
<!-- force ranges mode (requires browser support) -->
<CodeHighlight content={code} mode="ranges" />

在使用实验突出显示组件时,导入相应的主题:

// instead of theme.css, import theme_highlight.css in +layout.svelte:
import '@fuzdev/fuz_code/theme_highlight.css';

实验模块:

• 校对:Soup - 说吧 支持 HTML 生成和 CSS 自定义突出 API 组件
• @fuzdev/fuz code/CodeTextarea. svelte (英语) - 说吧 可编辑 <textarea> 显示活动区域
• @fuzdev/fuz code/highlight manager.ts (中文(简体) ) - 说吧 管理浏览器 Highlight 财务报告和审定财务报表 Range APIs 密码
• @fuzdev/fuz code/them highlight.css - 说吧 主题为 ::highlight() cSS 自定义高亮 API 的伪元素

捐款

fuz.dev/贡献者

许可证 🐦

最初从 棱镜 (单位:千美元)棱镜.com作者: 莉娅·维鲁 —— 说 与 Svelte 支持原基于 prism-svelte 以 翻译:。 。 。 .

0BSD 数据