diff --git a/changelog.md b/changelog.md
index 8a02bde8..ddc5e123 100644
--- a/changelog.md
+++ b/changelog.md
@@ -10,6 +10,15 @@ When contributing a fix, feature or example please add a new line to briefly exp
 ## 0.3.x
 * _add next change here_
 
+## 0.3.4
+
+* added `nbCodeDisplay` and `nbCodeAnd` (#158).
+  They provide an easy way to:
+    - display code in `nbJsFromCode` and friends
+    - run code both in js and c backend
+  They are also generic templates that can be used with other templates
+  and do not depend on any specificities of `nbJsFromCode` templates.
+
 ## 0.3.3
 
 * Refactored nbJs (#148)
diff --git a/docsrc/interactivity.nim b/docsrc/interactivity.nim
index 1f580897..07d7d309 100644
--- a/docsrc/interactivity.nim
+++ b/docsrc/interactivity.nim
@@ -162,6 +162,36 @@ karaxExample()
 
 nbText: "Another example on how to use `nbKaraxCode` can be found in the [caesar document](./caesar.html) by clicking the `Show Source` button at the bottom."
 
+nbText: hlMd"""
+## nbCodeDisplay and nbCodeAnd
+
+We introduce in this section two generic templates that can be useful when used with the
+templates of `nbJsFromCode` family.
+
+### Display code in nbJsFromCode with nbCodeDisplay
+
+If you wish to display the code used in one of `nbJsFromCode`, `nbJsFromCodeInBlock`, `nbJsFromCodeGlobal`
+you can use `nbCodeDisplay` (which can be used in general with any template that does not show code by itself):
+"""
+nimibCode:
+  nbCodeDisplay(nbJsFromCodeInBlock):
+    echo "hi nbCodeDisplay"
+nbText: hlMd"""
+
+Note that in this same document we gave examples of two other methods
+to show code:
+
+- `nimibCode`: to show the code as you would use it in a nimib file
+- `nbCode` + template: create a template (e.g. `karaxExample`) inside a `nbCode` and call the template later.
+
+### Running the same code with both c and js backends using nbCodeAnd
+
+If you want to run some code both in C and js backends, you can use `nbCodeAnd`:
+"""
+nimibCode:
+  nbCodeAnd(nbJsFromCodeInBlock):
+    echo "hi nbCodeAnd"
+
 nbText: hlMd"""
 ## Internal workings
 ### nbJsFromCode
diff --git a/nimib.nimble b/nimib.nimble
index 43be2ff2..1f252f29 100644
--- a/nimib.nimble
+++ b/nimib.nimble
@@ -1,6 +1,6 @@
 # Package
 
-version       = "0.3.3"
+version       = "0.3.4"
 author        = "Pietro Peterlongo"
 description   = "nimib 🐳 - nim 👑 driven ⛵ publishing ✍"
 license       = "MIT"
diff --git a/src/nimib.nim b/src/nimib.nim
index 4896a2ff..8b7af490 100644
--- a/src/nimib.nim
+++ b/src/nimib.nim
@@ -189,14 +189,27 @@ when moduleAvailable(karax/kbase):
     nbRawHtml: "<div id=\"" & rootId & "\"></div>"
     nbKaraxCodeBackend(rootId, args)
 
-template nbJsShowSource*(message: string = "") =
+template nbJsShowSource*(message: string = "") {.deprecated: "Use nbCodeDisplay instead".} =
   nb.blk.context["js_show_nim_source"] = true
   if message.len > 0:
     nb.blk.context["js_show_nim_source_message"] = message
 
-template nbCodeToJsShowSource*(message: string = "") {.deprecated: "Use nbJsShowSource instead".} =
+template nbCodeToJsShowSource*(message: string = "") {.deprecated: "Use nbCodeDisplay instead".} =
   nbJsShowSource(message)
 
+template nbCodeDisplay*(tmplCall: untyped, body: untyped) =
+  ## display codes used in a template (e.g. nbJsFromCode) after the template call
+  tmplCall:
+    body
+  newNbCodeBlock("nbCode", body):
+    discard
+
+template nbCodeAnd*(tmplCall: untyped, body: untyped) =
+  ## can be used to run code both in c and js backends (e.g. nbCodeAnd(nbJsFromCode))
+  nbCode: # this should work because template name starts with nbCode
+    body
+  tmplCall:
+    body
 
 template nbClearOutput*() =
   if not nb.blk.isNil:
diff --git a/tests/tnimib.nim b/tests/tnimib.nim
index 35f4436e..4fbd3a06 100644
--- a/tests/tnimib.nim
+++ b/tests/tnimib.nim
@@ -209,3 +209,30 @@ when moduleAvailable(karax/kbase):
             text message
       check nb.blk.code.len > 0
       check nb.blk.context["transformedCode"].vString.len > 0
+
+    test "nbCodeDisplay":
+      nbCodeDisplay(nbJsFromCode):
+        import p5
+        echo "hi p5"
+        draw:
+          ellipse(mouseX, mouseY, 20)
+      check nb.blocks[^1].command == "nbCode"
+      check nb.blocks[^2].command == "nbJsFromCode"
+      check nb.blocks[^2].context["transformedCode"].vString.len > 0
+      check "ellipse(mouseX, mouseY, 20)" in nb.blocks[^2].context["transformedCode"].vString
+      when defined(nimibCodeFromAst):
+        check nb.blocks[^1].code.startsWith("import\n  p5")
+      else:
+        check nb.blocks[^1].code.startsWith("import p5")
+      check nb.blocks[^1].output == ""
+
+    test "nbCodeAnd":
+      nbCodeAnd(nbJsFromCode):
+        let you = "me"
+        echo "hi ", you
+      check nb.blocks[^2].command == "nbCode"
+      check nb.blocks[^1].command == "nbJsFromCode"
+      check nb.blocks[^1].context["transformedCode"].vString.len > 0
+      check "you = \"me\"" in nb.blocks[^1].context["transformedCode"].vString
+      check nb.blocks[^2].code.startsWith("let you =")
+      check nb.blocks[^2].output == "hi me\n"