Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

es6 module and custom event when line numbers are inserted #101

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
39 changes: 39 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,17 @@ $(document).ready(function() {
});
```

You can also import the library as an es6 module:

```js
import hljs from 'highlight.js';

import { decorateHljs } from 'highlightjs-line-numbers.js/src/decorator.es6.js';
decorateHljs(hljs);
hljs.highlightAll();
hljs.initLineNumbersOnLoad();
```

If your needs cool style, add styles by taste:

```css
Expand Down Expand Up @@ -85,6 +96,19 @@ If your needs cool style, add styles by taste:
}
```

## Events

There is one custom event fired when a code element has been augmented
with line numbers. You can listen for it like so:

```js
const code = document.querySelector('code.my-code');
code.addEventListener('line-numbers-inserted', (e) => {
// you can work with the line numbers modifications, now.
});

```

## Options

After version 2.1 plugin has optional parameter `options` - for custom setup.
Expand Down Expand Up @@ -159,5 +183,20 @@ CSS selector | description

- [highlightjs-lang.js](https://github.com/wcoder/highlightjs-lang.js) — plugin to display language name with formatting;

## Development: Building, and Basic Test of Code

Build the project.

./node_modules/.bin/gulp build

Run http-server to test that the code is working:

./node_modules/.bin/http-server -c-1 test

That will start the server on localhost on port 8080, which
you can navigate to. The index page
invokes highlighting and this library, so you should see
a C# snippet and line numbers.

---
© 2023 Yauheni Pakala and [Community](https://github.com/wcoder/highlightjs-line-numbers.js/graphs/contributors) | MIT License
2 changes: 1 addition & 1 deletion dist/highlightjs-line-numbers.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 11 additions & 3 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,21 @@ var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var replace = require('gulp-replace');
var rollup = require('rollup-stream');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');

gulp.task('build', function() {
return gulp.src('src/*.js')
return rollup({
input: 'src/highlightjs-line-numbers.js',
format: 'iife'
})
.pipe(source('highlightjs-line-numbers.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(replace(' ', ''))
.pipe(rename({
extname: '.min.js'
}))
.pipe(gulp.dest('dist'));
.pipe(gulp.dest('dist'))
.pipe(gulp.dest('test'));
});
Loading