The official code editor engine for lexius
npm install @pfmcodes/caretbash
npm install @pfmcodes/caret
`
$3
`bash
yarn add @pfmcodes/caret
`
$3
`bash
pnpm add @pfmcodes/caret
`
š Quick Start
$3
`html
Caret
`
$3
`javascript
import editor from '@pfmcodes/caret';
// Create editor instance
const editorInstance = await editor.editor.createEditor(
document.getElementById('editor'),
{
value: '', // Initial code
language: 'python', // Programming language
theme: 'monokai' // Highlight.js theme
}
);
`
š Project Structure
`
caret/
āāā esm/ # ES Module builds
āāā highlight.js/ # Syntax highlighting support
āāā types/ # TypeScript type definitions
āāā index.css # Core styles
āāā package.json # Package configuration
āāā .gitignore # Git ignore rules
āāā .npmignore # NPM ignore rules
āāā LICENSE # MIT License
`
š” Usage
$3
`javascript
import editor from '@pfmcodes/caret'; // auto link to commonjs version
const jsEditor = await editor.editor.createEditor(
document.getElementById('js-editor'),
{
value: function greet(name) {
Hello, \${name}!\;
,
language: 'javascript',
theme: 'atom-one-dark'
}
);
`
$3
`javascript
const pyEditor = await editor.createEditor(
document.getElementById('py-editor'),
{
value: def fibonacci(n):
,
language: 'python',
theme: 'github-dark'
}
);
`
$3
`javascript
const emptyEditor = await editor.createEditor(
document.getElementById('empty-editor'),
{
value: '',
language: 'javascript',
theme: 'hybrid'
}
);
`
šØ Customization
$3
The editor comes with default styles that you can override:
`css
/ Custom editor styling /
#editor {
width: 800px !important;
height: 500px !important;
font-size: 16px !important;
}
/ Customize line numbers /
.Caret-lineCounter {
background: #1e1e1e;
}
.Caret-lineCounter-number {
font-size: 12px;
padding: 0 8px;
}
/ Customize the textarea /
#Caret-textarea {
font-family: 'Fira Code', 'Consolas', monospace;
line-height: 1.6;
}
/ Customize the Caret /
#Caret-caret {
background: #00ff00 !important;
width: 3px !important;
}
`
šÆ Advanced Features
$3
Caret supports all languages available in Highlight.js:
`javascript
// JavaScript
await editor.createEditor(el, { language: 'javascript', ... });
// Python
await editor.createEditor(el, { language: 'python', ... });
// TypeScript
await editor.createEditor(el, { language: 'typescript', ... });
// HTML
await editor.createEditor(el, { language: 'html', ... });
// CSS
await editor.createEditor(el, { language: 'css', ... });
// And many more...
`
$3
`javascript
const editorInstance = await editor.createEditor(el, {
value: 'console.log("Hello");',
language: 'javascript',
theme: 'hybrid'
});
// Later, switch to Python
editorInstance.setValue('print("Hello")');
editorInstance.setLanguage('python');
`
$3
The editor automatically:
- Updates syntax highlighting as you type
- Adjusts line numbers dynamically
- Maintains Caret position accurately
- Synchronizes all visual components
$3
`javascript
const editorInstance = await editor.createEditor(
containerElement,
{
// Initial code content
value: 'const x = 42;',
// Programming language for syntax highlighting
// Supports: javascript, python, java, cpp, html, css, json, etc.
language: 'javascript',
// Highlight.js theme name
// Examples: 'hybrid', 'monokai', 'atom-one-dark', 'github', 'vs2015'
theme: 'hybrid'
}
);
`
$3
Caret supports all Highlight.js themes. Popular options include:
Dark Themes:
- atom-one-dark
- monokai
- night-owl
- nord
- tokyo-night-dark
- vs2015
Light Themes:
- github
- atom-one-light
- stackoverflow-light
- xcode
š ļø API Reference
$3
Creates a new editor instance.
Parameters:
- container (HTMLElement) - The DOM element to attach the editor to
- options (Object) - Configuration options
- value (string) - Initial code content
- language (string) - Programming language for syntax highlighting
- theme (string) - Highlight.js theme name
Returns: Promise
$3
`javascript
// Get current editor content
const code = editorInstance.getValue();
// Set editor content programmatically
editorInstance.setValue('console.log("New code");');
// Focus the editor
editorInstance.focus();
// Change the programming language
editorInstance.setLanguage('python');
// Destroy the editor instance
editorInstance.destroy();
`
$3
#### Automatic Line Numbering
Line numbers are automatically generated and synchronized with your code.
#### Smart Tab Handling
- Tab - Indent selected lines or insert 4 spaces
- Shift + Tab - Unindent selected lines
#### Custom Caret
The editor features a custom-rendered Caret that adapts to your theme (light/dark).
#### Synchronized Scrolling
All editor components (code, highlights, line numbers) scroll together smoothly.
š Complete Example
Here's a complete working example:
`html
Caret Demo
Caret Demo
`
āļø Technical Details
$3
Caret uses a clever layering technique:
1. Textarea Layer - Handles user input and cursor management
2. Pre/Code Layer - Displays syntax-highlighted code (overlay)
3. Custom Caret - Renders a styled Caret in the correct position
4. Line Numbers - Dynamically generated and synchronized
The editor synchronizes all layers during:
- Typing (input events)
- Scrolling (scroll events)
- Navigation (click, keyup events)
$3
- Real-time Highlighting: Uses Highlight.js for fast, accurate syntax highlighting
- Canvas Measurement: Employs HTML5 Canvas API for precise text width calculations
- Event Optimization: Efficiently updates only what's necessary on each interaction
$3
- Modern browsers with ES6+ support
- Chrome, Firefox, Safari, Edge (latest versions)
- Requires JavaScript modules support
š¤ Contributing
Contributions are welcome! Please follow these steps:
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request
$3
`bash
Clone the repository
git clone https://github.com/pfmcodes/lexius-editor.git
Navigate to the directory
cd lexius-editor
Install dependencies
npm install
Run development server (if applicable)
npm run dev
Build the project
npm run build
``