Merge pull request #1 from shafayetShafee/for-revealjs

Used some CSS to polish the output for revealjs

Author: shafayetShafee

README.md

@@ -58,8 +58,16 @@ You can use multiple databases too. Just list them under the `databases` key. Se
 
 ## Example
 
-Here is the source code for a minimal example: [example.qmd](example.qmd).
+Here is the source code for,
 
+- a minimal example for `html` format: [example.qmd](example.qmd).
+
+- a minimal example for `revealjs` format: [example-revelajs.qmd](example-revealjs.qmd) and the [`rendered presentation`](https://shafayetshafee.github.io/interactive-sql/example-revealjs.html)
+
+
+## Limitation
+
+One obvious limitation is that, if you use the `embed-resources` option, sql code will not run.
 
 ## Acknowledgement
 

_extensions/interactive-sql/_extension.yml

@@ -1,6 +1,6 @@
 title: Interactive-sql
 author: Shafayet Khan Shafee
-version: 1.0.1
+version: 1.0.2
 quarto-required: ">=1.3.0"
 contributes:
   filters:

_extensions/interactive-sql/resources/css/interactive-sql.css

@@ -1,7 +1,13 @@
+:root {
+  --sqlime-font-family: Consolas, "Lucida Console", Monaco, monospace;
+  --sqlime-font-size: 0.85em;
+  --sqlime-line-height: 1;
+}
+
 .sqlime-example {
-    font-family: Consolas, "Lucida Console", Monaco, monospace;
-    font-size: 0.85em;
-    line-height: 1;
+    font-family: var(--sqlime-font-family);
+    font-size: var(--sqlime-font-size);
+    line-height: var(--sqlime-line-height);
 }
 
 .sqlime-example div:nth-child(1) {
@@ -14,6 +20,9 @@
     background-color: rgba(233,236,239,.30);
     border: 1px solid rgba(233,236,239,.30);
     border-radius: 0.25rem;
+    max-width: 70em;
+    max-height: 40em;
+    overflow: auto;
 }
 
 .sqlime-example table {
@@ -61,3 +70,44 @@
 .sqlime-example table tr:last-child td {
     padding-bottom: 0.8em;
 }
+
+
+/* For Revealjs */
+.reveal .sqlime-example button {
+  cursor: pointer;
+  border-radius: 0;
+  background-color: white;
+  margin: 0;
+  font-family: inherit;
+  font-size: calc(0.8*var(--sqlime-font-size));
+  line-height: 1em;
+}
+
+.reveal .sqlime-example a {
+  font-family: var(--sqlime-font-family);
+  font-size: calc(0.8*var(--sqlime-font-size));
+}
+
+.reveal .sqlime-example table {
+  font-family: var(--sqlime-font-family);
+  font-size: calc(0.8*var(--sqlime-font-size));
+  margin: 0;
+}
+
+.reveal .sqlime-example table th {
+  padding: 0.5em;
+}
+
+.reveal .sqlime-example table td {
+  border-bottom: none;
+}
+
+.reveal .sqlime-example div:nth-child(2) {
+  max-height: 8em;
+  max-width: 30em;
+  overflow: auto;
+}
+
+.reveal .interactive-sql code[contenteditable="true"] {
+  padding-left: 1em;
+}

_extensions/interactive-sql/resources/js/interactive-sql.js

@@ -4,4 +4,19 @@
     let sqlime_output = el.querySelector('div.sqlime-example');
     el.appendChild(sqlime_output);
   });
+  
+  // for revealjs, removing the `numberSource` from <pre> from when 
+  // `contenteditable="true"` in <code>, so that line numbers doesnot show
+  // up.
+  
+  let reveal_sqldiv = document.querySelectorAll('.reveal div.interactive-sql');
+  reveal_sqldiv.forEach(el => {
+    let pre = el.querySelector('pre.sourceCode');
+    let code = el.querySelector('code.sourceCode');
+    if (code.hasAttribute('contenteditable')) {
+      if (pre.classList.contains('numberSource')) {
+        pre.classList.remove('numberSource');
+      };
+    };
+  });
 })();