Commit d387576c authored by Fuchsi*'s avatar Fuchsi*

c++ and python tabs in documentation

parent f11aa5e6
Pipeline #717 passed with stages
in 8 minutes and 5 seconds
......@@ -16,9 +16,13 @@
!*.sh
!*.rb
!*.md
!*.xml
!*.dox
!*.css
!*.js
# ...even if they are in subdirectories
!*/
......
......@@ -15,6 +15,6 @@ permalink: /:title
highlighter: rouge
# highlighter: coderay
markdown: kramdown
# gems: ['jekyll-paginate']
# gems: ['TabsConverter']
# exclude: ['README.md', 'LICENSE']
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
This diff is collapsed.
#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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment