Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
mikedll wants to merge11 commits intowcoder:master
base:master
Choose a base branch
Loading
frommikedll:master
Open
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletionsREADME.md
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 deletiondist/highlightjs-line-numbers.min.js
View file
Open in desktop

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

14 changes: 11 additions & 3 deletionsgulpfile.js
View file
Open in desktop
Original file line numberDiff line numberDiff 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

[8]ページ先頭

©2009-2025 Movatter.jp