Skip to content

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

New issue

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

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

Already on GitHub? Sign in to your account

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
@@ -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
@@ -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.
@@ -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
@@ -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
Oops, something went wrong.