diff --git a/README.md b/README.md index 8e8c4fa..c9b22a1 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,15 @@ -# HighlightJs Copy Code Badge Component +# HighlightJs Copy Code Badge-JS (extension) Component This small JavaScript library complements the [highlightJs Syntax Highligher](https://highlightjs.org/) by providing a badge in the top right corner of highlightJs code snippets. * Shows active Syntax for the code block * Allows copying the code block to Clipboard -You can install it [from NPM](https://www.npmjs.com/package/highlightjs-badge): +You can install it [from NPM](https://www.npmjs.com/package/highlightjs-badgejs): ```ps -npm install highlightjs-badge +npm install highlightjs-badgejs ``` - -* [Codepen Example](https://codepen.io/rstrahl/pen/RwNZGBE) -* [HighlightJs-Badge Blog Post](https://weblog.west-wind.com/posts/2019/Dec/30/A-HighlightJs-Copy-Code-Badge-Component) - -Here's what the code badge looks like attached to several highlightjs code blocks: - -![](ScreenShot.png) - -This small, single JavaScript file component can be loaded after highlightJS has been loaded. It's fully self-contained. Add the script, call the `window.highlightJsBadge()`, and you're up and running without any other configuration or dependencies. - ### Usage To use this library is very simple - you add a script file and call `highlightJsBadge()` after highlightJS has been applied. @@ -31,7 +21,7 @@ The following is a typical configuration for both highlightJs and highlightJs-Ba - + ``` +#### Options + +Some other options added from the original: + +* title : allow to set a different title on hover +* label : allow to set a prefix on badge name +* clickableBadge : if set "true" allow to have pointer and click event on badge in addition to icon click +* hasLineNumber : if set "true" indicates that content as line number plugin activated +* xmlBeautifier : if set "true" indicates that content (if xml) has been copied as beautif, otherwirse as original content + + ### Styling The default script includes default styling that should work great with dark themed syntax, and fairly well with light themed syntax. @@ -130,8 +131,8 @@ Alternately you can completely replace the template and styling. If you look at