Code Highlight Select

Go down

Code Highlight Select

Post by Wecoc on March 16th 2018, 5:41 pm

This javascript uses the same pretty-print used in this forum, but with an extra feature: You can set the type of code manually.

Example:

Installation and configuration


Insert this script in your forum. Placement: In all pages.

Code:
/*
* -- Code Highlight Select --
* Version: 1.0 EN (2018-03-15)
* Author: Wecoc
* Description: New BBCode to insert codes by lang
* Info: https://github.com/google/code-prettify
*/

$(function() {
 
  /*--------------------- CONFIGURATION ---------------------*/
 
  // Define your version.
  // 0: phpBB2, 1: phpBB3, 2: punBB, 3: Invision, 4: modernBB
  var version = 1,
 
  // Set the skin for your printed code, these are the available skins:
  //       default, desert, sunburst, sons-of-obsidian, doxy
  // Or you can make your custom skin using CSS.
  // For more info: https://rawgit.com/google/code-prettify/master/styles/index.html
 
  skin = "default",
 
  // Display line numbers
  linenums = true,
 
  // Display all line numbers, or only 5, 10, 15...
  linenums_all = true,
 
  // Set here the texts to be displayed
  lang = {
    code:    "Code",
    line:    "Start line (optional)",
    insert:    "insert",
    tooltip:    "Pretty Code"
  },
 
  /* Here you define the languages you want to be selected in your forum,
  I setted all by default, just delete the ones you don't need.
  The first column is the hljs value (please don't change), the second is the
  name it will be displayed in the forum (you can change it if you want) */
  languages = {
    "apollo":   "Apollo",
    "bsh":    "Bash",
    "basic":   "Basic",
    "c":    "C",
    "cc":    "CC",
    "clj":   "Clojure",
    "cpp":    "CPP",
    "cs":    "CS",
    "csh":   "CSH",
    "css":    "CSS",
    "cv":   "CV",
    "cyc":   "CYC",
    "dart":   "Dart",
    "erlang":   "Erlang",
    "go":   "Go",
    "hs":   "Haskell",
    "htm":   "HTM",
    "html":   "HTML",
    "java":   "Java",
    "js":   "JavaScript",
    "tex":   "LaTeX",
    "lasso":   "Lasso",
    "llvm":   "LLVM",
    "logtalk":   "Logtalk",
    "lua":   "Lua",
    "m":   "Makefile",
    "matlab":   "MATLAB",
    "mumps":   "Mumps",
    "mxml":   "MXML",
    "n":   "Nemerle",
    "pascal":   "Pascal",
    "perl":   "Perl",
    "pl":   "PL",
    "pm":   "PM",
    "py":   "Python",
    "r":   "R",
    "rd":   "RD",
    "rb":   "Ruby",
    "rust":   "Rust",
    "scala":   "Scala",
    "lisp":   "Scheme",
    "sh":   "SH",
    "ml":   "SML",
    "sql":   "SQL",
    "swift":   "Swift",
    "tcl":   "TCL",
    "vb":   "Visual Basic",
    "vhdl":   "VHDL",
    "wiki":   "Wiki",
    "xhtml":   "XHTML",
    "xml":   "XML",
    "xq":   "XQ",
    "xsl":   "XSL",
    "yaml":   "YAML"
  };
 
  /*------------------ END OF CONFIGURATION ------------------*/
 
  // Load the Prettify script
  if (skin == "default" || skin == "") {
    $.getScript("https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js");
  } else {
    $.getScript("https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=" + skin);
  }
 
  // Draw code lines
  if (linenums && linenums_all) {
    $('head').append('<style type="text/css">li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8,li.L9{list-style-type: decimal !important;}');
  }
 
  $.each(languages, function(tag, value) {
    var code_tag = 'code';
    if (version == 0) { code_tag = '.cont_code' };
    $('table.code-' + tag + ' ' + code_tag).each(function(i, block) {
      // Set starting line
      var l = '1';
      var td = $(block).parents('td').attr('id');
      if (td) { l = td.match(/line--(\d*)/)[1]; }
      // Print the code
      $(block).wrapInner('<pre class="prettyprint ' + (linenums ? 'linenums:' + l + ' ' : '') + 'lang-' + tag + '" />');
      // Set table width to 100% of the post (bugfix)
      $('head').append('<style type="text/css">table.code-' + tag + '{width: 100%;}');
      if (version == 0) { $('head').append('<style type="text/css">dl.codebox{width: 100%;}'); }
      // Set the code padding to 0 (bugfix)
      $('head').append('<style type="text/css">pre.prettyprint{ margin: 0; }');
      // Change "Code:" by the name of the current code language
      var dt = $(block).parents('dl.codebox')[0].firstChild;
      if (version == 0) {
        dt.innerHTML = '<dt><span class="genmed"><b>' + value + ':</b></span></dt>'
      } else {
        dt.innerHTML = value + ':';
      }
    });
  });
 
  // Set new BBCode icon
  if (!$.sceditor) return;
  $('head').append($('<style>', {
      text: '.sceditor-button-codepretty div{background-image:url(https://i62.servimg.com/u/f62/19/86/96/38/code_i10.png)!important}'
  }));
 
  $.sceditor.command.set('codepretty', {
    dropDown : function(editor, caller, callback) {
      // Create code select
      var a = document.createElement('DIV'), b = document.createElement('SELECT');
      a.innerHTML = '<label unselectable="on">' + lang.code + '</label>';
      for (var i in languages) {
        var o = document.createElement('OPTION');
        o.value = i;
        o.innerHTML = languages[i];
        b.append(o);
      }
      b.style.width = "100%";
      b.style.marginBottom = "8px";
      a.append(b);
      editor.createDropDown(caller, 'codepretty', a);
      // Create line number input
      var c = document.createElement('DIV');
      if (linenums) {
        c.innerHTML = '<label unselectable="on">' + lang.line + '</label>';
        var i = document.createElement('INPUT');
        i.type = "text";
        i.defaultValue = "1";
        c.append(i);
      }
      a.append(c);
      // Create insert button
      var d = document.createElement('DIV');
      d.innerHTML = '<input type="button" class="button" value="' + lang.insert + '">';
      d.onclick = function() {
        var code = $(b)[0].value, line = '1';
        if (linenums) { line = $(i)[0].value; if (line == '' || line < 1) { line = '1' }; }
        callback(code, line);
        editor.closeDropDown(true);
        return false;
      };
      a.append(d);
    },
    // wysiwyg
    exec : function(caller) {
      var editor = this;
      $.sceditor.command.get('codepretty').dropDown(editor, caller, function(code, line) {
        if (parseInt(line) > 1) {
          editor.insert('[table class="code-' + code + '"][tr][td id="line--' + line + '"][code]',
                        '[/code][/td][/tr][/table]', true, true, true);
        } else {
          editor.insert('[table class="code-' + code + '"][tr][td][code]',
                        '[/code][/td][/tr][/table]', true, true, true);
        }
      });
    },
 
    // source
    txtExec : function(caller) {
      var editor = this;
      $.sceditor.command.get('codepretty').dropDown(editor, caller, function(code, line) {
        if (parseInt(line) > 1) {
          editor.insert('[table class="code-' + code + '"][tr][td id="line--' + line + '"][code]',
                        '[/code][/td][/tr][/table]', true, true, true);
        } else {
          editor.insert('[table class="code-' + code + '"][tr][td][code]',
                        '[/code][/td][/tr][/table]', true, true, true);
        }
      });
    },
    tooltip : lang.tooltip;
  });
  toolbar = toolbar.replace(/code,/,'code,codepretty,'); // add the button to the toolbar
});

In the start of the code you can configurate all this:

  • Set the version of the forum you are using (it's not really important in this case except if you are using phpBB2, which needs some special bugfixes)
  • Change the skin, you can set one of the predefined (see here) or use the default and change via CSS every part to make your own skin
  • Display the line numbers
  • Texts displayed in the SCEditor dropdown
  • Complete list of available code languages. Just delete the ones you don't need in your forum. You can also change their display name in the second column.


CSS customization


Title and codebox:
Change the title color or codebox format based on the code.

You can change properties using
Code:
table.code-(lang)
to set format of the codebox for a particular lang, change (lang) for its key word (first column in the languages list).

Example:

Code:
table.code-css dt {
  background-color: #bc3934;
  color: #fff;
}

With little configuration you can get something like this (based on the current theme of this forum):

Remove the default extra border:
The pretty-printed code is displayed with an extra gray border which is very easy to remove

Code:
pre.prettyprint {
  border: none;
  padding: 0;
}

Change the code font-family or size:
I recommend using the same as in the default code tag

Code:
pre.prettyprint {
  font-family: Courier,Courier New,sans-serif;
  font-size: 1.0em;
}

Set your own code skin:
You can use this as a reference for every span name (str, com, typ...) to change the color of every code part manually:
https://github.com/google/code-prettify/blob/master/src/prettify.css

You can also make your custom modifications, for example with this you can set the color of the lines when they are hovered:
Code:
dl.codebox li:hover { background-color: #fff6ab; }

Remove the default modernBB highlighting


The version modernBB has already integrated a different highlighting. You can just remove it to use the one in this code instead.

You have to go to the template viewtopic_body, search these 3 lines in the very end and delete them:

Code:
   $('pre, code').each(function(i, block) {
      hljs.highlightBlock(block);
   });

Just before that, you will see these. You should also delete them.

Code:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>

Hope you like it Smile
avatar
Wecoc
Forumember

Male Posts : 136
Reputation : 98
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum