highlightjs-badge
Version:
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.
114 lines (85 loc) • 3.24 kB
HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
/* override badge styling */
.code-badge {
background: #555 ;
padding: 8px ;
}
.code-badge-copy-icon {
font-size: 1.3em ;
}
</style>
</head>
<body>
<div class="container">
<h1>HighlightJS Code Copying</h1>
<hr>
<h3 class="mt-3">Single line code snippet</h3>
<pre><code class="hljs language-js">let x = 1;
x++;</code></pre>
<h3 class="mt-3">Single line code snippet</h3>
<pre><code class="hljs lang-js">public static string GetChecksumFromFile(string file)
{
if (!File.Exists(file))
return null;
try
{
byte[] checkSum;
using (FileStream stream = File.Open(file, FileMode.Open, FileAccess.Read, FileShare.Read))
{
var md = new MD5CryptoServiceProvider();
checkSum = md.ComputeHash(stream);
}
return StringUtils.BinaryToBinHex(checkSum);
}
catch
{
return null;
}
}</code></pre>
<h3>Plain Text</h3>
<pre><code class="hljs lang-txt">This should be treated as just plain text
It shows as is, without any formatting</code></pre>
<h3>Auto-Detected</h3>
<pre><code>Content-Type: text/html
Accept: application/json
Content-Length: 12332
</code></pre>
</div>
<link href="highlightJS/styles/vs2015.css" rel="stylesheet">
<script src="highlightJs/highlight.pack.js"></script>
<script src="highlightjs-badge.js"></script>
<script>
setTimeout(function () {
var pres = document.querySelectorAll("pre>code");
for (var i = 0; i < pres.length; i++) {
hljs.highlightBlock(pres[i]);
}
var options = {
contentSelector: ".container",
// 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",
// CSS class(es) used to render the done icon.
checkIconClass: "fa fa-check text-success",
// intercept text copying - passed in text return text out
onBeforeCodeCopied: function(text) {
text = "$$$ " + text;
return text;
}
};
window.highlightJsBadge(options);
},10);
</script>
</body>
</html>