Colorize the code tags Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

    Colorize the code tags

    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Tutorial Colorize the code tags

    Post by Ange Tuteur November 20th 2015, 1:24 pm

    Colorize the code tags


    This tutorial will help you with coloring the contents of the code tags just like in the following example :
    Colorize the code tags Hljs10


    Colorize the code tags 09615110 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.


    Colorize the code tags 09615110 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 ! Yes

    *You can preview the other themes here, and the corresponding CSS files via Github.