Inkleuren codetags

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Tutorial Inkleuren codetags

Bericht van TonnyKamper op za 16 jun 2018 - 1:32

Inkleuren codetags

Deze tip geeft de procedure weer om de codetags in te kleuren zoals in het volgende voorbeeld:

Voor:


Na:


1. Samenstellen


Script maken


Beheerderspaneel    Modules  HTML & JavaScripts Javascript - codebeheer

Maak een nieuwe javascript-code die deze code bevat:

Titel: eigen keus
Plaatsing: op alle pagina's
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)})}})});

De CSS instellen


Beheerderspaneel  Display  Kleuren: Cascading Style Sheet tab
Voeg de volgende code toe aan uw CSS:
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;
}
Het script is nu functioneel.

2. personalisatie


U kunt een voorbeeld bekijken door hier te klikken op andere thema's waarvan de bijbehorende CSS-bestanden aanwezig zijn op deze pagina.

avatar

TonnyKamper
Hulp Moderator
Hulp Moderator

Vrouw Aantal berichten : 348
Geboortedatum : 23-10-54
Leeftijd : 64
Taal : Nederlands, Engels
Locatie : Nederland
Registratiedatum : 15-02-15
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://www.nederlandheelt.nl/ http://punt.forumactie.com
TonnyKamper is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum