antonmedv / Codejar
Licence: mit
An embeddable code editor for the browser 🍯
Stars: ✭ 774
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Codejar
ignition-code-editor
Add inline code editing to your ignition page
Stars: ✭ 44 (-94.32%)
Mutual labels: code-editor
Haskell Do
✏️ 📊 - The Haskell code editor focused on interactive development.
Stars: ✭ 349 (-54.91%)
Mutual labels: code-editor
KodeEditor
A simple code editor with syntax highlighting and pinch to zoom
Stars: ✭ 60 (-92.25%)
Mutual labels: code-editor
liveeditor
A simple live HTML, CSS, and JavaScript scratchpad in your browser
Stars: ✭ 84 (-89.15%)
Mutual labels: code-editor
vue-code-view
A Vue 2 component like Vue SFC REPL `@vue/repl` : u can edit, run and preview the code effect display in real time on the web page.
Stars: ✭ 67 (-91.34%)
Mutual labels: code-editor
Learn Vim
Learning Vim and Vimscript doesn't have to be hard. This is the guide that you're looking for.
Stars: ✭ 7,221 (+832.95%)
Mutual labels: code-editor
Code Editor
Acode - powerful text/code editor for android
Stars: ✭ 325 (-58.01%)
Mutual labels: code-editor
ax-editor
Ax is a code editor with syntax highlighting that runs in your terminal written completely in Swift.
Stars: ✭ 42 (-94.57%)
Mutual labels: code-editor
CodeRibbon
Navigate your code in an infinite timeline of code patches!
Stars: ✭ 138 (-82.17%)
Mutual labels: code-editor
Phi
phi: gpu accelerated code-editor; definitely not to be confused phonetically with vi.
Stars: ✭ 308 (-60.21%)
Mutual labels: code-editor
sketchup-console-plus
A better Ruby Console and IDE for integrated development in SketchUp.
Stars: ✭ 31 (-95.99%)
Mutual labels: code-editor
Script Lab
Create, run and share your code directly from Office
Stars: ✭ 358 (-53.75%)
Mutual labels: code-editor
x-studio.github.io
This is the issues tracking, roadmap, docs src repo of the x-studio IDE. Copyright © 2014-2022 Simdsoft Limited
Stars: ✭ 92 (-88.11%)
Mutual labels: code-editor
Rsyntaxtextarea
A syntax highlighting, code folding text editor for Java Swing applications.
Stars: ✭ 767 (-0.9%)
Mutual labels: code-editor
Cpeditor
The IDE for competitive programming 🎉 | Fetch, Code, Compile, Run, Check, Submit 🚀
Stars: ✭ 562 (-27.39%)
Mutual labels: code-editor
Ide
✨ Simple, free and open-source online code editor.
Stars: ✭ 311 (-59.82%)
Mutual labels: code-editor
CodeJar – an embeddable code editor for the browser
Features
- Lightweight (2 kB only)
- Preserves indentation on a new line
- Adds closing brackets, quotes
- Indents line with the Tab key
- Supports undo/redo
Getting Started
Install CodeJar 🍯 via npm:
npm i codejar
CodeJar 🍯 can be used via modules:
<script type="module">
import {CodeJar} from 'https://medv.io/codejar/codejar.js'
</script>
Create an element and init the CodeJar 🍯:
<div class="editor"></div>
<script>
let jar = CodeJar(document.querySelector('.editor'), Prism.highlightElement)
</script>
Second argument to CodeJar
is a highlighting function (in this example PrismJS), but any function may be used:
const highlight = (editor: HTMLElement) => {
const code = editor.textContent
// Do something with code and set html.
editor.innerHTML = code
}
let jar = CodeJar(editor, highlight)
Third argument to CodeJar
is options:
-
tab: string
replaces "tabs" with given string. Default:\t
.- Note: use css rule
tab-size
to customize size.
- Note: use css rule
-
indentOn: RegExp
allows auto indent rule to be customized. Default{$
.- Auto-tab if the text before cursor match the given regex while pressing Enter.
-
spellcheck: boolean
enables spellchecking on the editor. Defaultfalse
. -
catchTab: boolean
catches Tab keypress events and replaces it withtab
string. Default:true
. -
preserveIdent: boolean
keeps indent levels on new line. Defaulttrue
. -
addClosing: boolean
automatically adds closing brackets, quotes. Defaulttrue
. -
history
records history. Defaulttrue
.
let options = {
tab: ' '.repeat(4), // default is '\t'
indentOn: /[(\[]$/, // default is /{$/
}
let jar = CodeJar(editor, highlight, options)
Some styles may be applied to our editor to make it better looking:
.editor {
border-radius: 6px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
font-family: 'Source Code Pro', monospace;
font-size: 14px;
font-weight: 400;
height: 340px;
letter-spacing: normal;
line-height: 20px;
padding: 10px;
tab-size: 4;
}
API
updateCode(string)
Updates the code.
jar.updateCode(`let foo = bar`)
updateOptions(Partial<Options>)
Updates the options.
jar.updateOptions({tab: '\t'})
onUpdate((code: string) => void)
Calls callback on code updates.
jar.onUpdate(code => {
console.log(code)
})
toString(): string
Return current code.
let code = jar.toString()
save(): string
Saves current cursor position.
let pos = jar.save()
restore(pos: Position)
Restore cursor position.
jar.restore(pos)
recordHistory()
Saves current editor state to history.
destroy()
Removes event listeners from editor.
Related
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].