Minor fixes (#80)

Author: jefBinomed

demo/markdown/01-classics/20_transitions.md

@@ -179,7 +179,7 @@ source: [unsplash](https://unsplash.com/fr/photos/couloir-en-beton-avec-applique
 
 ##--##
 
-<!-- .slide: class="whith-code" -->
+<!-- .slide: class="with-code" -->
 
 # Code to produce / Markdown
 
@@ -201,7 +201,7 @@ source: [unsplash](https://unsplash.com/fr/photos/couloir-en-beton-avec-applique
 
 ##--##
 
-<!-- .slide: class="whith-code" -->
+<!-- .slide: class="with-code" -->
 
 # Code to produce / Markdown
 
@@ -223,7 +223,7 @@ source: [unsplash](https://unsplash.com/fr/photos/couloir-en-beton-avec-applique
 
 ##--##
 
-<!-- .slide: class="whith-code" -->
+<!-- .slide: class="with-code" -->
 
 # Code to produce / Markdown
 

demo/markdown/03-layouts/20_multiple-columns.md

@@ -32,17 +32,21 @@ Some content with fragment <!-- .element: class="fragment"-->
 
 ##++##
 
-##++##
+##++## class="with-code"
 
 # Column 3
 
-Some content
+Some content with code
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+```
 
 ##++##
 
 ##==##
 
-<!-- .slide: class="whith-code" -->
+<!-- .slide: class="with-code" -->
 
 # Code to produce / Markdown
 
@@ -96,7 +100,7 @@ Some content
 
 ##==##
 
-<!-- .slide: class="whith-code" -->
+<!-- .slide: class="with-code" -->
 
 # Code to produce / Markdown
 

docs/layouts.md

@@ -12,7 +12,7 @@ Also, only colors and image background are allowed in multiple columns !
 
 A new syntax has to be used
 
-```md
+````md
 <!-- .slide: class="tc-multiple-columns" -->
 
 ##++##
@@ -27,19 +27,23 @@ Some content
 
 # Column 2
 
-Some content
+Some content with code
 
 ##++##
 
-##++##
+##++## class="with-code"
 
 # Column 3
 
-Some content
+Some content with code
 
-##++##
+```xml
+<?xml version="1.0" encoding="utf-8"?>
 ```
 
+##++##
+````
+
 ![](./imgs/multiple-cols.png)
 
 ### Multiple column layout (with background)

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@talk-control/talk-control-revealjs-extensions",
     "private": false,
-    "version": "1.0.0-rc-2",
+    "version": "1.0.0-rc-3",
     "description": "TalkControl aims to provides an easy to use extensions for anyone wanted to create slides with reveal.js",
     "type": "module",
     "repository": {

src/addons/tc-copy-clipboard.spec.ts

@@ -15,11 +15,14 @@ const HTML = `
         <section class="with-code">
             <pre><code>const example = "test code";</code></pre>
         </section>
-        <section class="with-code">
-            <pre>
-                <code>const example = "test code";</code>
-                <code>function test() { return true; }</code>
-            </pre>
+        <section class="tc-multiple-columns">
+            <div class="tc-column with-code"">
+                <pre>
+                    <code>const example = "test code";</code>
+                    <code>function test() { return true; }</code>
+                </pre>
+            </div>
+            <div class="tc-column"></div>
         </section>
         
     </div>

src/addons/tc-copy-clipboard.ts

@@ -24,7 +24,7 @@ export function manageCopyClipboard(options: TcCopyClipboardOptions): void {
     // First we add to each codeblock the icon
     const preBlocks = [
         ...document.querySelectorAll(
-            '.reveal .slides section[class*="with-code"] pre:has(code)'
+            '.reveal .slides *:is(.with-code, .with-code-dark, .with-code-bg-dark) pre:has(code)'
         ),
     ];
 

src/scss/theme/classics/code-slides.scss

@@ -2,7 +2,7 @@
     @import '../../../../node_modules/highlight.js/scss/a11y-light.scss';
 }
 
-.reveal .slides section:is(.with-code, .with-code-dark, .with-code-bg-dark) {
+.reveal .slides *:is(.with-code, .with-code-dark, .with-code-bg-dark) {
     pre {
         display: block;
         position: relative;
@@ -76,7 +76,7 @@
     }
 }
 // Special case for the dark theme
-.reveal .slides section:is(.with-code-dark, .with-code-bg-dark) {
+.reveal .slides *:is(.with-code-dark, .with-code-bg-dark) {
     pre span.tc-copy-to-clipboard {
         --tc-icon-color: white;
     }
@@ -101,14 +101,14 @@
     background-color: var(--tc-code-dark-background);
 }
 
-.reveal .slides section.with-code-dark:not(.stack):not([class*='transition']) {
+.reveal .slides .with-code-dark:not(.stack):not([class*='transition']) {
     h1,
     h2 {
         color: white;
     }
 }
 
-.reveal .slides section.with-code-bg-dark {
+.reveal .slides .with-code-bg-dark {
     pre {
         background-color: var(--tc-code-dark-background);
     }

src/scss/theme/specifics/multiple-column.scss

@@ -2,6 +2,7 @@
     display: flex !important;
     flex-direction: row;
     height: 100%;
+    gap: 15px;
 
     div.tc-column {
         color: var(--tc-multiple-col-color);