Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rickstrahl/highlightjs-badge
Addon component to highlightjs that lets you copy code snippets to the clipboard and displays the active syntax
https://github.com/rickstrahl/highlightjs-badge
code-copying highlightjs javascript syntax-highlighting
Last synced: 2 months ago
JSON representation
Addon component to highlightjs that lets you copy code snippets to the clipboard and displays the active syntax
- Host: GitHub
- URL: https://github.com/rickstrahl/highlightjs-badge
- Owner: RickStrahl
- License: other
- Created: 2019-09-08T05:49:36.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T01:30:28.000Z (almost 2 years ago)
- Last Synced: 2024-10-08T22:08:57.240Z (3 months ago)
- Topics: code-copying, highlightjs, javascript, syntax-highlighting
- Language: CSS
- Size: 263 KB
- Stars: 46
- Watchers: 4
- Forks: 9
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.MD
Awesome Lists containing this project
README
# HighlightJs Copy Code Badge 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):
```ps
npm install highlightjs-badge
```
* [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:
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.
The following is a typical configuration for both highlightJs and highlightJs-Badge:
```html
// apply HighlightJS
var pres = document.querySelectorAll("pre>code");
for (var i = 0; i < pres.length; i++) {
hljs.highlightBlock(pres[i]);
}
// add HighlightJS-badge (options are optional)
var options = { // optional
contentSelector: "#ArticleBody",
// CSS class(es) used to render the copy icon.
copyIconClass: "fas fa-copy",
// CSS class(es) used to render the done icon.
checkIconClass: "fas fa-check text-success"
};
window.highlightJsBadge(options);
```
### Options Available
The following options are available to pass into the function, which control the behavior of the badge generation.
```js
var options = {
// the selector for the badge template
templateSelector: "#CodeBadgeTemplate",
// base content CSS selector that is searched for snippets
contentSelector: "body",
// Delay in ms used for `setTimeout` before badging is applied
// Use if you need to time highlighting and badge application
// since the badges need to be applied afterwards.
// 0 - direct execution (ie. you handle timing
loadDelay: 0,
// CSS class(es) used to render the copy icon.
copyIconClass: "fa fa-copy",
// optional content for icons class ( or file_copy)
copyIconContent: "",
// CSS class(es) used to render the done icon.
checkIconClass: "fa fa-check text-success",
checkIconContent: "",
// function called before code is placed on clipboard that allows you inspect and modify
// the text that goes onto the clipboard. Passes text and code root element (hljs).
// Example: function(text, codeElement) { return text + " $$$"; }
onBeforeCodeCopied: null
};
```
### Styling
The default script includes default styling that should work great with dark themed syntax, and fairly well with light themed syntax.
You can customize the styling and the layout of badge by either overriding existing styles or by:
* Overriding styles
* Copying complete styles and template into page
#### Overriding styles
The easiest way to modify behavior is to override individual styles. The stock script includes a hardcoded style sheet and you can override the existing values with hard CSS overrides.
For example to override the background and icon sizing you can:
```css
.code-badge {
padding: 8px !important;
background: pink !important;
}
.code-badge-copy-icon {
font-size: 1.3em !important;
}
```
#### Replace the Template and Styling Completely
Alternately you can completely replace the template and styling. If you look at the source file at the end of the file is a commented section that contains the complete template and you can copy and paste that template into your HTML page - at the bottom near the `