[WebDesign] Copy To Clipboard For Syntax Highlighter

Hi, xin chào các bạn, ở loạt bài viết trước, tôi đã giới thiệu đến các bạn form chứa code có nút copy to clipboard + tooltip cho website. Tiếp tục chủ đề đó hôm nay sẽ là 1 form khác, điểm khác biệt đó là form này code của bạn sẽ được làm đẹp (Syntax Highlighter) nhìn trông bắt mắt hơn, cách tích hợp đơn giản, không dùng flash,...

Xem demo
 DEMO

Tích hợp

Để làm được ta cần tích hợp những thứ sau

• Jquery : https://cdnjs.com/libraries/jquery
• Prism : https://cdnjs.com/libraries/prism
• Clipboard.js : https://cdnjs.com/libraries/clipboard.js

Tại thời điểm viết bài phiên bản của chúng lần lượt là: 3.3.1, 1.10.0, 1.7.1
Bạn truy cập link phía trên để get version mới nhất nhé

Chèn đoạn mã sau trước thẻ đóng </head>

<!-- Get lastest Jquery : https://cdnjs.com/libraries/jquery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'/>

<!-- Get lastest prism : https://cdnjs.com/libraries/prism -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/prism.min.js'/>

<!-- Get lastest clipboard.js : https://cdnjs.com/libraries/clipboard.js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js'/> 

Viết CSS, dán code sau vào trước thẻ ]]></b:skin>

code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
code[class*=language-]::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#3399FF}
code[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-]::selection,pre[class*=language-]::selection{text-shadow:none;background:#3297FD}
@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}
pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}
:not(pre)>code[class*=language-],pre[class*=language-]{background:unset}
:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}
.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}
.token.punctuation{color:#999}
.namespace{opacity:.7}
.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}
.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}
.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}
.token.atrule,.token.attr-value,.token.keyword{color:#07a}
.token.function{color:#dd4a68}
.token.important,.token.regex,.token.variable{color:#e90}
.token.bold,.token.important{font-weight:700}
.token.italic{font-style:italic}
.token.entity{cursor:help}
.code-box-copy{position:relative;font-size:14px}
.code-box-copy pre[class*="language-"]{border:1px solid #ddd;border-radius:2px}
.code-box-copy__btn{opacity:0;position:absolute;top:11px;right:11px;width:30px;height:30px;background-color:#f5f5f5;border:1px solid #ccc;color:#333;border-radius:4px;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out}
.code-box-copy__btn::before{display:inline-block;content:'';vertical-align:middle;width:16px;height:16px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAqFBMVEUAAAAAAABVVVUzMzMvLy83NzcxMTE1NTUwMDA0NDQyMjIyMjI0NDQzMzMyMjIyMjI0NDQzMzMzMzMzMzMyMjIzMzMzMzMzMzMzMzMzMzMyMjI0NDQ0NDQ0NDQ0NDQzMzMyMjIzMzMyMjIyMjIyMjIzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzP///9DIGoyAAAANnRSTlMAAgMFGxwfIiUnM0hJUFFbXm53eISHiI2RkpOZnqOoqrG1trvAzdTX2tvf4OLn6uzt7/H6/P712vOKAAAAAWJLR0Q3MLi4RwAAAJNJREFUGNNlzusOgjAMBeDibRPnBcWhTp3OK3gH6fs/mg00YYnnT7MvTXcAAIL5GxFfEjjBujwKIW6K3217jh3NlKG1SbtRBYulMWYCSbma7vYEGR60NgXkzlpL2/HzEgFIBKyPJ4++82H2CcGH3peK4KiBQUZFOtCAunIpgmJLvzsPxppiPaii/uAe1hkyyBw5px8y3hFi8qzDHwAAAABJRU5ErkJggg==) no-repeat 0 0}
.code-box-copy:hover .code-box-copy__btn{opacity:1}
.code-box-copy__btn:disabled{background-color:#eee;border-color:#ccc;color:#333;pointer-events:none}
.code-box-copy__btn:hover{cursor:pointer;background-color:#fff;border:1px solid #ccc;color:#333}
.code-box-copy__btn:focus,.code-box-copy__btn:active{outline:0}
.code-box-copy__tooltip{display:none;position:absolute;bottom:-webkit-calc(100% + 11px);bottom:calc(100% + 11px);right:0;width:80px;padding:6px 0;background-color:#333;color:#fff;text-align:center;border-radius:2px;font-size:13px}
.code-box-copy__tooltip::after{display:block;position:absolute;right:13px;bottom:-5px;content:' ';width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#333 transparent transparent transparent}
.code-box-copy pre::-webkit-scrollbar{height:5px;width:5px}
.code-box-copy pre::-webkit-scrollbar-thumb{background:#a1a1a1;border-radius:100px}
.code-box-copy pre::-webkit-scrollbar-thumb:active{background:#444}

Cuối cùng đặt đoạn code sau trước thẻ đóng </body>

<script type='text/javascript'>//<![CDATA[
!function($,undefined){function Plugin(element,options){this.element=element,this.options=$.extend({},defaults,options),this._defaults=defaults,this._name=pluginName,this.init()}var pluginName="codeBoxCopy",defaults={tooltipText:"Copied",tooltipShowTime:1e3,tooltipFadeInTime:300,tooltipFadeOutTime:300};Plugin.prototype={init:function(){var $btn,$tooltip,btn,tooltip,opts,clipboard;btn=this.element.querySelector(".code-box-copy__btn"),btn&&(opts=this.options,clipboard=new Clipboard(btn),clipboard.on("success",function(e){$btn=$(e.trigger),$btn.prop("disabled",!0),tooltip='<span class="code-box-copy__tooltip">',tooltip+=opts.tooltipText,tooltip+="</span>",$(tooltip).prependTo($btn),$tooltip=$btn.find(".code-box-copy__tooltip"),$tooltip.fadeIn(opts.tooltipFadeInTime),setTimeout(function(){$tooltip.fadeOut(opts.tooltipFadeOutTime,function(){$tooltip.remove()}),$btn.prop("disabled",!1)},opts.tooltipShowTime)}))}},$.fn[pluginName]=function(options){return this.each(function(){$.data(this,"plugin_"+pluginName)||$.data(this,"plugin_"+pluginName,new Plugin(this,options))})}}(jQuery),$(".code-box-copy").codeBoxCopy({tooltipText:"Copied",tooltipShowTime:1e3,tooltipFadeInTime:300,tooltipFadeOutTime:300});
//]]></script>

Khi viết bài muốn tại khung chứa code bạn chuyển sang chế độ HTML và dán đoạn sau

<div class="code-box-copy">
    <button class="code-box-copy__btn" data-clipboard-target="#example" title="Copy"></button>
    <pre><code class="language-xxxx" id="example">
      <!-- Đặt code ở đây -->
    </code></pre>
</div>

Trong đó bạn cần thay đổi những thứ sau

• class="language-xxxx": thay xxxx thành ngôn ngữ bạn muốn hiển thị (html,css,js,...) lấy list ngôn ngữ tại đây, prism hỗ trợ rất nhiều ngôn ngữ 
• data-clipboard-target="#example" và id="example" : 2 thằng này phải trùng nhau để copy đúng nội dung. Trong trường hợp 1 bài viết cần nhiều khung code bạn thay thành id khác ví dụ data-clipboard-target="#example1" và id="example1"

Ngoài ra bạn có thể tích hợp thêm các plugin mà prism cung cấp, tuy nhiên nên hạn chế vì nhiều sẽ làm giảm tốc độ tải trang của bạn

Cập nhật: Từ phiên bản 2.0.0 bạn cần thay phần new Clipboard("...") thành new ClipboardJS("...") để gọi đúng hàm nhé

Kết luận

Với form chứa code có nút copy chuyên nghiệp này, chắc chắn bạn đã ghi được điểm kha khá với người xem, cách tích hợp đơn giản, không quá nặng hi vọng nó sẽ sớm được hiện diện trên trang web của bạn

Chúc thành công !