Highlight code trong bài viết nukeviet

Thứ ba - 07/03/2017 00:55

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.

Highlight code trong bài viết nukeviet

- 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

</body>

đoạn code sau:

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

 

File đính kèm syntax-highlight.js.

- 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.

Tác giả bài viết: Việt Tí

Bạn có thích bài viết này không ? Hãy like bài viết này hoặc chia sẻ bài viết đến bạn bè. Mọi ý kiến đóng góp hay thắc mắc bạn có thể Liên hệ hoặc tham gia Bình luận bên dưới.

Chân thành cảm ơn !

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Mã bảo mật   

Những tin mới hơn

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây