This tutorial will help you with coloring the contents of the code tags just like in the following example :
1. Installing the JavaScript Firstly, you must create a new script by going to Modules > JavaScript codes management. Make sure JS codes management is enabled and then create a new script with the following settings.
Title : Code syntax highlighter Placement : In the topics
- Code:
$(function(){var a=$("dl.codebox dd").find("code, div.cont_code");0!=a.length&&$.ajax({url:"http://yandex.st/highlightjs/8.0/highlight.min.js",cache:!0,dataType:"script",success:function(){hljs.configure({useBR:!0});a.each(function(a,b){hljs.highlightBlock(b)})}})});
Save the script when you're finished.
2. Installing the CSS Lastly, you need to add a bit of CSS to your stylesheet to color the formatted code. Go to Display > Colors > CSS stylesheet and paste the following CSS rules* :
- Code:
.hljs { display: inline-block; padding: 0.5em; color: #333; background: #f8f8f8; } .hljs-comment, .hljs-template_comment, .diff .hljs-header, .hljs-javadoc { color: #998; font-style: italic; } .hljs-keyword, .css .rule .hljs-keyword, .hljs-winutils, .javascript .hljs-title, .nginx .hljs-title, .hljs-subst, .hljs-request, .hljs-status { color: #333; font-weight: bold; } .hljs-number, .hljs-hexcolor, .ruby .hljs-constant { color: #099; } .hljs-string, .hljs-tag .hljs-value, .hljs-phpdoc, .tex .hljs-formula { color: #d14; } .hljs-title, .hljs-id, .coffeescript .hljs-params, .scss .hljs-preprocessor { color: #900; font-weight: bold; } .javascript .hljs-title, .lisp .hljs-title, .clojure .hljs-title, .hljs-subst { font-weight: normal; } .hljs-class .hljs-title, .haskell .hljs-type, .vhdl .hljs-literal, .tex .hljs-command { color: #458; font-weight: bold; } .hljs-tag, .hljs-tag .hljs-title, .hljs-rules .hljs-property, .django .hljs-tag .hljs-keyword { color: #000080; font-weight: normal; } .hljs-attribute, .hljs-variable, .lisp .hljs-body { color: #008080; } .hljs-regexp { color: #009926; } .hljs-symbol, .ruby .hljs-symbol .hljs-string, .lisp .hljs-keyword, .tex .hljs-special, .hljs-prompt { color: #990073; } .hljs-built_in, .lisp .hljs-title, .clojure .hljs-built_in { color: #0086b3; } .hljs-preprocessor, .hljs-pragma, .hljs-pi, .hljs-doctype, .hljs-shebang, .hljs-cdata { color: #999; font-weight: bold; } .hljs-deletion { background: #fdd; } .hljs-addition { background: #dfd; } .diff .hljs-change { background: #0086b3; } .hljs-chunk { color: #aaa; }
Click submit when you're done, and it is now installed !
*You can preview the other themes here, and the corresponding CSS files via Github.
|