Merge pull request #30 from telerik/tabbedCode

feat: CodeSnippets from markdown only handled

_assets/js/code-snippet.js

@@ -1,3 +1,4 @@
+var hasDataLang = false;
 const selectedLanguageKey = "Selected_TabStrip_Language_Key";
 // Necessary for the offline docs.
 const localStorageMock = {
@@ -8,6 +9,38 @@ const localStorageMock = {
     }
 };
 
+function handleDataLangCodeSnippets() {
+    $("pre[data-lang]").each(function() {
+        if (this.parentNode.className.indexOf("k-content") >= 0) {
+            return;
+        }
+
+        var langs = $(this).nextUntil(":not(pre)", "pre").add(this);
+
+        var tabs = $.map(langs, function(item) {
+            var title = $(item).attr("data-lang").replace("tab-", "");
+            return $("<li>").text(title);
+        });
+
+        if (tabs.length < 2) {
+            return;
+        }
+
+        tabs[0].addClass("k-state-active");
+
+        var tabstrip = $("<div>")
+        .insertBefore(this)
+        .append($("<ul>").append(tabs))
+        .append(langs);
+
+        langs.wrap("<div>");
+
+        tabstrip.kendoTabStrip({ animation: false });
+
+        $(document).on("click", ".current-topic > div a", false);
+    });
+}
+
 $(function () {
     $("pre").addClass("prettyprint");
     
@@ -84,11 +117,15 @@ $(function () {
         'Objective-C' : 'm',
         'Java' : 'java'
     };
-    
-    $("pre").each(function (index) {
-        var langExtension = codeSampleMapper[$(this).attr('lang')];
-        $(this).addClass('lang-' + langExtension).addClass("prettyprint");
-    });
+
+    if (hasDataLang) {
+        handleDataLangCodeSnippets();
+    } else {
+        $("pre").each(function (index) {
+            var langExtension = codeSampleMapper[$(this).attr('lang')];
+            $(this).addClass('lang-' + langExtension).addClass("prettyprint");
+        });
+    }
 
     prettyPrint();
 

_layouts/default.html

@@ -80,6 +80,10 @@
       });
     </script>
 
+    <script>
+      hasDataLang = {% if site.code_lang == true %} true {% else %} false {% endif %};
+    </script>
+
 {% include nav.html %}
 
 <div id="content">

_plugins/auto_raw_for_api.rb

@@ -1,21 +0,0 @@
-require 'cgi'
-
-Jekyll::Hooks.register :pages, :pre_render do |page|
-  page.content.gsub!(/```([a-z\-]*)\s*\n(\s*)(.+?)\n\s*```/m) {
-    language = Regexp.last_match[1]
-    indent = Regexp.last_match[2].length
-    snippet = Regexp.last_match[3]
-
-    # trim leading indent of snippet within list
-    snippet.gsub!(/\n([ ]{#{indent}})/, "\n" + " " * (indent-1)) if indent > 1
-
-    previewClass = '';
-    previewClass = ' class="preview"' if language =~ /-preview/
-
-    "{% raw %}" +
-    "<pre#{previewClass}><code class=\"language-#{language}\">" +
-    "#{CGI.escapeHTML(snippet)}" +
-    "</code></pre>" +
-    "{% endraw %}"
-  }
-end

_plugins/markdown_processor.rb

@@ -2,6 +2,19 @@ module Jekyll
 
     require 'html/pipeline'
 
+    class LangFilter < HTML::Pipeline::Filter
+
+      def call
+          doc.css('pre[lang]').each do |node|
+              node['data-lang'] = node['lang']
+              node.remove_attribute('lang')
+          end
+
+          doc
+      end
+
+    end
+
     class HeaderLinkFilter < HTML::Pipeline::Filter
 
         PUNCTUATION_REGEXP = /[^\p{Word}\- ]/u
@@ -46,11 +59,11 @@ module Jekyll
         def initialize(config)
             @config = config
 
-            @pipeline = HTML::Pipeline.new [
-                HTML::Pipeline::MarkdownFilter,
-                HeaderLinkFilter
-            ]
-
+            if @config['code_lang']
+              @pipeline = HTML::Pipeline.new [ HTML::Pipeline::MarkdownFilter, LangFilter, HeaderLinkFilter ]
+            else 
+              @pipeline = HTML::Pipeline.new [ HTML::Pipeline::MarkdownFilter, HeaderLinkFilter ]
+            end
         end
 
         def convert(content)