This small JavaScript library that complements the [highlighJs Syntax Highligher](https://highlightjs.org/) by providing an overlay badge that lets you copy code to the clipboard and display the active Syntax language.
npm install highlightjs-badge* Shows active Syntax for the code block
* Allows copying the code block to Clipboard
You can install it from NPM:
``ps`
npm install highlightjs-badge
* Codepen Example
* HighlightJs-Badge Blog Post
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.
after highlightJS has been applied.The following is a typical configuration for both highlightJs and highlightJs-Badge:
`html
`
$3
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
};
`$3
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
`#### 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
tag.`html
`This is the same template that the library internally holds and injects into the page, but if
exists in the document then that is used instead of the embedded template. When using your own template no styling is applied. so you neeed to include both the CSS and the CodeBadgeTemplate.You can optionally separate out the CSS into a separate file and only include the
#CodeBadgeTemplate element - that's sufficient for your custom template and styling to kick in.$3
This library is a self-contained JavaScript file so there are no direct external dependencies. However, there are a couple of requirements:#### Some ES6 Usage
The library uses a couple of ES6 functions, so if you plan on using this with Internet Explorer you'll need to add these polyfills:
#### FontAwesome by Default, Custom Icon Overrides
The library by default also uses FontAwesome icons for the copy and check icons. The icon styles used work with Font Awesome 4 and 5 (both free and pro).
The default rendering uses:
`html
`
The icon is changed to check after content's been copied for 2 seconds.If you want to use different icons you can use separate styling for the icon classes. For example to change the icons used you affect the
class attribute on the icon setting. For example to use Material Icons:
`javascript
var options = {
// CSS class(es) used to render the copy icon.
copyIconClass: "material-icons",
copyIconContent: "copy_files",
// CSS class(es) used to render the done icon.
checkIconClass: "material-icons",
checkIconContent: "check"
};
window.highlightJsBadge(options);
`$3
Licensed under the MIT License. There's no charge to use, integrate or modify the code for this project. You are free to use it in personal, commercial, government and any other type of application.
$3
$3
* Add onBeforeCopyCode hook
You can provide an
function to intercept the pasted text and fix up the text before it is pasted into the clipboard.$3
* Fix up
lang-javascript Syntax Names
Fix up lang-csharp style syntax tags generated by various tools like DocFx and properly display the syntax. Same fixup is also applied to language-css style syntax.$3
* Turn off code badge in Print Media Style
Added media class so that the code-badge is not shown when printing is active for print or PDF generation.
* Fix Internet Explorer missing Line Feeds
Fixed issue where IE 11/10 was not properly picking up line breaks in the copied text content. Still useful for those of us using the Web Browser control in Windows. Fixed by using
textContent instead of innerText.* Badge Position on Scrolled Content
Fixed issue where the badge overlay would not properly stay right aligned when a code block was scrolled horizontally. Fixed by moving
position:relative up to the ` tag via code. Unfortunately this style feature is not directly settable via CSS so the relative style gets hardcoded when the badge is added to the page.