c++ and python tabs in documentation

.gitignore

@@ -16,9 +16,13 @@
 
 !*.sh
 
+!*.rb
+
 !*.md
 !*.xml
 !*.dox
+!*.css
+!*.js
 
 # ...even if they are in subdirectories
 !*/

doc/new/_config.yml

@@ -15,6 +15,6 @@ permalink: /:title
 highlighter: rouge
 # highlighter: coderay
 markdown: kramdown
-# gems: ['jekyll-paginate']
+# gems: ['TabsConverter']
 
 # exclude: ['README.md', 'LICENSE']

doc/new/_plugins/tabs.rb

+module Jekyll
+  class TabsConverter < Converter
+    safe true
+    priority :low
+    @@ctr = 0
+
+    def matches(ext)
+      ext =~ /^\.md$/i
+    end
+
+    def output_ext(ext)
+      ".html"
+    end
+
+    def convert(content)
+      @@ctr += 1
+      content.gsub('<p>__tabsInit</p>', "<input id=\"tab1\" type=\"radio\" checked><input id=\"tab2\" type=\"radio\">")
+             .gsub('<p>__tabsStart</p>', "<div id=\"tabs\"><label for=\"tab1\">C++</label><label for=\"tab2\">Python</label><div id=\"content\"><section id=\"content1\">")
+             .gsub('<p>__tabsMid</p>', "</section><section id=\"content2\">")
+             .gsub('<p>__tabsEnd</p>', "</section></div></div>")
+    end
+  end
+end
+

doc/new/css/tabs.css

+#tabs {
+    margin: 0 auto;
+    width: 100%;  /* Ancho del contenedor */
+}
+
+input {
+	height: 0;
+	visibility: hidden;
+	margin: 0;
+}
+
+#tabs label {
+	background: #f9f9f9;  /* Fondo de las pestañas */
+	border-radius: .25em .25em 0 0;
+	color: #888;  /* Color del texto de las pestañas */
+	cursor: pointer;
+	display: block;
+	float: left;
+	font-size: 1em;  /* Tamaño del texto de las pestañas */
+	height: 2.5em;
+	line-height: 2.5em;
+	margin-right: .25em;
+	padding: 0 1.5em;
+	margin-bottom: 0; 
+	text-align: center;
+}
+
+
+#tabs label:hover label:active {
+	background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
+	color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
+}
+
+input:checked + label {
+	position: relative;
+	z-index: 6;
+}
+
+#content {
+	display: flex;
+	flex-direction: column;
+	min-height: 2em;
+	background: #f1f1f1;  /* Fondo del contenido */
+	border-radius: 0 .25em .25em .25em;
+	padding: 0;
+	position: relative;
+	width: 100%;
+	z-index: 5;
+}
+
+#content section {
+	opacity: 0;
+	padding: 0.5em;
+	position: absolute;
+	z-index: -100;
+}
+
+#content #content1 {
+    position: relative;
+}
+
+input#tab1:checked ~ #tabs #content #content1,
+input#tab2:checked ~ #tabs #content #content2 {
+    opacity: 1;
+    z-index: 100;
+}
+
+input#tab1:checked ~ #tabs label[for=tab1] {
+	background: #f1f1f1;
+	color: #444;    
+}
+
+input#tab2:checked ~ #tabs label[for=tab2] {
+	background: #f1f1f1;
+	color: #444;    
+}