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.

Code Highlight Select

2 posters

Go down

Code Highlight Select Empty Code Highlight Select

Post by Wecoc Fri 16 Mar 2018 - 17:41

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:

Remove the default extra border:

Change the code font-family or size:

Set your own code skin:

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
Wecoc
Wecoc
Forumember

Male Posts : 144
Reputation : 111
Language : Catalan, Spanish, English

TonnyKamper likes this post

Back to top Go down

Code Highlight Select Empty Re: Code Highlight Select

Post by Niko Sun 28 May 2023 - 19:57

AwesomeBB update

Update for AwesomeBB based on a user request in the support section:

Javascript
Code:
/*
* -- Code Highlight Select --
* Version: 1.1 EN (2023-05-27) - update by @Niko
* Author: Wecoc + Update AwesomeBB by Niko (https://help.forumotion.com/u71863)
* Description: New BBCode to insert codes by lang (with AwesomeBB integration)
* Info: https://github.com/google/code-prettify
*/
 
$(function() {
 
  /*--------------------- CONFIGURATION ---------------------*/
 
  // Define your version.
  // 0: phpBB2, 1: phpBB3, 2: punBB, 3: Invision, 4: modernBB, 5: awesomeBB
  var version = 5,
 
  // 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 = "sons-of-obsidian",
 
  // 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 = {
 
    "kotlin":  "Kotlin",
    "cpp":    "CPP",
    "css":    "CSS",
    "htm":  "HTM",
    "html":  "HTML",
    "java":  "Java",
    "js":  "JavaScript",
    "pascal":  "Pascal",
    "perl":  "Perl",
    "py":  "Python",
    "lisp":  "Scheme",
    "sql":  "SQL",
    "swift":  "Swift",
    "vb":  "Visual Basic",
    "xml":  "XML"
  };
 
  /*------------------ END OF CONFIGURATION ------------------*/
 
  // Load the Prettify script
  if (skin == "sons-of-obsidian" || 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) {
      console.log(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
      if(version == 5) {
        var dt = $(block).parents('div.codebox')[0].firstChild;
      } else {
        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://i.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
});

CSS (In addition to the previous CSS customization
This CSS code is needed to fully display the number of lines
Code:
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
    margin-left: inherit;
}
Niko
Niko
Helper
Helper

Male Posts : 3111
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

skouliki, YoshiGM and TonnyKamper like this post

Back to top Go down

Back to top

- Similar topics

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