Initial commit

Author: SamyPesse

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# Deployed apps should consider commenting this line out:
+# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
+node_modules
+
+# vim swapfile
+*.swp

README.md

@@ -0,0 +1,50 @@
+# codetabs
+
+Include multiple languages code block to your GitBook (for example when documenting an API).
+
+### Installation
+
+Adds the plugin to your `book.json`, then run `gitbook install` if you are building your book locally.
+
+```js
+{
+    "plugins": ["codetabs"]
+}
+```
+
+### Usage
+
+```md
+
+This is a code block with tabs for each languages:
+
+{% codetabs name="Python", type="py" -%}
+msg = "Hello World"
+print msg
+{%- language name="JavaScript", type="js" -%}
+var msg = "Hello World";
+console.log(msg);
+{%- language name="HTML", type="html" -%}
+<b>Hello World</b>
+{%- endcodetabs %}
+```
+
+### Escaping templating syntax
+
+For languages using syntax like `{{`, `{%`; we have to escape these content:
+
+
+```md
+Here is some angular and react code
+
+{% codetabs name="Python", type="py" -%}
+    {% raw %}
+    <h1>Hello {{yourName}}!</h1>
+    {% endraw %}
+{%- language name="React", type="js" -%}
+var React = require('react')
+{%- endcodetabs %}
+```
+
+
+

assets/codetabs.css

@@ -0,0 +1,24 @@
+.codetabs {
+
+}
+
+.codetabs .codetabs-header .tab {
+    display: inline-block;
+    padding: 3px 6px;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+}
+
+.codetabs .codetabs-header .tab.active {
+    border-bottom-color: #428bca;
+    cursor: default;
+}
+
+.codetabs .codetabs-body .tab {
+    display: none;
+}
+
+.codetabs .codetabs-body .tab.active {
+    display: block;
+}
+

assets/codetabs.js

@@ -0,0 +1,12 @@
+require([
+    'jquery'
+], function($) {
+    $(document).on('click.plugin.codetabs', '.codetabs .codetabs-header .tab', function(e) {
+        var $btn = $(e.target);
+        var $tabs = $btn.parents('.codetabs');
+        var tabId = $btn.data('codetab');
+
+        $tabs.find('.tab').removeClass('active');
+        $tabs.find('.tab[data-codetab="' + tabId + '"]').addClass('active');
+    });
+});

index.js

@@ -0,0 +1,66 @@
+var escape = require('escape-html');
+
+/*
+    Generate HTML for the tab in the header
+
+    @param {Block}
+    @param {Boolean}
+    @return {String}
+*/
+function createTab(block, i, isActive) {
+    return '<div class="tab' + (isActive? ' active' : '') + '" data-codetab="' + i + '">' + block.kwargs.name + '</div>';
+}
+
+/*
+    Generate HTML for the tab's content
+
+    @param {Block}
+    @param {Boolean}
+    @return {String}
+*/
+function createTabBody(block, i, isActive) {
+    return '<div class="tab' + (isActive? ' active' : '') + '" data-codetab="' + i + '"><pre><code class="lang-' + (block.kwargs.type || block.kwargs.name) + '">'
+        + escape(block.body) +
+    '</code></pre></div>';
+}
+
+module.exports = {
+    book: {
+        assets: './assets',
+        css: [
+            'codetabs.css'
+        ],
+        js: [
+            'codetabs.js'
+        ]
+    },
+
+    blocks: {
+        codetabs: {
+            blocks: ['language'],
+            process: function(parentBlock) {
+                console.log(JSON.stringify(parentBlock, null, 4));
+                var blocks = [parentBlock].concat(parentBlock.blocks);
+                var tabsContent = '';
+                var tabsHeader = '';
+
+                blocks.forEach(function(block, i) {
+                    var isActive = (i == 0);
+
+                    if (!block.kwargs.name) {
+                        throw new Error('Code tab requires a "name" property');
+                    }
+
+                    tabsHeader += createTab(block, i, isActive);
+                    tabsContent += createTabBody(block, i, isActive);
+                });
+
+
+                return '<div class="codetabs">' +
+                    '<div class="codetabs-header">' + tabsHeader + '</div>' +
+                    '<div class="codetabs-body">' + tabsContent + '</div>' +
+                '</div>';
+            }
+        }
+    }
+};

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "gitbook-plugin-codetabs",
+  "version": "0.0.0",
+  "description": "Multiple languages code blocks for GitBook",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GitbookIO/plugin-codetabs.git"
+  },
+  "keywords": [
+    "gitbook",
+    "code"
+  ],
+  "engines": {
+    "gitbook": ">=3.0.0-pre.8"
+  },
+  "author": "Samy Pesse <[email protected]>",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/GitbookIO/plugin-codetabs/issues"
+  },
+  "homepage": "https://github.com/GitbookIO/plugin-codetabs#readme",
+  "dependencies": {
+    "escape-html": "^1.0.3"
+  }
+}