feat(shape): Add new shape that renders code blocks

Author: ghaiklor

examples/complex.js

@@ -32,6 +32,14 @@ Deck.create({
       y: 'middle',
       font: 'Star Wars'
     }
+  }, {
+    name: 'Code',
+    type: 'Code',
+    options: {
+      code: `const sentence = 'You can embed your code here';\nconsole.log(sentence);`,
+      x: 'center',
+      y: 'middle'
+    }
   }],
   animations: [{
     name: 'Print',
@@ -95,6 +103,10 @@ Deck.create({
     order: [
       'FigText::Slide In->Focus'
     ]
+  }, {
+    order: [
+      'Code'
+    ]
   }, {
     shapes: [{
       name: 'Text',

package.json

@@ -28,6 +28,7 @@
     "kittik-animation-print": "3.1.0",
     "kittik-animation-slide": "2.1.0",
     "kittik-cursor": "4.1.0",
+    "kittik-shape-code": "1.0.0",
     "kittik-shape-fig-text": "2.1.0",
     "kittik-shape-image": "2.1.0",
     "kittik-shape-rectangle": "2.1.0",

src/Slide.js

@@ -1,3 +1,4 @@
+import CodeShape from 'kittik-shape-code';
 import FigTextShape from 'kittik-shape-fig-text';
 import ImageShape from 'kittik-shape-image';
 import RectangleShape from 'kittik-shape-rectangle';
@@ -7,7 +8,7 @@ import FocusAnimation from 'kittik-animation-focus';
 import PrintAnimation from 'kittik-animation-print';
 import SlideAnimation from 'kittik-animation-slide';
 
-const SHAPES = {FigText: FigTextShape, Image: ImageShape, Rectangle: RectangleShape, Text: TextShape};
+const SHAPES = {Code: CodeShape, FigText: FigTextShape, Image: ImageShape, Rectangle: RectangleShape, Text: TextShape};
 const ANIMATIONS = {Focus: FocusAnimation, Print: PrintAnimation, Slide: SlideAnimation};
 
 /**