Highlight code sử dụng Prism và Pure JS

Trong loạt bài viết về làm đẹp khung chứa code có nút sao chép vào khay nhớ tạm tôi đã giới thiệu cho các bạn rất nhiều thư viện hỗ trợ làm đẹp nhưng đa phần đều sử dụng jQuery. Vậy liệu có cách nào khả dụng với JS thuần (Pure JavaScript) hay không ? Câu trả lời sẽ có trong bài viết này
Xem demo
demo
Ưu điểm của Prismjs đó là dung lượng nhỏ gọn chưa tới 20KB, tích hợp chỉ bằng 1 file js duy nhất không cần config, support rất nhiều ngôn ngữ cũng như nhiều style cho bạn lựa chọn.

Tại thời điểm viết bài PrismJS đang có version 1.15.0

CSS cho khung code, popup và PrismJS

.code-header {
    text-align: right;
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    font-family: Helvetica, Arial, sans-serif;
    box-sizing: border-box
}

.code-header a {
    font-size: 15px;
    display: inline-block;
    cursor: pointer;
    border-left: 1px solid #e5e5e5;
    box-sizing: border-box;
    padding: 6px 13px
}

.code-header a:hover {
    background: #f3f3f3;
    transition: all 0.1s linear
}

.msg-alert {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #333;
    z-index: 1000;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 4px
}

/* Prism JS */
code[class*="language-"],
pre[class*="language-"] {
    font-size: 14px;
    letter-spacing: .02rem;
    line-height: 1.4;
    color: black;
    background: none;
    text-shadow: 0 1px white;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"]::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"]::-moz-selection {
    text-shadow: none;
    background: #b3d4fc
}

pre[class*="language-"]::selection,
pre[class*="language-"]::selection,
code[class*="language-"]::selection,
code[class*="language-"]::selection {
    text-shadow: none;
    background: #b3d4fc
}

@media print {
    code[class*="language-"],
    pre[class*="language-"] {
        text-shadow: none
    }
}

pre[class*="language-"] {
    padding: 1em;
    margin: 0;
    overflow: auto;
    border: 1px solid #e5e5e5;
    border-top: 0;
    box-sizing: border-box
}

:not(pre)>code[class*="language-"],
pre[class*="language-"] {
    background: #f8f8f8
}

:not(pre)>code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: slategray
}

.token.punctuation {
    color: #999
}

.namespace {
    opacity: .7
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #905
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #690
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #9a6e3a
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #07a
}

.token.function,
.token.class-name {
    color: #DD4A68
}

.token.regex,
.token.important,
.token.variable {
    color: #e90
}

.token.important,
.token.bold {
    font-weight: bold
}

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

JS

Code js trước </body>, do khung code chủ yếu dành cho trang bài viết nên bạn có thể thêm thẻ điều kiện để tối ưu code

<b:if cond='data:view.isSingleItem'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js'/>
<script>//<![CDATA[
function forEachElement(selector, fn) {
  var elements = document.querySelectorAll(selector);
  for (var i = 0; i < elements.length; i++)
    fn(elements[i], i);
}

forEachElement("pre>code[class*='language-']", function(el, i) {
  el.parentNode.insertAdjacentHTML("beforebegin", "<div class='code-header'><a class='copy-code'>Copy</a></div>");
});

forEachElement(".copy-code", function(el, i) {
  el.addEventListener("click", function() {
    var body = document.getElementsByTagName("body")[0];

    var txt = document.createElement("textarea");
    txt.setAttribute("id", "txt-cpy");
    txt.style.position = "absolute";
    txt.style.left = "-9999em";
    txt.value = el.parentNode.nextElementSibling.textContent;
    body.appendChild(txt);

    document.getElementById("txt-cpy").select();

    var div = document.createElement("div");
    div.setAttribute("class", "msg-alert");
    try {
      var successful = document.execCommand('copy');
      successful ? div.innerHTML = "Successfully copied to clipboard !" : div.innerHTML = "Fail to copy to clipboard !";
      body.appendChild(div);
    } catch (err) {
      console.log('Oops, unable to copy');
    }

    body.removeChild(txt);
    setTimeout(function() {
      body.removeChild(div);
    }, 2000)
  })
});
//]]>
</script>
</b:if>

Mẫu code khi viết bài

<pre><code class="language-xxx">

<!-- Parsed code -->

</code></pre>

Với xxx là mã ngôn ngữ bạn muốn hiển thị, bạn lấy list tại https://prismjs.com/#languages-list

Ok, tích hợp và sử dụng không thể ngắn gọn xúc tích hơn nữa.

Để lại bình luận nếu bạn gặp khó khăn và chúc thành công !

#hung1001