科迪语Name
用于网络的模块代码显示和编辑包.
概览
科迪语Name 是一个轻量级,模块化的代码亮点和编辑器,可以弥合静态代码显示和全浏览器IDE之间的空白. 由香草JavaScript所建,提供语法突出化,活版编辑,与Vibe等反应性框架无缝融合.
愿景: Codie是一个从静态显示器到全浏览器 IDE 的光谱:
Minimal (vanilla) → Editor → Full REPL (vibe-powered)
highlight + format +editable +live output, inspect,
+numberedRows visual editing, zero-build HMR
特征
核心特征
- 语法突出显示: HTML, CSS, JavaScript, JSON, shell and Python 从代码本身检测出; YAML ()
yaml编号 :yml)和马克当 (markdown编号 :md,用自己语言画出栅栏的块来命名). 任何其他语言绘制为隐藏的纯文本 - 可编辑模式: 将静态代码转换成有文本区域覆盖的活编辑器
- 行号: 代码参考的可选编号行
- Diff 模式: 在文本对接代码前除去一个文本, 绘制出相同的亮点
- 它的自有元素数字 :
<codie>是块;<template codie>持有 HTML 浏览器不能解析 - 语言模式:通过属性平线语言(
highlight-html, (中文(简体) ),highlight-css, (中文(简体) ),highlight-js, (中文(简体) ),highlight-json(中文(简体) ) - 暗/亮主题: 切换为
[dark]属性 - 运行时状态切换: 动态地通过
codieRef.editable, (中文(简体) ),codieRef.numberedRows
编辑特性
- 标签处理: 标签键插入2个空格
- 多行缩进: 选择多行 + 标签缩进
- 外部缩进: Shift+Tab 删除缩进
- 现场预览数字 :
onEdit每次变换都点燃 - 处理错误数字 :
onError对执行失败的召回
安装
npm install @ape-egg/codie
使用量
基本语法突出显示
<link rel="stylesheet" href="@ape-egg/codie/codie.css" />
<script type="module">
import codie from '@ape-egg/codie';
codie();
</script>
<codie>
const greet = (name) => `Hello, ${name}!`;
</codie>
codie() 不需要争辩 <codie> 或者说 [codie] 图标.
HTML 语言 在街区内
浏览器在内部解析标记 <codie>。将 HTML 放入一个 <template codie> 相反,它以文字形式到达codie:
<template codie>
<div>
<p>Hello, world!</p>
</div>
</template>
这个 codie 属性使任何元素成为codie实例; <codie> 没有.
有行号的可编辑代码
import codie from '@ape-egg/codie';
const editor = codie('codie');
editor.editable = true;
editor.numberedRows = true;
用编辑预览
const outputRef = document.querySelector('output');
const editor = codie('codie');
editor.editable = true;
editor.onEdit = ({ formatted, raw }) => {
outputRef.innerHTML = formatted;
};
Diff 模式
const view = codie({ el, diff: true, before: previous });
view.code = draft; // redraws the diff
view.before = other; // redraws the diff
view.diff = false; // back to a plain view of the same text
view.editable = true; // edit the after text; removed rows hide, added rows follow
两种文本都由Codie自己的亮点来整体突出出,再分出一行. 换行会跑,每跑都会在被移除的地块上方被添加. 当至少一半的单词(平分不计数)存活下来时,被删除的一行和被添加的一行作为同一行被编辑成对,只有这样,他们更改的单词才会被标记. 与 numberedRows 各行在行号前后随行. 整个Diff让一个去, 像平地的景色.
diff(before, after, language?, { more }?) 从 @ape-egg/codie/diff 返回行为 HTML,用于实例之外。 鉴于 more,在变化折叠成一整行后,超过三行不变 .codie-diff-fold 读取行 ... 12 more lines ... 与 more 作为它的话。 这行是 <details> 保留它代表的行,所以点击就可以打开,没有脚本.
特定语言加亮
<!-- HTML, with its <script>, <style> and on* handlers -->
<template codie highlight-html>...</template>
<!-- CSS: stylesheets or bare declaration lists -->
<codie highlight-css>...</codie>
<!-- JavaScript -->
<codie highlight-js>...</codie>
<!-- JSON -->
<codie highlight-json>...</codie>
<!-- Detected from the code: HTML, CSS, JavaScript, JSON, shell, Python or plain text (default) -->
<codie>...</codie>
实例上设置的语言( A)codieRef.language = 'yaml')或转至 highlight(code, language) 编号 : diff(before, after, language) 可以是其中任何一个 html, (中文(简体) ), css, (中文(简体) ), js, (中文(简体) ), json, (中文(简体) ), python, (中文(简体) ), shell, (中文(简体) ), yaml, (中文(简体) ), yml, (中文(简体) ), markdown, (中文(简体) ), md 或者说 text。一个语言Codie没有亮点,例如 toml,绘制为隐藏的纯文本.
API 密码
codie(selector | element | config)
初始化 Codie 实例 .
参数:
selector(字符串):查询可口可乐元素的选择器——codie对于元素,[codie]对应的element(要素):DOM元素参考config(对象):可选配置对象el, (中文(简体) ),editable, (中文(简体) ),numberedRows, (中文(简体) ),foldable, (中文(简体) ),diff财务报告和审定财务报表before属性; 无el元素是第一个codie, [codie]在文档中
回返情况: Codie 实例代理服务器
实例属性
const editor = codie('codie');
// Get/set code content
editor.code; // Get current code
editor.code = '<div>New code</div>'; // Set code (updates display + textarea)
// Toggle features
editor.editable = true; // Enable editing
editor.numberedRows = true; // Show line numbers
editor.foldable = false; // Disable code folding (experimental)
editor.diff = true; // Diff `before` against the code
editor.before = 'old code'; // Set the before text (redraws when diffing)
// Callbacks
editor.onEdit = ({ formatted, raw }) => {
// formatted: cleaned up for display
// raw: exact code content
};
editor.onError = (error) => {
// Handle errors during editing
};
出口公用事业
import {
highlightHTML,
highlightJS,
highlightCSS,
highlightJSRaw,
escapeHTML,
unescapeHTML,
formatDocument,
normalizeInlineWhitespace,
ATTR,
CLASS,
} from '@ape-egg/codie';
属性
容器属性
A 类 <codie> 元素是其标记的示例。 下面的属性 上它,或者任何其他元素 codie数字 :
codie- 标记一个非元素<codie>作为一个例子,<template codie>最重要的是dehydrate- 跳过初始化(用于文档)highlight-html- 突出显示为 HTML,包括嵌入式<script>, (中文(简体) ),<style>财务报告和审定财务报表on*处理者highlight-css- 突出为CSShighlight-js- 突出显示为 JavaScripthighlight-json- 突出为JSON- 以上无一 - 从代码检测语言( HTML, CSS, JavaScript, JSON, shell, Python 或纯文本)
dark- 应用黑暗主题
运行时间属性( Codie 应用)
codie-editable- 可编辑模式激活时应用codie-numbered- 显示行号时应用codie-foldable- 启用折叠时应用(实验)diff- diff模式打开时应用
背景变量
Codie大小本身取自CSS自定义属性设置在母体上,因此它用所包围的任何布局系统来排列. 每个都有一个后退:
--unit(4px) - 间距单元;行高为6个单元,被垫为4个单元--font-mono(Geist Mono 堆栈) - 字体家族
建筑
科迪用一个 分层方法 与 CSS 网格连接 :
- 显示图层 (单位:千美元)
<pre>) - 语法高亮代码 - 文本区域图层 (可选的) - 当
editable = true - 行号 (可选) - 当
numberedRows = true
所有层都通过反应代用来同步,当属性改变时更新DOM.
虚拟集成
Codie自然地和Vibe一起进行活的,被动的代码编辑:
import { init } from '@ape-egg/vibe';
import codie from '@ape-egg/codie';
init({ output: '' });
const editor = codie('template[codie]');
editor.editable = true;
editor.onEdit = ({ formatted }) => {
$.output = formatted;
};
<template codie>
<p>Edit me!</p>
</template>
<output>@[output]</output>
路线图
已执行
- 语法突出化(HTML、CSS、JS、JSON、shell、Python、YAML、Markdown),语言检测和文字倒置
- 有文本区域覆盖的可编辑模式
- 行号
- 标签处理( 插入空格、 多行缩进、 外出)
- 编辑/错误召回
- \\ 模板支持
- 语言模式
- 黑暗/光明主题
- diff 模式
计划
- 自文档 REPL( 从编辑器执行代码)
- 智能脚本执行( 仅在更改时重运行)
- Vibe 禁区( 防止父母的预览)
- 热州保护( 保留州通过重新执行)
- 代码折叠( 由于可编辑模式的复杂性而推迟)
- 检查模式( 单击预览元素以突出代码)
- 视觉编辑( 在预览中重排 )
许可证
麻省理工学院