Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/julianpoemp/ngx-codejar
Angular wrapper for CodeJar code-editor. With this you can easily add code editors to your Angular app.
https://github.com/julianpoemp/ngx-codejar
angular angular-lib code-editor codejar highlighter highlightjs prismjs
Last synced: about 2 months ago
JSON representation
Angular wrapper for CodeJar code-editor. With this you can easily add code editors to your Angular app.
- Host: GitHub
- URL: https://github.com/julianpoemp/ngx-codejar
- Owner: julianpoemp
- License: mit
- Created: 2021-06-10T18:02:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-09T15:50:36.000Z (9 months ago)
- Last Synced: 2024-11-06T10:46:30.272Z (about 2 months ago)
- Topics: angular, angular-lib, code-editor, codejar, highlighter, highlightjs, prismjs
- Language: TypeScript
- Homepage: https://julianpoemp.github.io/ngx-codejar/
- Size: 5.61 MB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-codejar 
This is an Angular wrapper for the code-editor [CodeJar](https://github.com/antonmedv/codejar) by Anton Medvedev. It
allows to easily use CodeJar in Angular projects.
## Demo
Visit the demo page: https://julianpoemp.github.io/ngx-codejar/
## About CodeJar
CodeJar is an embeddable javascript code-editor that supports different highlighter like Highlight.js or PrimsJs.
According to the [main project](https://github.com/antonmedv/codejar) it has the following features:
- Preserves indentation on a new line
- Adds closing brackets, quotes
- Indents line with the Tab key
- Supports undo/redo
## Compatibility
NgxCodeJar
CodeJar
Angular
Readme
7.x
4.x
>= 16
6.x
4.x
15.x
## Overview
- [Install ngx-codejar with highlight.js](https://github.com/julianpoemp/ngx-codejar#how-to-use-codejar-with-angular-and-highlightjs)
- [Install ngx-codejar with prism.js](https://github.com/julianpoemp/ngx-codejar#how-to-use-codejar-with-angular-and-prismjs)
- [Options](https://github.com/julianpoemp/ngx-codejar#properties--events)
- [Development](https://github.com/julianpoemp/ngx-codejar#development)
- [Contribution](https://github.com/julianpoemp/ngx-codejar#development)
- [Troubleshooting](https://github.com/julianpoemp/ngx-codejar#development)
## Installation
### How to use CodeJar with Angular and highlight.js
If you want to use CodeJar with [highlight.js](https://highlightjs.org/) you should do the following steps:
1. Install highlight.js, CodeJar, codejar-linenumbers and ngx-codejar:
````
npm install --save codejar codejar-linenumbers highlight.js ngx-codejar && npm install --save-dev @types/highlight.js
````
2. Import NgxCodeJarComponent `NgxCodeJarComponent` to your app's ngModule import property (standalone!):
````typescript
@NgModule({
declarations: [
// ...
],
imports: [
// ...,
NgxCodeJarComponent
],
// ...
})
````
3. Select themes from `node_modules/highlight.js/styles` and add them to the styles section of your `angular.json`.
4. Add `node_modules/codejar-linenumbers/es/codejar-linenumbers.css` to the styles section of your `angular.json`
5. Now see https://julianpoemp.github.io/ngx-codejar/ on how to use it.
### How to use CodeJar with Angular and Prism.js
If you want to use codejar with [prism.js](https://prismjs.com/) you should do the following steps:
1. Install prism.js, codejar, codejar-linenumbers and ngx-codejar:
````
npm install --save codejar codejar-linenumbers prismjs ngx-codejar && npm install --save-dev @types/prismjs
````
2. Import module `NgxCodeJarComponent` to your app's ngModule imports property (!standalone):
````typescript
@NgModule({
declarations: [
// ...
],
imports: [
// ...,
NgxCodeJarComponent
],
// ...
})
````
3. Select themes from `node_modules/prismjs/themes` and add them to the styles section of your `angular.json`.
4. Add `node_modules/codejar-linenumbers/es/codejar-linenumbers.css` to the styles section of your `angular.json`
5. Now see https://julianpoemp.github.io/ngx-codejar/ on how to use it.
### Properties & Events
Type
Name
Description
Default
Property
code
property for two-way data-binding.
-
Property
highlighter
selects which highlighter should be used ('prism' or 'hljs')
'hljs'
Property
options
Options provided by CodeJar + additional Options (tabSize)
Defaults provided by Codejar Defaults by CodeJar
Property
showLineNumbers
adds line numbers
false
Property
highlightMethod
set a method for code highlight
(editor: CodeJarContainer) => {}
Property
readonly
defines if user is allowed to make code changes
false
Event
update
this event is triggered after the code was updated.
-
## Development
Call `npm start` to start the demo locally. Build the library using `ng build ngx-codejar`.
## Contribution
Feel free to create pull requests or issues with suggestions! :)
## Troubleshooting
This package is just a wrapper for CodeJar. If you have any problems using it please make sure, that the problem is
related to this wrapper.