
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
highlightjs-badge
Advanced tools
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.
This small JavaScript library that complements the highlightJs Syntax Highligher by providing a badge in top right corner that:
Here's what this looks like:
This small, single JavaScript file contains a single file that can be loaded after highlightJS has been loaded. It's fully self-contained: Add the script and it works out of the box without additional dependencies or styling.
To use this library is very simple - you add a script file and call highlightJsBadge()
after highlightJS has been applied.
<link href="scripts/highlightjs/styles/vs2015.css" rel="stylesheet" />
<script src="scripts/highlightjs/highlight.pack.js"></script>
<script src="scripts/highlightjs-badge.min.js"></script>
<script>
// apply HighlightJS
var pres = document.querySelectorAll("pre>code");
for (var i = 0; i < pres.length; i++) {
hljs.highlightBlock(pres[i]);
}
// add HighlightJS-badge
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);
</script>
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:
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:
<style>
.code-badge {
padding: 8px !important;
background: pink !important;
}
.code-badge-copy-icon {
font-size: 1.3em !important;
}
</style>
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 </body>
tag.
<style>
"@media print {
.code-badge { display: none; }
}
pre>code.hljs {
position: relative;
}
.fa.text-success:{ color: limegreen !important}
.code-badge {
display: flex;
flex-direction: row;
white-space: normal;
background: transparent;
background: #333;
color: white;
font-size: 0.8em;
opacity: 0.5;
border-radius: 0 0 0 7px;
padding: 5px 8px 5px 8px;
position: absolute;
right: 0;
top: 0;
}
.code-badge.semi-active {
opacity: .50
}
.code-badge.active {
opacity: 0.8;
}
.code-badge:hover {
opacity: .95;
}
.code-badge a,
.code-badge a:hover {
text-decoration: none;
}
.code-badge-language {
margin-right: 10px;
font-weight: 600;
color: goldenrod;
}
.code-badge-copy-icon {
font-size: 1.2em;
cursor: pointer;
padding: 0 7px;
margin-top:2;
}
</style>
<div id="CodeBadgeTemplate" style="display:none">
<div class="code-badge">
<div class="code-badge-language">{{language}}</div>
<div title="Copy to clipboard">
<i class="{{copyIconClass}} code-badge-copy-icon"></i>
</div>
</div>
</div>
This is the same template that the library internally holds and injects into the page, but if the CodeBadgeTemplate
exists in the document then that is used instead of the embedded template. At this point you can override the styling and layout as needed. You can also separate the CSS into a separate file and only include the #CodeBadgeTemplate
element to force the script to not load it's internal template.
This library is a self-contained JavaScript file so there are no direct external dependencies. However there are a couple of requirements:
The library uses a couple of ES6 functions:
and you can add the polyfills linked above for old browser (Internet Explorer) support.
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:
<i class="fa fa-copy"></i>
The icon is changed to fa-check
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:
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);
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.
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 <pre>
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.
FAQs
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.
The npm package highlightjs-badge receives a total of 1,902 weekly downloads. As such, highlightjs-badge popularity was classified as popular.
We found that highlightjs-badge demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.