<!DOCTYPE html>
<html>
<head>
<title>hljs line number</title>
</head>
<style>
/**
* Highlight.js
*/
table.hljs-ln{border-collapse:unset;max-width:unset;font-size:unset;margin-bottom:unset;width:unset}
table.hljs-ln td,table.hljs-ln th{border:unset;padding:unset;word-break:unset}
table.hljs-ln tr:nth-child(even){background-color:unset;}
table.hljs-ln tr:hover{background-color:unset;}
table.hljs-ln th{padding-top:unset;padding-bottom:unset;text-align:unset;background-color:unset;color:unset;}
table.hljs-ln th a{color:unset;border-bottom:unset;}
table.hljs-ln th a:hover{text-decoration:unset;color:unset;border-bottom:unset;}
/*
* hljs monokai
* https://cdnjs.com/libraries/highlight.js/
*/
.hljs-ln-numbers {-webkit-touch-callout: none !important; -webkit-user-select: none !important; -khtml-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; text-align: center !important; color: #ccc !important; border-right: 1px solid #CCC !important; vertical-align: top !important; padding-right: 5px !important; /* your custom style here */ } /* for block of code */ .hljs-ln-code {padding-left: 10px !important; } .hljs {display: block; overflow-x: auto; padding: 0.5em; background: #272822; color: #ddd; } .hljs-tag, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-strong, .hljs-name {color: #f92672; } .hljs-code {color: #66d9ef; } .hljs-class .hljs-title {color: white; } .hljs-attribute, .hljs-symbol, .hljs-regexp, .hljs-link {color: #bf79db; } .hljs-string, .hljs-bullet, .hljs-subst, .hljs-title, .hljs-section, .hljs-emphasis, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable {color: #a6e22e; } .hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta {color: #75715e; } .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-title, .hljs-section, .hljs-type, .hljs-selector-id {font-weight: bold; }
</style>
<body style='max-width: 500px;margin:50px auto;'>
<h1>hljs line number</h1>
<div class="blog-posts">
<pre><code><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html></code></pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>
//<![CDATA[
/*
* highlightjs-line-numbers.min.js
* https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js
*/
!function(e,n){"use strict";function t(e){for(var n=e;n;){if(n.className&&n.className.indexOf("hljs-ln-code")!==-1)return!0;n=n.parentNode}return!1}function r(e){for(var n=e;"TABLE"!==n.nodeName;)n=n.parentNode;return n}function o(e){for(var n=e.toString(),t=e.anchorNode;"TD"!==t.nodeName;)t=t.parentNode;for(var o=e.focusNode;"TD"!==o.nodeName;)o=o.parentNode;var a=parseInt(t.dataset.lineNumber),i=parseInt(o.dataset.lineNumber);if(a!=i){var l=t.textContent,s=o.textContent;if(a>i){var c=a;a=i,i=c,c=l,l=s,s=c}for(;0!==n.indexOf(l);)l=l.slice(1);for(;n.lastIndexOf(s)===-1;)s=s.slice(0,-1);for(var d=l,u=r(t),f=a+1;f<i;++f){var h=m('.{0}[{1}="{2}"]',[b,T,f]),v=u.querySelector(h);d+="\n"+v.textContent}return d+="\n"+s}return n}function a(){var e=n.createElement("style");e.type="text/css",e.innerHTML=m(".{0}{border-collapse:collapse}.{0} td{padding:0}.{1}:before{content:attr({2})}",[N,y,T]),n.getElementsByTagName("head")[0].appendChild(e)}function i(t){"interactive"===n.readyState||"complete"===n.readyState?l(t):e.addEventListener("DOMContentLoaded",function(){l(t)})}function l(t){try{var r=n.querySelectorAll("code.hljs,code.nohighlight");for(var o in r)r.hasOwnProperty(o)&&s(r[o],t)}catch(a){e.console.error("LineNumbers error: ",a)}}function s(e,n){"object"==typeof e&&g(function(){e.innerHTML=d(e,n)})}function c(e,n){if("string"==typeof e){var t=document.createElement("code");return t.innerHTML=e,d(t,n)}}function d(e,n){n=n||{singleLine:!1};var t=n.singleLine?0:1;return f(e),u(e.innerHTML,t)}function u(e,n){var t=v(e);if(""===t[t.length-1].trim()&&t.pop(),t.length>n){for(var r="",o=0,a=t.length;o<a;o++)r+=m('<tr><td class="{0} {1}" {3}="{5}"><div class="{2}" {3}="{5}"></div></td><td class="{0} {4}" {3}="{5}">{6}</td></tr>',[L,j,y,T,b,o+1,t[o].length>0?t[o]:" "]);return m('<table class="{0}">{1}</table>',[N,r])}return e}function f(e){var n=e.childNodes;for(var t in n)if(n.hasOwnProperty(t)){var r=n[t];p(r.textContent)>0&&(r.childNodes.length>0?f(r):h(r.parentNode))}}function h(e){var n=e.className;if(/hljs-/.test(n)){for(var t=v(e.innerHTML),r=0,o="";r<t.length;r++){var a=t[r].length>0?t[r]:" ";o+=m('<span class="{0}">{1}</span>\n',[n,a])}e.innerHTML=o.trim()}}function v(e){return 0===e.length?[]:e.split(x)}function p(e){return(e.trim().match(x)||[]).length}function g(n){e.setTimeout(n,0)}function m(e,n){return e.replace(/\{(\d+)\}/g,function(e,t){return n[t]?n[t]:e})}var N="hljs-ln",L="hljs-ln-line",b="hljs-ln-code",j="hljs-ln-numbers",y="hljs-ln-n",T="data-line-number",x=/\r\n|\r|\n/g;e.hljs?(e.hljs.initLineNumbersOnLoad=i,e.hljs.lineNumbersBlock=s,e.hljs.lineNumbersValue=c,a()):e.console.error("highlight.js not detected!"),document.addEventListener("copy",function(e){var n=window.getSelection();if(t(n.anchorNode)){var r;r=window.navigator.userAgent.indexOf("Edge")!==-1?o(n):n.toString(),e.clipboardData.setData("text/plain",r),e.preventDefault()}})}(window,document);
/**
* Highlight.js
*/
document.addEventListener('DOMContentLoaded', (event) => {
/* double click */
for (var pres = document.querySelectorAll("pre,code,kbd,blockquote,td"), i = 0; i < pres.length; i++) pres[i].addEventListener("dblclick", function() {
var e = getSelection(),
t = document.createRange();
t.selectNodeContents(this), e.removeAllRanges(), e.addRange(t)
}, !1);
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
hljs.initLineNumbersOnLoad();
});
});
//]]>
</script>
</body>
</html>Hasil live di codepen.io
Komentar