#182654 gửi bởi quocviet2006
Ngày 07 Tháng 03 2017 , 01:16
Bài viết này sẽ hướng dẫn cách tạo highlighter cho những đoạn mã nguồn trong nội dung bài viết của nukeviet. Áp dụng cho nukeviet 4.x.

- Mở file style.css trong thư mục themes/tên_theme/css/, chèn vào bên dưới cùng đoạn css sau:

/* Syntax highlight */
.dp-highlighter{font-family:Consolas,"Courier New",Courier,mono,serif;font-size:12px;background-color:#E7E5DC;width:99%;max-height:350px;overflow:auto;margin:18px 0!important;padding-top:1px}
.dp-highlighter ol,.dp-highlighter ol li,.dp-highlighter ol li span{margin:0;padding:0;border:none}
.dp-highlighter a,.dp-highlighter a:hover{background:0 0;border:none;padding:0;margin:0}
.dp-highlighter .bar{padding-left:45px}
.dp-highlighter.collapsed .bar,.dp-highlighter.nogutter .bar{padding-left:0}
.dp-highlighter ol{list-style:decimal;background-color:#fff;margin:0 0 1px 45px!important;padding:0;color:#5C5C5C}
.dp-highlighter.nogutter ol,.dp-highlighter.nogutter ol li{list-style:none!important;margin-left:0!important}
.dp-highlighter .columns div,.dp-highlighter ol li{list-style:decimal-leading-zero;list-style-position:outside!important;border-left:3px solid #003f7f;background-color:#F8F8F8;color:#5C5C5C;padding:0 3px 0 10px!important;margin:0!important;line-height:18px}
.dp-highlighter.nogutter .columns div,.dp-highlighter.nogutter ol li{border:0}
.dp-highlighter .columns{background-color:#F8F8F8;color:gray;overflow:hidden;width:100%}
.dp-highlighter .columns div{padding-bottom:5px}
.dp-highlighter ol li.alt{background-color:#FFF;color:inherit}
.dp-highlighter ol li span{color:#000;background-color:inherit}
.dp-highlighter.collapsed ol{margin:0}
.dp-highlighter.collapsed ol li{display:none}
.dp-highlighter.printing{border:none}
.dp-highlighter.printing .tools{display:none!important}
.dp-highlighter.printing li{display:list-item!important}
.dp-highlighter .tools{padding:3px 8px 10px 10px;font:9px Verdana,Geneva,Arial,Helvetica,sans-serif;color:silver;background-color:#f8f8f8;border-left:3px solid #003f7f}
.dp-highlighter.nogutter .tools{border-left:0}
.dp-highlighter.collapsed .tools{border-bottom:0}
.dp-highlighter .tools a{font-size:9px;color:#a0a0a0;background-color:inherit;text-decoration:none;margin-right:10px}
.dp-highlighter .tools a:hover{color:red;background-color:inherit;text-decoration:underline}
.dp-about{background-color:#fff;color:#333;margin:0;padding:0}
.dp-about table{width:100%;height:100%;font-size:11px;font-family:Tahoma,Verdana,Arial,sans-serif!important}
.dp-about td{padding:10px;vertical-align:top}
.dp-about .copy{border-bottom:1px solid #ACA899;height:95%}
.dp-about .title{color:red;background-color:inherit;font-weight:700}
.dp-about .para{margin:0 0 4px}
.dp-about .footer{background-color:#ECEADB;color:#333;border-top:1px solid #fff;text-align:right}
.dp-about .close{font-size:11px;font-family:Tahoma,Verdana,Arial,sans-serif!important;background-color:#ECEADB;color:#333;width:60px;height:22px}
.dp-highlighter .comment,.dp-highlighter .comments{color:#008200;background-color:inherit}
.dp-highlighter .string{color:#00f;background-color:inherit}
.dp-highlighter .keyword{color:#069;font-weight:700;background-color:inherit}
.dp-highlighter .preprocessor{color:gray;background-color:inherit}


- Tiếp tục mở file footer_only.tpl trong thư mục themes/tên_theme/layout/, chèn vào bên trên tag đoạn code sau:

<script src="/themes/forum/js/syntax-highlight.js"></script>

File đính kèm bạn vào đây để tải: syntax-highlight.

- Cuối cùng, để hiển thị được đoạn code cần highlight, cần chèn vào nội dung bài viết đoạn code sau:

<pre class="html" name="code">Nội dung code cần highlight</pre>

Chúc các bạn thành công.
Sửa lần cuối bởi quocviet2006 vào Ngày 12 Tháng 03 2017 , 21:49, với tổng số 4 lần sửa.

Việt Tí - Chia sẻ để thành công - http://quocviet.net