{"id":294,"date":"2014-06-02T10:25:03","date_gmt":"2014-06-02T10:25:03","guid":{"rendered":"http:\/\/localhost\/__sites\/3d_blog\/?p=294"},"modified":"2018-05-11T14:53:19","modified_gmt":"2018-05-11T14:53:19","slug":"do-a-smarter-enlighter-syntax-highlighter","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=294","title":{"rendered":"make a smarter Enlighter Syntax Highlighter"},"content":{"rendered":"<blockquote><p>Goal: to add some usefull functionality to the Enlighter plugin<\/p><\/blockquote>\n<p>In my blog I use the Enlighter plugin to colorize my code sections. The plugin is great, but have some defect.<br \/>\nMy extender\/customzier is the following:<\/p>\n<p>1. the code block height maximized to 140px and added to div style <\/p>\n<pre data-enlighter-language=\"css\" class=\"EnlighterJSRAW\">\r\n.enlighterEnlighterJS {\r\n  max-height: 140px;\r\n  box-shadow: 0px 0px 8px rgba(187, 187, 187, 0.5);  \r\n}\r\n.eshcbebs_wrapper{\r\n  position:relative;\r\n  top: 2px;\r\n}\r\n.eshcbebs_cont{\r\n  position: absolute;\r\n  color: #7d97bd;\r\n  top: -15px;\r\n  right: 4px;\r\n}\r\n.handy{\r\n  cursor: pointer; cursor: hand;\r\n}\r\n<\/pre>\n<p>2. I&#8217;ve added 2 controller to the code block (top right corner)<\/p>\n<ul>\n<li><em>plain text \/ row numbers<\/em> switcher<br \/>&#8230;be careful you can copy the plain code all time. Even if the row numbers are visible because of the technical solution you never will copy those to the clipboard!<\/li>\n<li><em>expand this \/ be smaller<\/em> switcher (visible only when the block is too long)<\/li>\n<\/ul>\n<p>Check the code provides these functions.<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n\/*\r\nEnlighter Syntax Highlighter Code Block Extender by SilverTerra \r\ndate: 2014.06.02.\r\nversion: 1.0.0\r\n*\/\r\n\r\nvar codeBlock = function(block){\r\n  this.build(block);\r\n  return this;\r\n};\r\n\r\n(function($){\r\n\r\n  codeBlock.prototype = {\r\n    blocks: null,\r\n    build: function(block){\r\n      this.blocks = block || $('ul.EnlighterJS');\r\n      this.blocks.each(function(){\r\n        var h1 = $(this)[0].scrollHeight,\r\n            h2 = $(this).height();  \r\n        \r\n        { \/\/ 0. inline blokk - don't touch\r\n        if(h1 == 0){ return false; }    \r\n        }\r\n        \r\n        { \/\/ 1. wrap the code view into a div\r\n        $(this).wrap('&lt;div class=&quot;eshcbebs_wrapper&quot;&gt;');\r\n        }\r\n        \r\n        { \/\/ 2. add the extenders\r\n        var rn = '', codeState = 0;\r\n        var myCodeBlock = $(this).parent();\r\n        \r\n        if(myCodeBlock.html().substr(0,3) == '&lt;ol'){\r\n          rn = 'plain text';\r\n          codeState = 1;\r\n        }\r\n        else{\r\n          rn = 'row numbers';\r\n          codeState = 0;\r\n        }\r\n        \r\n        var n = '&lt;div&gt;&lt;span class=&quot;codeBlockStyle handy&quot;&gt;' + rn + '&lt;\/span&gt;';\r\n        \r\n        \/\/ if the overflow is not too big, just increase the height of the block\r\n        if(h1 &gt; 0 &amp;&amp; h2 - h1 &gt; -60){\r\n          $(this).css('max-height',h1);\r\n        }\r\n        else if(h1 &gt; h2){\r\n          n += '&nbsp;|&nbsp;&lt;span class=&quot;codeBlockExpander handy&quot;&gt;expand this&lt;\/span&gt;';\r\n        }\r\n\r\n          var sw = $(n).addClass('eshcbebs_cont').insertBefore($(this));\r\n        \r\n          \/\/ code view height style changer\r\n          sw.find('.codeBlockExpander').on('click',  function(e){\r\n            \r\n              var next = $(this).parent().next(),\r\n                  h1 = next[0].scrollHeight,\r\n                  h2 = next.height();\r\n              \r\n              if($(this).data('opened') == 1){\r\n                next.css('max-height','');\r\n                $(this).removeData('opened');\r\n                $(this).html('expand this');          \r\n                return false;\r\n              }          \r\n              \r\n              if(h1 &gt; h2){ \/\/ scrolled\r\n                $(this).data('opened',1);\r\n                $(this).html('be smaller');\r\n                next.css('max-height',h1);\r\n              }\r\n            });        \r\n          \r\n          \/\/ code view style changer\r\n          sw.find('.codeBlockStyle').on('click', function(){\r\n            var t = $(this).parent().next()[0].outerHTML;\r\n            if(codeState == 1){ \/\/ plain -&gt; row numbered\r\n              codeState = 0;\r\n              $(this).html('row numbers');\r\n              t = t.replace('&lt;ol', '&lt;ul').replace('&lt;\/ol&gt;','&lt;\/ul&gt;');\r\n            }\r\n            else{                \/\/ row numbered -&gt; plain\r\n              codeState = 1;\r\n              $(this).html('plain text');\r\n              t = t.replace('&lt;ul', '&lt;ol').replace('&lt;\/ul&gt;','&lt;\/ol&gt;');\r\n            }\r\n            $(this).parent().next()[0].outerHTML = t;\r\n          });\r\n    \r\n        }\r\n        \r\n      });      \r\n    }\r\n  \r\n  };\r\n\r\n}(jQuery));\r\n\r\n\/\/ link to the syntax highlighter\r\nEnlighterJS.prototype.enlight_old = EnlighterJS.prototype.enlight\r\nEnlighterJS.prototype.enlight = function(x){\r\n  \/\/ call the original code\r\n  EnlighterJS.prototype.enlight_old.call(this,x);\r\n  \/\/ call my extender\r\n  if(this.isRendered){\r\n    var cd = new codeBlock(jQuery(this.container));\r\n  }\r\n}\r\n<\/pre>\n<p><strong>how it&#8217;s working<\/strong><br \/>\nAfter the page load the Enlighter processing the code blocks with <code data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">EnlighterJS.prototype.enlight();<\/code> function one by one.<br \/>\nI want to catch the point where one code block processing is done. Here is. Just override this function mentioned. Inside call the old one and after I can do my job.<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n...\r\nEnlighterJS.prototype.enlight_old = EnlighterJS.prototype.enlight \/\/ the old function\r\nEnlighterJS.prototype.enlight = function(x){ \/\/ override\r\n  EnlighterJS.prototype.enlight_old.call(this,x); \/\/ first call the original code\r\n  if(this.isRendered){\r\n    var cd = new codeBlock(jQuery(this.container)); \/\/ after call my extender\r\n  }\r\n}\r\n...\r\n<\/pre>\n<p>The extender mechanism is in the code. Wrap the code block and insert the controllers before of the block.<\/p>\n<p>to use this extension you need to do the followings:<\/p>\n<ul>\n<li>Enable jquery in your blog (check this: <a href=\"?p=38\" title=\"enable jquery in wordpress\">enable jquery in wordpress<\/a>)<\/li>\n<li>put the styles into your stylesheet file<\/li>\n<li>put the js code into your js code file or somewhere you want<\/li>\n<\/ul>\n<p>&#8230;and be happy today&#8230;<\/p>\n<blockquote><p>see also: <a href=\"https:\/\/wordpress.org\/plugins\/enlighter\/\" title=\"Enlighter - Customizable Syntax Highlighter\" target=\"_blank\">Enlighter &#8211; Customizable Syntax Highlighter<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Goal: to add some usefull functionality to the Enlighter plugin In my blog I use the Enlighter plugin to colorize my code sections. The plugin is great, but have some defect. My extender\/customzier is the following: 1. the code block height maximized to 140px and added to div style 2. I&#8217;ve added 2 controller to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-294","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=294"}],"version-history":[{"count":29,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/294\/revisions"}],"predecessor-version":[{"id":1072,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/294\/revisions\/1072"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}