CodeJar 使用教程
codejarAn embeddable code editor for the browser 🍯项目地址:https://gitcode.com/gh_mirrors/co/codejar
项目介绍
CodeJar 是一个轻量级的、可嵌入的网页代码编辑器。它支持多种浏览器,并且可以与任何语法高亮库(如 PrismJS 或 highlight.js)配合使用。CodeJar 的特点包括:
- 轻量级:仅 2 kB
- 可扩展:支持自定义语法高亮
- 跨浏览器:兼容 Chrome、Safari、Firefox、iOS、iPadOS 和 Android
- 行号:可选的行号显示
项目快速启动
安装 CodeJar
首先,通过 npm 安装 CodeJar:
npm i codejar
初始化 CodeJar
在 HTML 文件中创建一个元素,并初始化 CodeJar:
<div class="editor"></div>
<script>
import { CodeJar } from 'codejar';
import { withLineNumbers } from 'codejar/linenumbers';
const highlight = (editor) => {
const code = editor.textContent;
editor.innerHTML = code;
};
const editor = document.querySelector('.editor');
const jar = CodeJar(editor, withLineNumbers(highlight));
</script>
应用案例和最佳实践
案例一:基本代码编辑器
以下是一个基本的代码编辑器示例,使用 CodeJar 和 PrismJS 进行语法高亮:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css">
<div class="editor"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
<script>
import { CodeJar } from 'codejar';
const highlight = (editor) => {
editor.innerHTML = Prism.highlight(editor.textContent, Prism.languages.javascript, 'javascript');
};
const editor = document.querySelector('.editor');
const jar = CodeJar(editor, highlight);
</script>
最佳实践
- 自定义语法高亮:根据项目需求,使用不同的语法高亮库。
- 行号显示:使用
withLineNumbers
函数添加行号。 - 事件处理:通过 CodeJar 的选项参数,自定义 Tab 键行为和其他事件。
典型生态项目
react-codejar
react-codejar 是一个 React 包装器,用于在 React 应用中集成 CodeJar:
npm i react-codejar
使用示例:
import React from 'react';
import { CodeJar } from 'react-codejar';
const highlight = (editor) => {
const code = editor.textContent;
editor.innerHTML = code;
};
const Editor = () => {
return <CodeJar highlight={highlight} />;
};
export default Editor;
ngx-codejar
ngx-codejar 是一个 Angular 包装器,用于在 Angular 应用中集成 CodeJar:
npm i ngx-codejar
使用示例:
import { Component } from '@angular/core';
import { CodeJarComponent } from 'ngx-codejar';
@Component({
selector: 'app-root',
template: `<codejar [highlight]="highlight"></codejar>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
highlight = (editor) => {
const code = editor.textContent;
editor.innerHTML = code;
};
}
通过这些生态项目,可以更方便地在不同的前端框架中集成和使用 CodeJar。
codejarAn embeddable code editor for the browser 🍯项目地址:https://gitcode.com/gh_mirrors/co/codejar