jekyll-commonmark-codetabs 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: ac955fb3de2835e32158962399f8220cf747f8a11701f541b51ff4f91de9d0e9
+  data.tar.gz: 7f25257ee0b692bbd7d093df05192bb284f5eab6e92a17c27ed0ecd6151ff580
+SHA512:
+  metadata.gz: 72fc96cec24ac005b984fef49dad859a12b176a2b76e963a4ce545b36bfca324bd78aa85a0927ebd07a0e5487b8f151606763dde5b36c39bd443b330f57118dc
+  data.tar.gz: 9c22d0fc0436cce1591fb0016b82b6a31505fc475278b78817562b131c0d8e9e1b7d8225b5ecd27d194f07e7ed480ba0940006d682253059d4eb49abbefce934

data/assets/codeblock.css

@@ -0,0 +1,841 @@
+html,
+html[data-code-block-theme="light"] {
+  --code-block-background-color: #F9F9F9;
+  --code-block-default-text-color: #555;
+  --code-block-action-button-color: #666666;
+  --code-block-bp-color: #366;
+  --code-block-c-color: #999;
+  --code-block-c1-color: #999;
+  --code-block-cd-color: #555;
+  --code-block-ch-color: #555;
+  --code-block-cm-color: #09f;
+  --code-block-cp-color: #099;
+  --code-block-cpf-color: #555;
+  --code-block-cs-color: #999;
+  --code-block-dl-color: #555;
+  --code-block-err-color: #a00;
+  --code-block-err-background-color: #faa;
+  --code-block-gd-color: #555;
+  --code-block-gd-background-color: #fcc;
+  --code-block-gh-color: #030;
+  --code-block-gi-color: #555;
+  --code-block-gi-background-color: #cfc;
+  --code-block-gi-border-color: #0c0;
+  --code-block-go-color: #aaa;
+  --code-block-gp-color: #009;
+  --code-block-gr-color: #f00;
+  --code-block-gt-color: #9c6;
+  --code-block-gu-color: #030;
+  --code-block-il-color: #f60;
+  --code-block-k-color: #069;
+  --code-block-kc-color: #069;
+  --code-block-kd-color: #069;
+  --code-block-kn-color: #069;
+  --code-block-kp-color: #069;
+  --code-block-kr-color: #069;
+  --code-block-kt-color: #078;
+  --code-block-m-color: #f60;
+  --code-block-mb-color: #f60;
+  --code-block-mf-color: #f60;
+  --code-block-mh-color: #f60;
+  --code-block-mi-color: #f60;
+  --code-block-mo-color: #f60;
+  --code-block-mx-color: #f60;
+  --code-block-na-color: #4f9fcf;
+  --code-block-nb-color: #366;
+  --code-block-nc-color: #0a8;
+  --code-block-nd-color: #99f;
+  --code-block-ne-color: #c00;
+  --code-block-nf-color: #c0f;
+  --code-block-ni-color: #999;
+  --code-block-nl-color: #99f;
+  --code-block-nn-color: #0cf;
+  --code-block-no-color: #360;
+  --code-block-nt-color: #2f6f9f;
+  --code-block-nv-color: #033;
+  --code-block-o-color: #555;
+  --code-block-ow-color: #000;
+  --code-block-p-color: #555;
+  --code-block-pi-color: #555;
+  --code-block-s-color: #d44950;
+  --code-block-s1-color: #c30;
+  --code-block-s2-color: #c30;
+  --code-block-sa-color: #555;
+  --code-block-sb-color: #c30;
+  --code-block-sc-color: #c30;
+  --code-block-sd-color: #c30;
+  --code-block-se-color: #c30;
+  --code-block-sh-color: #c30;
+  --code-block-si-color: #a00;
+  --code-block-sr-color: #3aa;
+  --code-block-ss-color: #fc3;
+  --code-block-sx-color: #c30;
+  --code-block-vc-color: #033;
+  --code-block-vg-color: #033;
+  --code-block-vi-color: #033;
+  --code-block-w-color: #bbb;
+}
+
+html[data-code-block-theme="dark"] {
+  --code-block-background-color: #272822;
+  --code-block-default-text-color: #f8f8f2;
+  --code-block-action-button-color: #a8a8a8;
+  --code-block-bp-color: #f8f8f2;
+  --code-block-c-color: #75715e;
+  --code-block-c1-color: #75715e;
+  --code-block-cd-color: #75715e;
+  --code-block-ch-color: #75715e;
+  --code-block-cm-color: #75715e;
+  --code-block-cp-color: #f4bf75;
+  --code-block-cpf-color: #75715e;
+  --code-block-cs-color: #75715e;
+  --code-block-dl-color: #a6e22e;
+  --code-block-err-color: #272822;
+  --code-block-err-background-color: #f92672;
+  --code-block-gd-color: #f92672;
+  --code-block-gd-background-color: transparent;
+  --code-block-gh-background-color: #272822;
+  --code-block-gh-color: #66d9ef;
+  --code-block-gh-font-weight: bold;
+  --code-block-gi-color: #a6e22e;
+  --code-block-gi-background-color: transparent;
+  --code-block-gi-border-color: transparent;
+  --code-block-go-color: #f8f8f2;
+  --code-block-gp-color: #f8f8f2;
+  --code-block-gr-color: #f8f8f2;
+  --code-block-gt-color: #f8f8f2;
+  --code-block-gu-color: #f8f8f2;
+  --code-block-il-color: #a6e22e;
+  --code-block-k-color: #ae81ff;
+  --code-block-kc-color: #fd971f;
+  --code-block-kd-color: #fd971f;
+  --code-block-kn-color: #ae81ff;
+  --code-block-kp-color: #ae81ff;
+  --code-block-kr-color: #ae81ff;
+  --code-block-kt-color: #fd971f;
+  --code-block-kv-color: #ae81ff;
+  --code-block-m-color: #a6e22e;
+  --code-block-mb-color: #a6e22e;
+  --code-block-mf-color: #a6e22e;
+  --code-block-mh-color: #a6e22e;
+  --code-block-mi-color: #a6e22e;
+  --code-block-mo-color: #a6e22e;
+  --code-block-mx-color: #a6e22e;
+  --code-block-na-color: #66d9ef;
+  --code-block-nb-color: #f8f8f2;
+  --code-block-nc-color: #f4bf75;
+  --code-block-nd-color: #f8f8f2;
+  --code-block-ne-color: #f8f8f2;
+  --code-block-nf-color: #f8f8f2;
+  --code-block-ni-color: #f8f8f2;
+  --code-block-nl-color: #f8f8f2;
+  --code-block-nn-color: #f4bf75;
+  --code-block-no-color: #f4bf75;
+  --code-block-nt-color: #f4bf75;
+  --code-block-nv-color: #f8f8f2;
+  --code-block-o-color: #f8f8f2;
+  --code-block-ow-color: #f8f8f2;
+  --code-block-p-color: #f8f8f2;
+  --code-block-pi-color: #f8f8f2;
+  --code-block-s-color: #a6e22e;
+  --code-block-s1-color: #a6e22e;
+  --code-block-s2-color: #a6e22e;
+  --code-block-sa-color: #ae81ff;
+  --code-block-sb-color: #a6e22e;
+  --code-block-sc-color: #a6e22e;
+  --code-block-sd-color: #a6e22e;
+  --code-block-se-color: #cc6633;
+  --code-block-sh-color: #a6e22e;
+  --code-block-si-color: #cc6633;
+  --code-block-sr-color: #a1efe4;
+  --code-block-ss-color: #a6e22e;
+  --code-block-sx-color: #a6e22e;
+  --code-block-vc-color: #f8f8f2;
+  --code-block-vg-color: #f8f8f2;
+  --code-block-vi-color: #f8f8f2;
+  --code-block-w-color: #f8f8f2;
+}
+
+@media (prefers-color-scheme: dark) {
+  html,
+  html[data-code-block-theme="dark"] {
+    --code-block-background-color: #272822;
+    --code-block-default-text-color: #f8f8f2;
+    --code-block-action-button-color: #a8a8a8;
+    --code-block-bp-color: #f8f8f2;
+    --code-block-c-color: #75715e;
+    --code-block-c1-color: #75715e;
+    --code-block-cd-color: #75715e;
+    --code-block-ch-color: #75715e;
+    --code-block-cm-color: #75715e;
+    --code-block-cp-color: #f4bf75;
+    --code-block-cpf-color: #75715e;
+    --code-block-cs-color: #75715e;
+    --code-block-dl-color: #a6e22e;
+    --code-block-err-color: #272822;
+    --code-block-err-background-color: #f92672;
+    --code-block-gd-color: #f92672;
+    --code-block-gd-background-color: transparent;
+    --code-block-gh-background-color: #272822;
+    --code-block-gh-color: #66d9ef;
+    --code-block-gh-font-weight: bold;
+    --code-block-gi-color: #a6e22e;
+    --code-block-gi-background-color: transparent;
+    --code-block-gi-border-color: transparent;
+    --code-block-go-color: #f8f8f2;
+    --code-block-gp-color: #f8f8f2;
+    --code-block-gr-color: #f8f8f2;
+    --code-block-gt-color: #f8f8f2;
+    --code-block-gu-color: #f8f8f2;
+    --code-block-il-color: #a6e22e;
+    --code-block-k-color: #ae81ff;
+    --code-block-kc-color: #fd971f;
+    --code-block-kd-color: #fd971f;
+    --code-block-kn-color: #ae81ff;
+    --code-block-kp-color: #ae81ff;
+    --code-block-kr-color: #ae81ff;
+    --code-block-kt-color: #fd971f;
+    --code-block-kv-color: #ae81ff;
+    --code-block-m-color: #a6e22e;
+    --code-block-mb-color: #a6e22e;
+    --code-block-mf-color: #a6e22e;
+    --code-block-mh-color: #a6e22e;
+    --code-block-mi-color: #a6e22e;
+    --code-block-mo-color: #a6e22e;
+    --code-block-mx-color: #a6e22e;
+    --code-block-na-color: #66d9ef;
+    --code-block-nb-color: #f8f8f2;
+    --code-block-nc-color: #f4bf75;
+    --code-block-nd-color: #f8f8f2;
+    --code-block-ne-color: #f8f8f2;
+    --code-block-nf-color: #f8f8f2;
+    --code-block-ni-color: #f8f8f2;
+    --code-block-nl-color: #f8f8f2;
+    --code-block-nn-color: #f4bf75;
+    --code-block-no-color: #f4bf75;
+    --code-block-nt-color: #f4bf75;
+    --code-block-nv-color: #f8f8f2;
+    --code-block-o-color: #f8f8f2;
+    --code-block-ow-color: #f8f8f2;
+    --code-block-p-color: #f8f8f2;
+    --code-block-pi-color: #f8f8f2;
+    --code-block-s-color: #a6e22e;
+    --code-block-s1-color: #a6e22e;
+    --code-block-s2-color: #a6e22e;
+    --code-block-sa-color: #ae81ff;
+    --code-block-sb-color: #a6e22e;
+    --code-block-sc-color: #a6e22e;
+    --code-block-sd-color: #a6e22e;
+    --code-block-se-color: #cc6633;
+    --code-block-sh-color: #a6e22e;
+    --code-block-si-color: #cc6633;
+    --code-block-sr-color: #a1efe4;
+    --code-block-ss-color: #a6e22e;
+    --code-block-sx-color: #a6e22e;
+    --code-block-vc-color: #f8f8f2;
+    --code-block-vg-color: #f8f8f2;
+    --code-block-vi-color: #f8f8f2;
+    --code-block-w-color: #f8f8f2;
+  }
+  html[data-code-block-theme="light"] {
+    --code-block-background-color: #F9F9F9;
+    --code-block-default-text-color: #555;
+    --code-block-action-button-color: #666666;
+    --code-block-bp-color: #366;
+    --code-block-c-color: #999;
+    --code-block-c1-color: #999;
+    --code-block-cd-color: #555;
+    --code-block-ch-color: #555;
+    --code-block-cm-color: #09f;
+    --code-block-cp-color: #099;
+    --code-block-cpf-color: #555;
+    --code-block-cs-color: #999;
+    --code-block-dl-color: #555;
+    --code-block-err-color: #a00;
+    --code-block-err-background-color: #faa;
+    --code-block-gd-color: #555;
+    --code-block-gd-background-color: #fcc;
+    --code-block-gh-color: #030;
+    --code-block-gi-color: #555;
+    --code-block-gi-background-color: #cfc;
+    --code-block-gi-border-color: #0c0;
+    --code-block-go-color: #aaa;
+    --code-block-gp-color: #009;
+    --code-block-gr-color: #f00;
+    --code-block-gt-color: #9c6;
+    --code-block-gu-color: #030;
+    --code-block-il-color: #f60;
+    --code-block-k-color: #069;
+    --code-block-kc-color: #069;
+    --code-block-kd-color: #069;
+    --code-block-kn-color: #069;
+    --code-block-kp-color: #069;
+    --code-block-kr-color: #069;
+    --code-block-kt-color: #078;
+    --code-block-m-color: #f60;
+    --code-block-mb-color: #f60;
+    --code-block-mf-color: #f60;
+    --code-block-mh-color: #f60;
+    --code-block-mi-color: #f60;
+    --code-block-mo-color: #f60;
+    --code-block-mx-color: #f60;
+    --code-block-na-color: #4f9fcf;
+    --code-block-nb-color: #366;
+    --code-block-nc-color: #0a8;
+    --code-block-nd-color: #99f;
+    --code-block-ne-color: #c00;
+    --code-block-nf-color: #c0f;
+    --code-block-ni-color: #999;
+    --code-block-nl-color: #99f;
+    --code-block-nn-color: #0cf;
+    --code-block-no-color: #360;
+    --code-block-nt-color: #2f6f9f;
+    --code-block-nv-color: #033;
+    --code-block-o-color: #555;
+    --code-block-ow-color: #000;
+    --code-block-p-color: #555;
+    --code-block-pi-color: #555;
+    --code-block-s-color: #d44950;
+    --code-block-s1-color: #c30;
+    --code-block-s2-color: #c30;
+    --code-block-sa-color: #555;
+    --code-block-sb-color: #c30;
+    --code-block-sc-color: #c30;
+    --code-block-sd-color: #c30;
+    --code-block-se-color: #c30;
+    --code-block-sh-color: #c30;
+    --code-block-si-color: #a00;
+    --code-block-sr-color: #3aa;
+    --code-block-ss-color: #fc3;
+    --code-block-sx-color: #c30;
+    --code-block-vc-color: #033;
+    --code-block-vg-color: #033;
+    --code-block-vi-color: #033;
+    --code-block-w-color: #bbb;
+  }
+}
+
+.highlight {
+  color: var(--code-block-default-text-color);
+}
+
+.highlight .bp {
+  color: var(--code-block-bp-color);
+}
+
+.highlight .c {
+  color: var(--code-block-c-color);
+}
+
+.highlight .c1 {
+  color: var(--code-block-c1-color);
+}
+
+.highlight .cd {
+  color: var(--code-block-cd-color);
+}
+
+.highlight .ch {
+  color: var(--code-block-ch-color);
+}
+
+.highlight .cm {
+  color: var(--code-block-cm-color);
+}
+
+.highlight .cp {
+  color: var(--code-block-cp-color);
+}
+
+.highlight .cpf {
+  color: var(--code-block-cpf-color);
+}
+
+.highlight .cs {
+  color: var(--code-block-cs-color);
+}
+
+.highlight .dl {
+  color: var(--code-block-dl-color, --code-block-default-text-color);
+}
+
+.highlight .err {
+  color: var(--code-block-err-color);
+  background-color: var(--code-block-err-background-color);
+}
+
+.highlight .gd {
+  color: var(--code-block-gd-color);
+  background-color: var(--code-block-gd-background-color);
+}
+
+.highlight .ge {
+  font-style: italic;
+}
+
+.highlight .gh {
+  font-weight: var(--code-block-gh-font-weight, normal);
+  background-color: var(--code-block-gh-background-color, transparent);
+  color: var(--code-block-gh-color);
+}
+
+.highlight .gi {
+  color: var(--code-block-gi-color);
+  background-color: var(--code-block-gi-background-color);
+  border: 1px solid var(--code-block-gi-border-color);
+}
+
+.highlight .go {
+  color: var(--code-block-go-color);
+}
+
+.highlight .gp {
+  color: var(--code-block-gp-color);
+}
+
+.highlight .gr {
+  color: var(--code-block-gr-color);
+}
+
+.highlight .gs {}
+
+.highlight .gt {
+  color: var(--code-block-gt-color);
+}
+
+.highlight .gu {
+  color: var(--code-block-gu-color);
+}
+
+.highlight .hll {
+  background-color: var(--code-block-background-color);
+}
+
+.highlight .il {
+  color: var(--code-block-il-color);
+}
+
+.highlight .k {
+  color: var(--code-block-k-color);
+}
+
+.highlight .kc {
+  color: var(--code-block-kc-color);
+}
+
+.highlight .kd {
+  color: var(--code-block-kd-color);
+}
+
+.highlight .kn {
+  color: var(--code-block-kn-color);
+}
+
+.highlight .kp {
+  color: var(--code-block-kp-color);
+}
+
+.highlight .kr {
+  color: var(--code-block-kr-color);
+}
+
+.highlight .kt {
+  color: var(--code-block-kt-color);
+}
+
+.highlight .kv {
+  color: var(--code-block-kv-color, --code-block-default-text-color);
+}
+
+.highlight .m {
+  color: var(--code-block-m-color);
+}
+
+.highlight .mb {
+  color: var(--code-block-mb-color);
+}
+
+.highlight .mf {
+  color: var(--code-block-mf-color);
+}
+
+.highlight .mh {
+  color: var(--code-block-mh-color);
+}
+
+.highlight .mi {
+  color: var(--code-block-mi-color);
+}
+
+.highlight .mo {
+  color: var(--code-block-mo-color);
+}
+
+.highlight .mx {
+  color: var(--code-block-mx-color);
+}
+
+.highlight .na {
+  color: var(--code-block-na-color);
+}
+
+.highlight .nb {
+  color: var(--code-block-nb-color);
+}
+
+.highlight .nc {
+  color: var(--code-block-nc-color);
+}
+
+.highlight .nd {
+  color: var(--code-block-nd-color);
+}
+
+.highlight .ne {
+  color: var(--code-block-ne-color);
+}
+
+.highlight .nf {
+  color: var(--code-block-nf-color);
+}
+
+.highlight .ni {
+  color: var(--code-block-ni-color);
+}
+
+.highlight .nl {
+  color: var(--code-block-nl-color);
+}
+
+.highlight .nn {
+  color: var(--code-block-nn-color);
+}
+
+.highlight .no {
+  color: var(--code-block-no-color);
+}
+
+.highlight .nt {
+  color: var(--code-block-nt-color);
+}
+
+.highlight .nv {
+  color: var(--code-block-nv-color);
+}
+
+.highlight .o {
+  color: var(--code-block-o-color);
+}
+
+.highlight .ow {
+  color: var(--code-block-ow-color);
+}
+
+.highlight .p {
+  color: var(--code-block-p-color);
+}
+
+.highlight .pi {
+  color: var(--code-block-pi-color);
+}
+
+.highlight .s {
+  color: var(--code-block-s-color);
+}
+
+.highlight .sa {
+  color: var(--code-block-sa-color, --code-block-default-text-color)
+}
+
+.highlight .s1 {
+  color: var(--code-block-s1-color);
+}
+
+.highlight .s2 {
+  color: var(--code-block-s2-color);
+}
+
+.highlight .sb {
+  color: var(--code-block-sb-color);
+}
+
+.highlight .sc {
+  color: var(--code-block-sc-color);
+}
+
+.highlight .sd {
+  color: var(--code-block-sd-color);
+  font-style: italic;
+}
+
+.highlight .se {
+  color: var(--code-block-se-color);
+}
+
+.highlight .sh {
+  color: var(--code-block-sh-color);
+}
+
+.highlight .si {
+  color: var(--code-block-si-color);
+}
+
+.highlight .sr {
+  color: var(--code-block-sr-color);
+}
+
+.highlight .ss {
+  color: var(--code-block-ss-color);
+}
+
+.highlight .sx {
+  color: var(--code-block-sx-color);
+}
+
+.highlight .vc {
+  color: var(--code-block-vc-color);
+}
+
+.highlight .vg {
+  color: var(--code-block-vg-color);
+}
+
+.highlight .vi {
+  color: var(--code-block-vi-color);
+}
+
+.highlight .w {
+  color: var(--code-block-w-color);
+}
+
+pre,
+code {
+  font-family: 'Monaco', 'Roboto Mono', monospace;
+}
+
+code {
+  background-color: #F9F9F9;
+  border-radius: 3px;
+  font-size: 85%;
+  padding: 0.25em 0.5em;
+}
+
+.highlight code {
+  background-color: var(--code-block-background-color);
+  padding: 0 0;
+}
+
+pre {
+  margin: 0 0 1rem;
+}
+
+pre code {
+  background-color: transparent;
+  color: inherit;
+  font-size: 90%;
+  padding: 0;
+  white-space: pre;
+}
+
+.highlight {
+  background-color: var(--code-block-background-color);
+  border-radius: 8px;
+  line-height: 1.4;
+  margin: 0 0 1rem;
+  padding: 1rem;
+  border: 1px solid #e8eaed;
+}
+
+.highlight pre {
+  margin-bottom: 0;
+  overflow-x: auto;
+}
+
+.highlight .lineno {
+  color: #aaa;
+  display: inline-block;
+  padding: 0 0.75rem 0 0.25rem;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.highlight .highlight {
+  border: none;
+  margin: 0;
+}
+
+.code-tab-container {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 20px;
+  font-weight: 400;
+  -webkit-text-size-adjust: 100%;
+  background: #fff;
+  border-radius: 8px 8px 0px 0px;
+  border: 1px solid #e8eaed;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.code-tab-container a:hover,
+.code-tab-container a:visited,
+.code-tab-container a:link,
+.code-tab-container a:active {
+  text-decoration: none !important;
+}
+
+.code-tab-container a:hover {
+  color: #000;
+  border-color: #bcbcbc;
+}
+
+.code-tab-container>* {
+  flex: none;
+  padding-left: 20px;
+  position: relative;
+}
+
+.code-tab-container a {
+  display: flex;
+  align-items: center;
+  column-gap: 0.25em;
+  justify-content: center;
+  padding: 10px;
+  color: #5f6368;
+  border-radius: 3px 3px 0px 0px;
+  border-bottom: 3px solid transparent;
+  font-size: 14px;
+  transition: color 0.1s ease-in-out;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.code-tab-container .active-tab>a {
+  color: #1769e0;
+  border-color: #1769e0;
+}
+
+.code-tab-container li::before {
+  content: '';
+}
+
+.code-tab-container li {
+  margin: 0;
+  list-style-type: none;
+}
+
+.code-tab-switcher li::before {
+  content: '';
+}
+
+.code-tab-switcher li {
+  margin: 0;
+  list-style-type: none;
+}
+
+.code-tab-switcher {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-radius: 0px 0px 8px 8px;
+}
+
+.code-tab-switcher> :not(.active-tab) {
+  display: none;
+}
+
+.code-tab-switcher>*> :last-child {
+  margin-bottom: 0;
+}
+
+.code-tab-switcher .highlight {
+  border-radius: 0px 0px 8px 8px;
+  border-top: 0px solid;
+}
+
+.code_switcher_container_parent {
+  position: relative;
+}
+
+.code_switcher_code_action_container {
+  position: absolute;
+  right: 6px;
+  top: 6px;
+  z-index: 1;
+}
+
+.code_switcher_copy_button {
+  background-size: 18px 18px;
+  border: none;
+  font-size: 18px;
+  min-width: 18px;
+  min-height: 18px;
+  height: 18px;
+  width: 18px;
+  background-color: var(--code-block-action-button-color, #666666);;
+  -webkit-mask-image: url(icon_copy.svg);
+  mask-image: url(icon_copy.svg);
+  -webkit-mask-size: cover;
+  margin-right: 4px;
+}
+
+.code_switcher_theme_button {
+  background-size: 18px 18px;
+  border: none;
+  font-size: 18px;
+  min-width: 18px;
+  min-height: 18px;
+  height: 18px;
+  width: 18px;
+  background-color: var(--code-block-action-button-color, #666666);
+  -webkit-mask-image: url(icon_theme.svg);
+  mask-image: url(icon_theme.svg);
+  -webkit-mask-size: cover;
+}
+
+#code_copied_snackbar {
+  visibility: hidden;
+  min-width: 240px; 
+  margin-left: -125px; 
+  background-color: #333;
+  color: #fff; 
+  text-align: center; 
+  border-radius: 10px; 
+  padding: 16px;
+  position: fixed; 
+  z-index: 1; 
+  left: 50%;
+  bottom: 30px;
+  font-family: 'Monaco', 'Roboto Mono', monospace;
+}
+
+#code_copied_snackbar.show {
+  visibility: visible; 
+  -webkit-animation: code_copied_snackbar_fade_in 0.3s, code_copied_snackbar_fade_out 0.3s 1.5s;
+  animation: code_copied_snackbar_fade_in 0.3s, code_copied_snackbar_fade_out 0.3s 1.5s;
+}
+
+/* Animations to fade the snackbar in and out */
+@-webkit-keyframes code_copied_snackbar_fade_in {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes code_copied_snackbar_fade_in {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes code_copied_snackbar_fade_out {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}
+
+@keyframes code_copied_snackbar_fade_out {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}

data/assets/codeblock.js

@@ -0,0 +1,93 @@
+function selectTab(codeLangClass, tabClass, tabIndex) {
+    var tabbedItemsWithMatchingLanguage = [...new Set(Array.prototype.slice.call(document.getElementsByClassName(codeLangClass))
+        .map(item => item.parentNode))];
+
+    tabbedItemsWithMatchingLanguage
+        .flatMap(item => Array.prototype.slice.call(item.children))
+        .forEach(item => item.classList.remove("active-tab"));
+
+
+    tabbedItemsWithMatchingLanguage.forEach((element) => {
+         Array.prototype.slice.call(element.children)
+            .filter( item => item.matches("." + codeLangClass))[0]
+            .classList.add("active-tab");
+    });
+
+    var tabsMatchingTabClass = [...new Set(Array.prototype.slice.call(document.getElementsByClassName(tabClass)))];
+
+    tabsMatchingTabClass
+        .flatMap(item => Array.prototype.slice.call(item.children))
+        .forEach(item => item.classList.remove("active-tab"));
+
+
+    tabsMatchingTabClass.forEach((tab) => {
+        Array.prototype.slice.call(tab.children)[tabIndex].classList.add("active-tab");
+    });
+};
+
+function isNumeric(str) {
+  return !isNaN(str) && !isNaN(parseFloat(str))
+}
+
+function getRange(text) {
+    if (!text?.length) {
+        return [];
+    }
+    var elements = text.split("-").map(i => parseInt(i));
+    var a = Math.min(...elements);
+    var b = Math.max(...elements);
+    return Array.from(new Array(Math.abs(a - b) + 1), (x, i) => i + Math.min(a, b));
+};
+
+function copyText(codeBlockClass, copyRange) {
+    var copyButton = document.getElementById("code_switcher_copy_button");
+    copyButton.setAttribute("disabled", "true");
+    var lines = [...new Set(copyRange.replace(/\s/g, "").split(",").flatMap(item => getRange(item)))];
+    lines.sort();
+
+    var copiedText = document.getElementsByClassName(codeBlockClass)[0].innerText;
+    if (lines !== undefined && lines.length > 0) {
+        copiedText = lines.map(lineNumber => copiedText.split("\n")[lineNumber])
+            .filter(item => item?.length)
+            .join("\n")
+    }
+    navigator.clipboard.writeText(copiedText);
+    var snackbar = document.getElementById("code_copied_snackbar");
+    snackbar.classList.add("show")
+    setTimeout(function() { snackbar.classList.remove("show"); copyButton.removeAttribute("disabled"); }, 1790);
+};
+
+var darkModeMatcher = window.matchMedia("(prefers-color-scheme: dark)");
+
+darkModeMatcher.addListener(matcher => {
+    localStorage.setItem("code-block-theme", "");
+    updateTheme(false);
+});
+
+function updateTheme(switchTheme) {
+    var theme = localStorage.getItem("code-block-theme");
+
+    var isCurrentThemeDark = false;
+    if (theme == "dark") {
+        isCurrentThemeDark = true;
+    } else if (theme == "light") {
+        isCurrentThemeDark = false;
+    } else if (darkModeMatcher.matches) {
+        isCurrentThemeDark = true;
+    } else {
+        isCurrentThemeDark = false;
+    }
+
+    var updatedTheme = "dark";
+    /* This is performing a logical XNOR */
+    if (isCurrentThemeDark == switchTheme) {
+        updatedTheme = "light";
+    }
+
+    document.documentElement.setAttribute("data-code-block-theme", updatedTheme);
+    localStorage.setItem("code-block-theme", updatedTheme);
+};
+
+updateTheme(false);
+
+window.onload = function() { updateTheme(false); };

data/assets/icon_copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#666666"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>

data/assets/icon_theme.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 6.5v11c3.03 0 5.5-2.47 5.5-5.5S15.03 6.5 12 6.5z"/></svg>

data/lib/jekyll-commonmark-codetabs.rb

@@ -0,0 +1,187 @@
+require "commonmarker"
+require "jekyll-commonmark-ghpages"
+require "jekyll"
+require "securerandom"
+
+class CodeTabsCustomerRenderer < JekyllCommonMarkCustomRenderer
+  @added_copy_snackbar = false
+
+  def code_block(node)
+    #Determine what objects this code block is surrounded by.
+    previous_node_type = node&.previous&.type&.to_s
+    next_node_type = node&.next&.type&.to_s
+
+    #If this item has neighboring code blocks or a custom tab header, it should show tabs
+    using_custom_label = (split_lanugage_fence_info(node)&.size || 0) > 1
+    is_header_item = previous_node_type != "code_block" && (next_node_type == "code_block" || using_custom_label)
+    is_alone = previous_node_type != "code_block" && next_node_type != "code_block" && !using_custom_label
+
+    #Get a unique ID per code block in order to allow code copying
+    individual_code_block_id = SecureRandom.uuid
+
+    if (is_copy_action_enabled(node))
+      if (!@added_copy_snackbar)
+        out("<div id=\"code_copied_snackbar\">Copied!</div>")
+        @added_copy_snackbar = true
+      end
+    end
+
+    #Create a header if necessary and then creates the wrapper for each item
+    #This allows tabs to be selected individaully
+    if (is_header_item)
+      create_tabbed_code_header(node)
+      out("<li class=\"code_switcher_container_parent active-tab #{get_code_language_switcher_class(node)} #{individual_code_block_id}\">")
+    elsif (!is_alone) 
+      out("<li class=\"code_switcher_container_parent #{get_code_language_switcher_class(node)} #{individual_code_block_id}\">")
+    else 
+      out("<div class=\"code_switcher_container_parent #{individual_code_block_id}\">")
+    end
+
+    #Add the action buttons for this code block
+    #Changing theme button is added to all code blocks, but the copy button is configurable.
+    out("<div class=\"code_switcher_code_action_container\">")
+    if (is_copy_action_enabled(node))
+      out("<button id=\"code_switcher_copy_button\" class=\"code_switcher_copy_button\" title=\"Copy\" onclick=\"copyText(\'#{individual_code_block_id}\', \'#{get_code_copy_Lines(node)}\')\"></button>")
+    end
+    out("<button class=\"code_switcher_theme_button\" onclick=\"updateTheme(true)\"></button>")
+    out("</div>")
+
+    #Generate the actual code block from markdown using the super class
+    super(node)
+
+    #Close this code block's container
+    if (!is_alone) 
+      out("</li>")
+    else
+      out("</div>")
+    end
+
+    #Closee the entire tab container if this is the last code block in a tabbed container
+    if (next_node_type != "code_block" && !is_alone)
+      out("</ul>")
+    end
+  end
+
+  #Splits the code fence into the language and extra info
+  #Removes the CopyDisable item which is just a flag used to enable showing a copy action button
+  def split_lanugage_fence_info(node)
+    node&.fence_info&.sub(/ CopyDisable=?"?([\ \-\,0-9]*)"?/, "")&.split(/[\s,]/, 2)
+  end
+
+  #Gets the language used in the code fence (the part typically immediately after a triple backtick in markdown)
+  def get_code_language(node)
+    split_lanugage_fence_info(node)&.first || "unknown"
+  end
+
+  #Gets the label shown to the user. This is the rest of code fence after the first space
+  def get_code_language_label(node)
+    split_lanugage_fence_info(node)&.last || "Code"
+  end
+
+  #Gets language class name used for the code switcher. This allows selection of the same language across
+  #multiple code tab items.
+  def get_code_language_switcher_class(node)
+    lang = get_code_language(node)
+    lang == "unknown" ? "" : "code_switcher_#{lang&.downcase}"
+  end
+
+  #Determines whether the copy action should be shown for a given code block based on info in the code fence info
+  def is_copy_action_enabled(node)
+    !node&.fence_info&.include?("CopyDisable")
+  end
+
+  def get_code_copy_Lines(node)
+    node&.fence_info[/ CopyDisable=?"?([\ \-\,0-9]*)"?/, 1] || ""
+  end
+
+  #Creates the tab header portion of the code switcher
+  def create_tabbed_code_header(node)
+    uuid = SecureRandom.uuid
+
+    out("<ul class=\"code-tab-container #{uuid}\">")
+    
+    tab_number = 0
+    tab_node = node
+    while tab_node&.type&.to_s == 'code_block'
+      label = get_code_language_label(tab_node)
+
+      active_tab_class = (tab_number == 0) ? "active-tab" : ""
+      code_lang_class = get_code_language_switcher_class(tab_node)
+      out("<li class=\"#{active_tab_class} #{code_lang_class}\">")
+      out("<a onclick=\"selectTab('#{code_lang_class}', '#{uuid}', #{tab_number})\">#{label}</a>")
+      out("</li>")
+
+      tab_node = tab_node&.next
+      tab_number = tab_number + 1
+    end
+
+    out("</ul>")
+
+    out("<ul class=\"code-tab-switcher #{uuid}\">")
+  end
+end
+
+class Jekyll::Converters::Markdown
+  # A Markdown renderer which uses CodeTabsCustomerRenderer to output the
+  # final document. The CodeTabsCustomerRenderer renderer mainly uses the
+  # parent render but updates code blocks to allow for tabbing behavior
+  class CommonMarkCodeTabs < CommonMarkGhPages
+    def convert(content)
+      doc = CommonMarker.render_doc(content, @parse_options, @extensions)
+      html = CodeTabsCustomerRenderer.new(
+        :options => @render_options,
+        :extensions => @extensions
+      ).render(doc)
+      html.gsub(/<br data-jekyll-commonmark-ghpages>/, "\n")
+    end
+  end
+end
+
+def get_resource_string(site)
+ return "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto+Mono\"/>" +
+        "<link rel=\"stylesheet\" href=\"#{site.baseurl}/assets/codeblock.css\"/>" +
+        "<script src=\"#{site.baseurl}/assets/codeblock.js\"></script>"
+end
+
+def add_resource_links_in_html_head(site)
+  site_directory = "#{site.in_dest_dir("/")}"
+
+  # For every html file in the generated site 
+  Dir.glob("**/*.html", base: site_directory).each do |file_name|
+    file_plus_path = "#{site_directory}#{file_name}"
+
+    # Check if the file contains a code switcher and skip it if it does not
+    if (!File.foreach(file_plus_path).grep(/code_switcher_container_parent/).any?)
+      next
+    end
+
+    # If the file has a code switcher and a head element, add the resource links to the end of the head element
+    if (File.foreach(file_plus_path).grep(/<\/head>/).any?)
+      File.write(file_plus_path, File.open(file_plus_path, &:read).sub("</head>","#{get_resource_string(site)}</head>"))
+    # Otherwise if it has a html element add a head element with the resource links
+    elsif (File.foreach(file_plus_path).grep(/<\/html>/).any?)
+      File.write(file_plus_path, File.open(file_plus_path, &:read).sub(/(<html.*>)/,"#{$1}<head>#{get_resource_string(site)}</head>"))
+    end
+  end
+end
+
+#After the site is written, the necessary files this plugin's generateed code needs are also written
+Jekyll::Hooks.register :site, :post_write do |site|
+  #Copy CSS required for code tabs
+  css = File.expand_path("../../assets/codeblock.css", __FILE__)
+  FileUtils.mkdir_p("#{site.in_dest_dir("assets/")}")
+  FileUtils.cp(css, "#{site.in_dest_dir("assets/codeblock.css")}")
+
+  #Copy required javascript
+  js = File.expand_path("../../assets/codeblock.js", __FILE__)
+  FileUtils.cp(js, "#{site.in_dest_dir("assets/codeblock.js")}")
+
+  #Copy icons for copy and theme actions
+  copy_icon = File.expand_path("../../assets/icon_copy.svg", __FILE__)
+  FileUtils.cp(copy_icon, "#{site.in_dest_dir("assets/icon_copy.svg")}")
+  theme_icon = File.expand_path("../../assets/icon_theme.svg", __FILE__)
+  FileUtils.cp(theme_icon, "#{site.in_dest_dir("assets/icon_theme.svg")}")
+
+  #Add CSS & JS references to files that use code tabs
+  add_resource_links_in_html_head(site)
+end

metadata

@@ -0,0 +1,115 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-commonmark-codetabs
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- vveicc
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2023-03-03 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: securerandom
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.2'
+- !ruby/object:Gem::Dependency
+  name: jekyll-commonmark-ghpages
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+- !ruby/object:Gem::Dependency
+  name: rouge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '4'
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.2'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.2'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+description: 
+email: vveicc@163.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- assets/codeblock.css
+- assets/codeblock.js
+- assets/icon_copy.svg
+- assets/icon_theme.svg
+- lib/jekyll-commonmark-codetabs.rb
+homepage: https://github.com/vveicc/jekyll-commonmark-codetabs
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.6.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3.1
+signing_key: 
+specification_version: 4
+summary: CommonMark generator for Jekyll that adds tabbed code functionality
+test_files: []